Jump to content
Search Community

Reset state of elements to before .addPause() is triggered

Mr. Creative 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

I cannot seem to figure this one out.

 

I can only seem to explain this by walking through the user steps of how the functionality works. 

Step1 - User clicks on "alert" button and an overlay on another button gets set to display block.

Step2 - User thinks they are clicking on the button for "alert" and "perimeter" button that activates the animation, however they are actually clicking on the overlay.

Step3 - Animation is triggered - the alert svg animates in via opacity and scale and then is set to repeat -1 and yoyo true

Step4 - User then clicks on the opposite button, "Perimeter" in this case, and the animation stops and disappears.

Step5 - Same as step2

Step6 - Same as step3

This is where it breaks and the yoyo and repeat ease gets super out of whack. It keeps on getting more crazy as you continuously repeat steps 4, 5 and 6.

 

How do I reset my animation after the .addPause() and .add("exit") so that it actually does reset and wait until the animation is triggered again?

 

I have tried KillTweensOf,  .reversed(true).progress(0), and a few others but can't seem to make this happen.

 

 

Thanks for the help!

 

 

I abbreviated my code for ease of understanding

 

FYI - The svg is displaying weird in Firefox but looks fine in chrome. Not sure the issue.

 

See the Pen qyOKwN?editors=1010 by LarsFinley (@LarsFinley) on CodePen

 

See the Pen qyOKwN?editors=1010 by LarsFinley (@LarsFinley) on CodePen

Link to comment
Share on other sites

Ironically, the "/latest/" CDN link you're using, https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js, is really old. CDNJS dropped support for "latest" years ago, so it's way out of date. Please use the most recent version, 2.0.1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js

 

I'm running out the door, so I don't have time to wrap my head around all the steps and what might be happening, but I figured I'd tell you about the version thing and see if you can give that a shot and let us know if you still run into the problem. 

  • Like 2
Link to comment
Share on other sites

Is there any way you could create a more reduced test case without all the steps necessary? I tried clicking on the "This triggers the alert overlay" button and immediately got a JavaScript error: 

 

Quote

Uncaught TypeError: Cannot read property 'play' of undefined

 

Same thing when I click on the perimeter overlay button. Maybe I'm totally misunderstanding the directions.

 

I read your question about 4 times and it's still pretty fuzzy to me what exactly you want to happen or how that corresponds to the 60-ish lines of code.

 

Quote

This is where it breaks and the yoyo and repeat e ase gets super out of whack. I t keeps on getting more crazy as you continuously repeat steps 4, 5 and 6.

 

It looks like you've embedded a function call into your timeline, and that function creates a whole new/different timeline that infinitely repeats. So every time you play that first timeline again, it's triggering that function call which creates another timeline again...and again...(each time) and you're likely getting overwriting or odd starting positions based on the timing of clicks. That's not a problem with GSAP, though - that'd be just a logic issue in the code. For example, if the infinitely repeating animation is halfway through one of its iterations when that function gets called and the [redundant] animation is created, it'd start from the current values at that time (which are halfway through an iteration). See what I mean? 

 

Just looking at the code, I get the strong impression that there are just some logic issues and there's likely a much cleaner way to structure your animation logic but I'm not entirely sure how to advise you because I don't understand all the goals and requirements. Again, a very simplified example of just a part of this would be super helpful, and then you can build up from there. In other words, try baby steps first rather than attempting to wedge every ounce of functionality into the logic in the first place. 

 

  • Like 2
Link to comment
Share on other sites

I also read the question a few times and got a bit lost too.

 

It does seem to be an overwrite issue with those new timelines and targeting the same class. If you could you just take this step by step and create a simpler demo, I'm certain we can point you in the right direction.

 

Happy tweening.

:)

 

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