Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
sharkey1983

Using jQuery 'this' with a TweenMax timeline

Recommended Posts

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

Link to post
Share on other sites

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. 

Link to post
Share on other sites

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

 

:)

  • Like 4
Link to post
Share on other sites

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. 

  • Like 2
Link to post
Share on other sites

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!

Link to post
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.

×