celli Posted August 25, 2020 Share Posted August 25, 2020 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 More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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. 1 Link to comment Share on other sites More sharing options...
celli Posted August 25, 2020 Author Share Posted August 25, 2020 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 More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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 comment Share on other sites More sharing options...
celli Posted August 25, 2020 Author Share Posted August 25, 2020 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 Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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) 1 Link to comment Share on other sites More sharing options...
celli Posted August 25, 2020 Author Share Posted August 25, 2020 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 More sharing options...
ZachSaucier Posted August 25, 2020 Share Posted August 25, 2020 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 More sharing options...
celli Posted August 26, 2020 Author Share Posted August 26, 2020 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 More sharing options...
PointC Posted August 26, 2020 Share Posted August 26, 2020 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. 3 Link to comment Share on other sites More sharing options...
celli Posted August 26, 2020 Author Share Posted August 26, 2020 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. 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now