Jump to content
GreenSock

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

run timeline animation, reverse, clear...repeat

Recommended Posts

Hi all,

 

I have a page with clickable divs built with GSAP in vue.js.  Clicking a div triggers a timelineMax animation that moves all three divs, changes their opacity, etc.  When clicked, the “BACK” button applies the reverse() method, returning the divs to their original positions and styling.

 

 

After reversing the animation, I am using the clearProps method to remove any remaining inline styling.  As I am new to GSAP, I imagine there is a more elegant way of doing all of this but, it works.

 

 

The issue arises when the user goes through this process again. When the divs are reset and user clicks one of them, the initial animation works but the reverse animation is very wonky.  It seems to jump immediately to the beginning of the timeline, while simultaneously trying to reverse.  It’s difficult to figure out exactly what’s happening because the debugger won’t step through the reversing timeline.

 

Any advice would be appreciated.

 

Thanks.

 

 

 

 

See the Pen QXGqbd by dresscode (@dresscode) on CodePen

Link to comment
Share on other sites

When using a framework like Vue, you should use refs instead of selecting elements.

https://codingexplained.com/coding/front-end/vue-js/accessing-dom-refs

 

Your animation method is rather large. Try splitting it up into logical pieces. Searching for a class name is something you do in jQuery. You can pass arguments into your animation method so you know what button is being pressed.

 

Now the big issue is your back button. You're adding an event listener to it every time an animation plays. When you click it, it's going to reverse every single timeline you've ever created.

 

Consider saving the timeline when you create one. That way you can always refer to the current timeline and not some timeline that was captured on previous plays.

 

this.timeline = new TimelineMax();

 

 

Also, I don't understand why you need to use clearProps. 

 

  • Like 3
Link to comment
Share on other sites

And actually, I don't think you should be adding an event listener at all in your JavaScript. That should be in your template. Have it call a method that will reverse this.timeline.

  • Like 2
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.
×