Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Raphael Plugin bug?

Recommended Posts

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});

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

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

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

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


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

Link to comment
Share on other sites

I suspect that one problem is that your tweens are literally only 1 frame long, so they won't really tween - they'll appear to jump right to their end value. Remember, a tween/timeline's timing mode is always dictated by its parent timeline and you're putting everything into a TimelineLite that you've set useFrames:true for. Maybe you should remove that?


Also, what do you mean by it "jumps/breaks" when you reverse? I don't see any reverse() code here.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Thank you very much for putting together the example. Very helpful. The issue has to do with the way Raphael works with matrices, but I believe I figured out a workaround which is implemented in the latest version of the RaphaelPlugin. Please give it a shot and let me know if that resolves things for you.

Link to comment
Share on other sites

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


Thanks so much!

Link to comment
Share on other sites

Great, thanks for letting us know.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.