Issue with className on timeline pause(0)

[gmullinix]

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

[Carl]

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.