Jump to content
Search Community

Issue with className on timeline pause(0)

gmullinix 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

Greetings,

 

I've encountered a strange issue where tweening a class name in a timeline causes issues when you reset that timeline via pause(0).  The codepen has more info, please check it out: 

 

Please let me know if my syntax is incorrect, or perhaps if changing classes using both Greensock and jQuery might be causing the problem.  Thank you!

 

-Gwen

See the Pen NGRgKB by anon (@anon) on CodePen

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Thanks for the demo, I haven't been able to decipher everything in the code, but I can explain why the hover class remains. Here are some basic rules of the engine:

 

  • Every tween has a start and ending state
  • When a tween renders for the first time, values for the start and end state are recorded internally. This is a performance optimization that allows for easy restarts and reverses (among other things). By recording the values, we don't have to repeatedly query the DOM to see what they are. 

What is happening in your code:

  • you create a paused timeline (it won't render or record values until the first time it plays)
  • the first tween in the timeline removes the hover class from #click_box via "-=hover"
  • at the time the timeline is created, click_box does not have a hover class (that's ok)
  • as soon as you hover over the clickbox, your over function applies the .hover class
  • simultaneously your timeline starts playing
  • the first tween starts removing the hover class that you just added on mouseover

In order to remove the .hover class during a tween, the tween must start with the .hover class applied.

 

In other words you are going from .hover to no .hover. So when you tell your timeline to pause(0) the beginning of the first tween is at a state where hover is applied. If you want to jump to a point in time where hover is NOT applied, you would need to jump to the end of the tween that removes hover.

 

In your case it is pause(0.15)

see line 46 here: http://codepen.io/GreenSock/pen/yYaEvq?editors=001

 

When you hit reset, you won't have the hover class applied (check DOM inspector) because you are jumping to the point where it is removed. 

 

Hopefully this makes some sense and helps. 

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