Classes for managing large sets of animations in Framer.js. Objects are simple and flexible, and can be used interchangeably with Animation objects.

• [Download] (https://github.com/isaacw/framer-animation-collections/archive/master.zip) (Framer Studio project and examples)
• Unzip and go to AnimationCollections.framer/modules/
• Copy AnimationSequence.coffee and AnimationSet.coffee into your Framer Studio project modules folder
• Open your Framer Studio project and, at the top, paste:

{AnimationSequence} = require "AnimationSequence"
{AnimationSet} = require "AnimationSet"

square = new Layer
	width: 80
	height: 80
	borderRadius: 8
square.center()

rotateAnimation = new Animation
	layer: square
	properties: 
		rotation: 360

moveAnimation = new Animation
	layer: square
	properties: 
		scale: 2

tweenAnimation = new Animation
	layer: square
	properties: 
		borderRadius: 40

Pass the animations in in the desired order

squaresAnimation = new AnimationSequence
	animations:
		first: rotateAnimation
		second: moveAnimation
		third: fadeBgAnimation
		fourth: tweenAnimation

AnimationSequence and AnimationSet look very similar, but serve different functions. Both classes inherit from Framer.EventEmitter and emit events Events.AnimationStart and Events.AnimationEnd.

Inherits from: Framer.EventEmitter.

Manages a sequence of animations. Animations play in the order specified.

Instantiates a new AnimationSequence.

Example

mySequence = new AnimationSequence
    animations:
        a: myAnimation
        b: myOtherAnimation
        c: myOtherSequence
    repeat: false

If set true, the sequence will repeat after the final animation has completed; Events.AnimationEnd will not emit.

Adds an animation to the end of the sequence.

Adds an animation to the beginning of the sequence.

Starts/resumes the sequence.

Stops the sequence.

Inherits from: Framer.EventEmitter.

Manages a set of animations. Animations play simultaneously.

Instantiates a new AnimationSet.

Example

mySet = new AnimationSet
    animations:
        a: myAnimation
        b: myOtherAnimation
        c: myOtherOtherAnimation
    repeat: false

If set true, the set will repeat after all the animations have completed; Events.AnimationEnd will not emit.

Adds an animation to the collection.

Starts/resumes the set.

Stops the set.

Returns: boolean Returns true if an animation in the set is currently playing

• Initial release!

If you haven't already, join the Framer JS Facebook group and post examples and questions. If I get a chance, I'll try to personally answer any questions.

Also, please, feel free to contribute! Right now I mostly need help with bugs and robustness.

• AnimationSequence.front method
• Remove methods
• Reset methods