Jump to content
Search Community

Revert animation from current value

santi test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I have an animation that changes the scroll of a panel from 0 to X value. Later, the user changes the scroll by hand, and then I want to reverse than animation so that scroll goes back to 0. However, the animation seems to start from X and goes to 0 instead from the current value.

 

Is there any way for the revert animation to start at the current value and go back to the original one instead of using the to value?

 

Thanks!

Link to comment
Share on other sites

Hi,

 

Take a look at this link:

 

http://codeaway.info/parallax-and-scrolling-control-of-tweens-with-greensock-ap-js/

 

I believe that you could set the progress of the scroll animation based on that. I've never experimented with both elements but I can't think of a reason that it shouldn't work fine.

 

If it doesn't you could take a more complicated approach and set the progress of one tween based in the other, like this:

 

See the Pen qaEto by rhernando (@rhernando) on CodePen

 

Hope this helps,

Cheers,

Rodrigo.

Link to comment
Share on other sites

Why wouldn't you just tween to 0 like any other tween? In other words, why spend the extra effort to save the old animation and reverse() it instead of doing a new tween? Keep in mind that the behavior you're seeing is actually by design - when you reverse() an animation, it should play exactly like it did when it went forward, only in reverse. If it worked the way you're expecting it to here, I'm pretty sure we'd get a bunch of complaints saying "when I reverse() the animation, it doesn't retrace its original steps - it goes backward from the CURRENT value instead."

 

Sometimes folks (myself included) can tend to overcomplicate things - I think in this case a simple TweenLite.to(element, 1, {scrollTo:0}) is best. That ensures it goes from the current value.

 

(or maybe I misunderstood your question)

Link to comment
Share on other sites

Hi! Thanks for the reply!

 

Why wouldn't you just tween to 0 like any other tween? 

 

Our app is used to build application prototypes, and animations are defined by the user, and he can then hook 'back' transitions which reverse the animations he defined. Almost everything works OK using play/reverse for these kind of things, but in the case of scroll, where he can change it by hand, it doesn't. 

 

So, I can't create a new animation since this plugs in a general mechanism for animations which use reverse for everything else.

Link to comment
Share on other sites

That's probably something you'll need to custom code then since it's not really reversing the previous animation - it's actually using a completely different end value that needs to be updated on-the-fly based on the user's scrolling. Sorry - I wish I had an easy answer for you. 

Link to comment
Share on other sites

No prob! You can never cover every use case ;)

 

We wrap the timeline & tween classes, so I decided to go ahead and shoot my own foot... basically when reverting the timeline, I update the tween instances .c value to the current one for tweens that set a specific var when created, and store the original .c so it can be restored if the timeline is replayed....

 

I'm still looking for what's going to fail, but it seems to work on my tests.

 

Ugly as hell, but is maybe an option nonetheless...

Link to comment
Share on other sites

No prob! You can never cover every use case ;)

 

We wrap the timeline & tween classes, so I decided to go ahead and shoot my own foot... basically when reverting the timeline, I update the tween instances .c value to the current one for tweens that set a specific var when created, and store the original .c so it can be restored if the timeline is replayed....

 

I'm still looking for what's going to fail, but it seems to work on my tests.

 

Ugly as hell, but is maybe an option nonetheless...

 

Why dont ypu try pac-n-zoom.com as through it you can edit already made animations

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.
×
×
  • Create New...