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 post
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 4
Link to post
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 post
Share on other sites

Thanks OSUblake.  I've implemented your suggested approach and the animation is now working.  

 

clearProps usage is in relation to an issue I am having after the animation where my css media queries are superseded by inline styling left behind by the animation.  clearProps doesn't seem to be working or maybe I'm applying it incorrectly.  Any advice?

Link to post
Share on other sites

Not sure. Do you think you can make demo showing that?

Link to post
Share on other sites

The pen below shows the issue.  There is now a media query that changes the orientation of the boxes to vertical.  If you start in horizontal orientation (above 1250px) and click a box, the animation will run and then you can click the Back button to reverse.  At that point, if you resize the screen to a width below 1250px, the media query no longer works.

 

Please note that I haven't added an animation for the boxes in vertical orientation.

 

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

Link to post
Share on other sites

It looks like you are missing a clearStyles() function somewhere. It's showing an error in the console.

 

And this may be of some use to you. I just answered a question about doing media queries in JavaScript.

 

 

 

 

 

  • Like 1
Link to post
Share on other sites

The clearStyles function used to contain my clearProps() methods.  They weren't working so I removed them.  I have now removed the clearStyles call.

 

In the full version of this app, I am testing the orientation and size of the screen and then creating a timeline with parameters specific to that size and orientation.  Then, as you suggested, the Back button is reversing that one timeline.  So, unless I am misunderstanding, I think i am already doing a version of what you describe here.  The issue comes after the animation is complete. 

Link to post
Share on other sites

Figured it out.  

 

In the pen below, I added:

 

onReverseComplete() {
            TweenMax.set('.container', {clearProps:"all"});
            TweenMax.set('.box', {clearProps:"all"});
 }

 

It seems I just wasn't applying clearProps correctly.  Thanks for your help OSUblake.

 

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

  • Like 2
Link to post
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.

×