Framer.js classes for managing large sets of animations
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
AnimationCollections.framer
examples
LICENSE
README.md

README.md

Animation Collections for Framer.js

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

Get Started

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

Example

Create a new layer
square = new Layer
	width: 80
	height: 80
	borderRadius: 8
square.center()
Define some animations
rotateAnimation = new Animation
	layer: square
	properties: 
		rotation: 360

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

tweenAnimation = new Animation
	layer: square
	properties: 
		borderRadius: 40
Create an animation sequence

Pass the animations in in the desired order

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

Documentation

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

AnimationSequence

Inherits from: Framer.EventEmitter.

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

new AnimationSequence(options <object>)

Instantiates a new AnimationSequence.

Example

mySequence = new AnimationSequence
    animations:
        a: myAnimation
        b: myOtherAnimation
        c: myOtherSequence
    repeat: false
AnimationSequence.repeat <boolean>

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

AnimationSequence.add(animation <object>)

Adds an animation to the end of the sequence.

AnimationSequence.front(animation <object>)

Adds an animation to the beginning of the sequence.

AnimationSequence.start()

Starts/resumes the sequence.

AnimationSequence.stop()

Stops the sequence.

AnimationSet

Inherits from: Framer.EventEmitter.

Manages a set of animations. Animations play simultaneously.

new AnimationSet(options <object>)

Instantiates a new AnimationSet.

Example

mySet = new AnimationSet
    animations:
        a: myAnimation
        b: myOtherAnimation
        c: myOtherOtherAnimation
    repeat: false
AnimationSet.repeat <boolean>

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

AnimationSet.add(animation <object>)

Adds an animation to the collection.

AnimationSet.start()

Starts/resumes the set.

AnimationSet.stop()

Stops the set.

AnimationSet.isAnimating()

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

Changelog

v0.3 2015-08-15
New
  • Initial release!

Misc Stuff

Community & Help

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.

Backlog
  • AnimationSequence.front method
  • Remove methods
  • Reset methods