anim8js-scrollmagic

anim8 your ScrollMagic project.

Installation

• Bower: bower install anim8js-scrollmagic
• Node: npm install anim8js-scrollmagic
• Download: anim8js-scrollmagic

Index

• Examples
• Documentation

Examples

new ScrollMagic.Scene({triggerElement: '#trigger', duration: '100%'})
  .addTo( controller )
  // Triggered when transitioning from outside to inside scene
  .enter(function() {
    this.animator('#element', function() {
      this.play('tada'); // ANY functions on animator
    });
    // this.animators
    // this.movie
    // this.player
  })
  // Triggered when transitioning from inside to outside scene
  .exit(function() {
    this.animator('#element', function() {
      this.transition('2s', 'rollOut');
    });
  })
  // Triggered when going from inside scene to BEFORE scene
  .before(function() {
    this.animators('#letters', function() {
      this.sequence( 100 ).play('fadeIn'); // ANY functions on animators
    });
  })
  // Triggered when going from inside scene to AFTER scene
  .after(function() {
    this.movie( movie, function() {
      this.play(); // ANY functions on MoviePlayer
    });
  })
  // Triggered while in scene - the calls are interpolated while scrolling
  .during(function() {
    this.animator('#box', function() {
      this.play('wiggle');
    });
  })
  // Generic Transitioning (any state to AFTER scene)
  .transition('*', 'AFTER', function() {
    this.animator('#element', function() {
      this.queue('wiggle inf');
    });
  })
  // Multiple
  listen('enter before *>AFTER', function() {
    // Execute on enter, when we go before the scene, and when we go after the scene
  })
  // A short cut to a single call
  .animate('during', 'animator', '#box', 'play', 'wiggle')
  // Switch the direction of the scene
  .setBackwards( true )
;

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 else
• before: 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 else
• enter: go from outside the scene to inside or if you land on the page in the scene
• exit: go from inside the scene to outside
• any: go from any state to another
• start: land on the page
• startBefore: land on the page before the scene
• startAfter: land on the page after the scene
• startDuring: land on the page inside the scene
• intro: same as enter except it applies the initial state of the animations if the user lands on the page BEFORE the scene
• outro: same as exit except it applies the final state of the animations if the user lands on the page AFTER the scene
• during: 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 strings
• transition: 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)