anim8 your ScrollMagic project.
Installation
- Bower:
bower install anim8js-scrollmagic
- Node:
npm install anim8js-scrollmagic
- Download: anim8js-scrollmagic
Index
Examples
triggerElement: '#trigger' duration: '100%' // Triggered when transitioning from outside to inside scene // Triggered when transitioning from inside to outside scene // Triggered when going from inside scene to BEFORE scene // Triggered when going from inside scene to AFTER scene // Triggered while in scene - the calls are interpolated while scrolling // Generic Transitioning (any state to AFTER scene) // Multiple // A short cut to a single call // Switch the direction of the scene ;
Documentation
This plugin works by detecting events relative to the current scene, and invoking a function which builds commands to play when the event is triggered.
Events (occurs when you...)
after
: go from inside the scene to AFTER, or if you land on the page AFTER the scene.fromAfter
: go from AFTER the scene to anywhere elsebefore
: go from inside the scene to BEFORE or if you land on the page BEFORE the scene.fromBefore
: go from BEFORE the scene to anywhere elseenter
: go from outside the scene to inside or if you land on the page in the sceneexit
: go from inside the scene to outsideany
: go from any state to anotherstart
: land on the pagestartBefore
: land on the page before the scenestartAfter
: land on the page after the scenestartDuring
: land on the page inside the sceneintro
: same as enter except it applies the initial state of the animations if the user lands on the page BEFORE the sceneoutro
: same as exit except it applies the final state of the animations if the user lands on the page AFTER the sceneduring
: are scrolling through the scene. animations are interpolated from start to finish over the duration of the scene
You can listen for events by using the event name as a function and passing a function, or by using the following functions:
listen
: animate on multiple events specified in a space-delimited string or array of stringstransition
: animate when from one state to another - the events above use this function
Build Commands
animator( subject or query, function which makes animator calls )
animators( subjects or query, function which makes animators calls )
movie( movie, function which makes movie player calls )
player( player, function which makes movie player calls )
Quick Animate
This allows you to add animations in a shorthand manner:
animate( event, build, subject, subject method, subject arguments... )
Backwards
ScrollMagic works by having the user scroll down or to the right of a page. If
you set a scene to backwards with setBackwards( true )
then the BEFORE/AFTER and
progress through a scene is swapped for anim8js functions. This allows you to have
scroll up and scroll left pages (make sure to set the scrollbar the whole way to the bottom/right when you initialize your scenes)