Skip to content

Commit 65ae444

Browse files
committed
Added Examples to README
1 parent b37e154 commit 65ae444

File tree

5 files changed

+64
-4
lines changed

5 files changed

+64
-4
lines changed

README.md

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,3 +7,47 @@
77
- Bower: `bower install anim8js-scrollmagic`
88
- Node: `npm install anim8js-scrollmagic`
99
- Download: [anim8js-scrollmagic](https://github.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+
```

build/anim8js-scrollmagic.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,15 @@ Scene.onProgress = function(callback)
6161
var instance = this;
6262
var invokeCallback = function()
6363
{
64-
callback.call( instance, instance.state(), instance.progress() );
64+
var state = instance.state();
65+
var progress = instance.progress();
66+
67+
if (instance.backwards)
68+
{
69+
progress = 1.0 - progress;
70+
}
71+
72+
callback.call( instance, state, progress );
6573
};
6674

6775
instance.on( 'progress.anim8js', invokeCallback );

build/anim8js-scrollmagic.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)