Jump to content
Search Community

referencing specific elements with gsap timeline

celli test
Moderator Tag

Recommended Posts

Hi, I have mouseover and mouseleave events that work to control specific instances of elements that are inside of the container. I can easily create multiple GSAP instances within each mouseover and mouseleave function to control my elements, but I want to create a paused timeline outside of my mouse functions, and control the play() and reverse() of the timeline instead. The issue I am experiencing is that my timeline would be referencing every instance of a classname if I do it this way, while I really only want to reference the specific class that is inside of the element that I am mousing-over. How can I reference the mouseover event's element specifically, and also create the GSAP timeline outside of my mouse events? There has got to be something simple that I am missing.

See the Pen abNJyaB by celli (@celli) on CodePen

Link to comment
Share on other sites

7 minutes ago, celli said:

I can easily create multiple GSAP instances within each mouseover and mouseleave function to control my elements, but I want to create a paused timeline outside of my mouse functions, and control the play() and reverse() of the timeline instead.

So glad to hear it :) 

 

8 minutes ago, celli said:

How can I reference the mouseover event's element specifically, and also create the GSAP timeline outside of my mouse events? There has got to be something simple that I am missing.

Indeed there is. Use a loop. I cover how to do this sort of thing in my article on animating efficiently

 

This is a case where jQuery's convenience actually makes it harder to conceptually understand what needs to be done. 

  • Like 1
Link to comment
Share on other sites

wow Zach, this is amazing. I have made the revisions on my original codePen and got it to work pretty easily! That's really great.

 

One additional question, how would I handle something like this in that loop—where I want to effect all elements, except the one I am moused-over.

 

let notElement = $('.container').not(this);

 

 

 

Link to comment
Share on other sites

Thanks Zach, I tried both ways. If I hover over only one and then hover directly out of that one it seems to work. If I hover more quickly, and hover from element-to-element, the elements flicker and seem to not reverse the timeline properly inconsistently.

 

My older code below, which is commented-out, it is working smoothly. If you switch the comment blocks, you can see it working smoothly when I am not using the single GSAP timeline. But, I want to do it the right way with—one GSAP timeline, but I am doing something wrong in order to effectively do this. Do you see what I'm doing wrong in the uncommented out version in my codePen?

 

Link to comment
Share on other sites

Please remember to fork pens when creating new versions so the context is not lost for future forum readers :) 

 

The issue is that you have conflicting tweens - you can't both fade in (when the timeline reverses) and fade out (when the timeline plays forwards) at the same time. If you need to do that then it'd be best to create a new tween each time (for that part).

Link to comment
Share on other sites

Thanks Zach. I didn't realize that about the forked pens. I will do that moving forward.

 

I did wind up creating two tweens so they wouldn't conflict.

 

I also added a zero to my play reference like this, so that they would re-play each time from the 0 timeline position on mouseover. I think this is the best way to handle that. If there is a better way, just let me know.

tl1.play(0)

 

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