[Raphael Plugin bug?]

I updated the jsfiddle with the latest version and it looks like the bug is fixed.

 

Thanks so much!

[Start animation once all images are loaded]

in your stylesheet add

 

#container {
 visibility: hidden;
}

 

In your script

 

$(window).on('load', function(){
 $('#container').css('visibility', 'visible');
 // code here
});

[Start animation once all images are loaded]

Use the load event instead of `ready` to initialize your code.

 

$(window).on('load', function(){
 // code here
});

[onReverseStart?]

Thanks for the quick reply.

 

I'm using John Polacek's Superscrollarama plugin which calls reverse() internally, so I have to rely on events being triggered by GSAP. I suppose I could also hack Superscrollarama and trigger an event where the reverse() method is invoked.

[onReverseStart?]

Is there a simple way to add an onReverseStart event?

 

Thanks!

[Android Rotation Not Working]

I have a Galaxy Nexus 4.0.2 and the animation works on the stock browser and Chrome for Android.

[Raphael Plugin bug?]

Hi Greensock,

 

This time I've come prepared with a test case: http://jsfiddle.net/ntDdq/25/

 

Steps to reproduce:

 

1 - in Results pane, scroll all the way down the page, you should see a circle animate from 0 scale to 0.5, to 3 and back to 0.

 

2- At the bottom of the page, scroll all the way back up.

 

Expected results: Tween should animate in reverse without error.

 

Actual results: Tween jumps to incorrect x/y positions, possibly a transform is wrongly written.

 

I've dug into the Raphael plugin code and found that commenting out Line 89 ( t._gsTransform = m; ) in _getTransform() prevents the x/y position from jumping in reverse. Unsure where the exact problem originates from.

 

Any ideas?

[Raphael Plugin bug?]

I'm manually tweening the progress using the scroll event. It would animate if your page was long enough that you could scroll the page.

 

What I mean when it jumps: if you were to scroll the page so the animation runs completely and begin scrolling back up the page in reverse, eventually the tween will reach a point where the animated objects behave oddly, jump to incorrect places etc.

 

It may be a bad example, but seems to illustrate the exact same problem I'm having with Superscrollarama.

[Raphael Plugin bug?]

If someone can figure out what's going wrong you'll make me very happy.

 

I've had this issue with and without using Superscrollarama so I'm now thinking my issue is with the Raphael plugin. Basically I'm drawing shapes using Paper.path() and mostly just scaling the paths up and down. When I reverse the animation the animation jumps/breaks.

 

Here's a bare bones example without Superscrollarama:

 

 // adding paper.path()'s excluded

 var tl = new TimelineLite({useFrames: true});
 tl.pause();

 var tl1 = new TimelineLite();
 var t1 = [];

 paper.forEach(function(path){
t1.push(TweenLite.to(path, 1, { raphael: { scaleX: '+=3', scaleY: '+=3'}}));
 });
 tl1.append(t1);

 var tl2 = new TimelineLite();
 var t2 = [];

 paper.forEach(function(path){
t2.push(TweenLite.to(path, 1, { raphael: { scaleX: '-=3', scaleY: '-=3'}}));
 });
 tl2.append(t2);

 tl.append(tl1);
 tl.append(tl2);

 $(window).on('scroll', function(){
var pct = $(this).scrollTop() / ($(document).height() - $(window).height());
tl.progress(pct);
 });

[Frame based animation on scroll]

Thanks for the tip, so far I'm using the window scroll event to calculate the percent like so:

var pct = $(this).scrollTop() / ($(document).height() - $(window).height());

 

Then I apply the percent to the timeline progress method

tl.progress(pct);

 

Is this the best way or is there a more optimized method?

[Frame based animation on scroll]

Rather then a time based animation I'd like to animate so scrolling down the page will animate a sequence forward and scrolling up with animate a sequence in reverse. Different parts of the sequence could be triggered depending on what elements are in view e.g., https://github.com/s...query-scrollspy

 

This url is a good reference as to what I'm trying to achieve:

 

http://slaveryfootprint.org