Jump to content
GreenSock

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

referencing specific elements with gsap timeline

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 post
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 post
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 post
Share on other sites
29 minutes ago, celli said:

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);

What's wrong with this approach? A minimal demo would help.

Link to post
Share on other sites

I think it will not work, because I want to put that into utils.toArray. I tried two ways to reference the elements in my codePen 

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

Link to post
Share on other sites

If you're going to use jQuery then you should take the time to understand how to use it ;) 

notElement = $('.container').not($(container))

Without jQuery:

const containers = gsap.utils.toArray(".container");
// ...
notElement = containers.filter(elem => elem !== container)

 

  • Like 1
Link to post
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 post
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 post
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 post
Share on other sites

Hey @celli

 

If you want to use two timelines like that, you wouldn't need two each loops as they are almost identical. You can create both timelines and add the listeners in the same loop.

 

See the Pen 5b7dcdc4aea6155c54dac3d64f0de5fb by PointC (@PointC) on CodePen

 

Just my two cents. :)

 

  • Like 3
Link to post
Share on other sites

That's great PointC, I appreciate that! I also like how you made a variable for the timeline defaults, I never thought of doing that. Thanks for the tips.

  • Like 1
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.

×