|
7 | 7 | - Bower: `bower install anim8js-scrollmagic` |
8 | 8 | - Node: `npm install anim8js-scrollmagic` |
9 | 9 | - Download: [anim8js-scrollmagic](https://raw.githubusercontent.com/anim8js/anim8js-scrollmagic/master/build/anim8js-scrollmagic.js) |
| 10 | + |
| 11 | +### Examples |
| 12 | +```javascript |
| 13 | +new ScrollMagic.Scene({triggerElement: '#trigger', duration: '100%'}) |
| 14 | + .addTo( controller ) |
| 15 | + // Triggered when transitioning from outside to inside scene |
| 16 | + .enter(function() { |
| 17 | + this.animator('#element', function() { |
| 18 | + this.play('tada'); // ANY functions on animator |
| 19 | + }); |
| 20 | + // this.animators |
| 21 | + // this.movie |
| 22 | + // this.player |
| 23 | + }) |
| 24 | + // Triggered when transitioning from inside to outside scene |
| 25 | + .exit(function() { |
| 26 | + this.animator('#element', function() { |
| 27 | + this.transition('2s', 'rollOut'); |
| 28 | + }); |
| 29 | + }) |
| 30 | + // Triggered when going from inside scene to BEFORE scene |
| 31 | + .before(function() { |
| 32 | + this.animators('#letters', function() { |
| 33 | + this.sequence( 100 ).play('fadeIn'); // ANY functions on animators |
| 34 | + }); |
| 35 | + }) |
| 36 | + // Triggered when going from inside scene to AFTER scene |
| 37 | + .after(function() { |
| 38 | + this.movie( movie, function() { |
| 39 | + this.play(); // ANY functions on MoviePlayer |
| 40 | + }); |
| 41 | + }) |
| 42 | + // Triggered while in scene - the calls are interpolated while scrolling |
| 43 | + .during(function() { |
| 44 | + this.animator('#box', function() { |
| 45 | + this.play('wiggle'); |
| 46 | + }); |
| 47 | + }) |
| 48 | + // A short cut to a single call |
| 49 | + .animate('during', 'animator', '#box', 'play', 'wiggle') |
| 50 | + // Switch the direction of the scene |
| 51 | + .setBackwards( true ) |
| 52 | +; |
| 53 | +``` |
0 commit comments