Jump to content
GreenSock

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

Slow response on reverse animation

Recommended Posts

Hi!

Why is the animation so slow to reverse in this example? I want it to start instantly like it does in forward motion :D 

See the Pen zYOzRNg by daniel-hult (@daniel-hult) on CodePen

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Don't know if you know Vue, but I have this animation in Vue/Nuxt which makes it a little harder to implement what you did. I currently have this in my methods:


Do you know how I can implement that in Vue?

 

Screenshot 2019-08-29 at 14.58.19.png

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
11 minutes ago, PointC said:

I'd also like to point out that you need to set the timeline vars reversed:true to get that listener to work correctly

Was just adding that to my answer/pen!

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×