Jump to content
Search Community

Using jQuery 'this' with a TweenMax timeline

sharkey1983 test
Moderator Tag

Go to solution Solved by PointC,

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'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 comment
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!



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