Jump to content
Search Community

run timeline animation, reverse, clear...repeat

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

  • 2 months later...

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 comment
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 comment
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 comment
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 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...