Using jQuery 'this' with a TweenMax timeline

[sharkey1983]

Hi,

 

I'm fairly new to GSAP, but I'm really enjoying experimenting with it. 

 

A hurdle I have come up against is how to hover over a specific div, and have an animation play based on which div is hovered over. I do not want to have to write the animation for each div.

 

I know the way to do this is to use the jQuery selector 'this', but I can't get it to work for a timeline. I can get it to work using TweenMax.to('') etc, but I want to be able to use play() and reverse(), and so need it to work with a timeline. 

 

Rather than me babbling on, it's probably best to just check the codepen.

 

Thanks for reading, and I hope you can help!

 

 

See the Pen 3f589f942c38618190266cef799e22a2 by sharkey32 (@sharkey32) on CodePen

[Shaun Gorneau]

Have a look here

See the Pen 5216327932f73a9795051e9da44bc0dd?editors=001 by sgorneau (@sgorneau) on CodePen

[sharkey1983]

Hi Shaun,

 

That's great, thanks very much for that. 

 

I noticed though, on your pen, that if you repeatedly move your mouse over a div, the text has a tendency to get stuck in a semi opaque state. Does the same happen for you? Any ideas on how this could be avoided? 

 

Thanks again!

 

David. 

[PointC]

Hi sharkey1983  ,

 

Yep - you can get stuck like that. You'll want to put each hover effect into its own timeline to prevent that problem.

 

Like this: 

See the Pen EPWNQq by PointC (@PointC) on CodePen

 

[sharkey1983]

Thanks PointC!

 

My Javascript is still a bit basic, so I'll have to study that to see what's happening. But it works! Thanks very much.

 

- David. 

[Carl]

Just want to help clarify why Shaun's example seemed to get stuck if you moved fast.

 

Whenever a tween is rendered for the first time it records the start and end values. 

The code was set up to create new tweens on each mouseenter.

 

So if you are reversing an animation back to opacity:0 and the current opacity is something like 0.3 and you mouseenter again a new tween will be created with a starting value of 0.3 that animates to an ending value of 1. When you mouseleave again that tween will reverse back to 0.3 and appear "stuck". 

 

With pointC's solution each element has its own timeline that is created once so there is no chance of new animations getting created and recording funky values.

 

Love seeing all the participation. Great work all!