Jump to content
Search Community

Slow response on reverse animation

Daniel Hult 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 @Daniel Hult

 

I think this issue is that you've defined your tween inside your play/reverse function. You'll want to define that outside, and just use the click listener to play or reverse the Tween.

 

Here's a fork of what that looks like (I also used TweenLite instead of a timeline to further simplify, but both ways will work).

See the Pen oNvwqYo?editors=1010 by ryan_labar (@ryan_labar) on CodePen

 

Note: You'll also want to set reversed to True, so that it play in the forward direction on first click.

  • Like 4
Link to comment
Share on other sites

Hey Daniel,

 

I'm not familiar with Vue, but if there is any "on create/setup" type of method for that component (or really anything that is guaranteed to run before those methods) you'd want to include the .to() code in there. I think most people might use the mounted() method? As with most things with code I think there are multiple ways you could do it.

  • Like 3
Link to comment
Share on other sites

Just to add my two cents here, the original pen setup is making the timeline longer on each click. That's why the reverse seemed slow to respond. @elegantseagulls offered solid advice about that solution. I'd also like to point out that you need to set the timeline vars reversed:true to get that listener to work correctly. Otherwise the first click reverses the timeline and nothing seems to happen. All that being said, I also don't know much about Vue, but maybe this similar thread will help.

Happy tweening.

  • Like 4
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...