Share Posted May 10, 2022 I want to have multiple containers which on mouse enter plays the child animation and on mouse leave reverses the child animation. I have a pen attached setup, but it plays the animation on all child elements of the same class. So need just a relative way to reference the child so it plays the animation no matter how many containers I have. I hope that makes sense. My first post, and very new to GSAP, so thanks in advance for everything you guys do in the community. See the Pen BaJvgvM by windpixel (@windpixel) on CodePen Link to comment Share on other sites More sharing options...
Solution Solution Share Posted May 10, 2022 Hello @Lance Woolf - Welcome to the GreenSock forums! You will need to loop through all your '.row's and for each of those create the timeline and add the eventListeners, targetting only those elements within each '.row'. Something like this: See the Pen qBxZQpz by akapowl (@akapowl) on CodePen Edit: Some quick sidenotes/tips: eases don't go directly into the timeline object - they belong either on the individual tweens, or in the defaults of a tl with a duration as short as 0.1 you will not see much of the bounce ease as things will happen just too quickly instead of setting the position parameter to "-=0.1" to have both tweens play at the same time, you could also just use "<" which tells the second tween to start at the same time that the previous tween does. That way you wouldn't have to change the position parameter everytime you changed the durations See the Pen oNExJvb by akapowl (@akapowl) on CodePen Edit 2: Here is an extra bonus tip: You will notice now when reversing the tl on mouseleave, the bounce ease might not look very appealing. So if you wanted the bounce to always happen at the end of every event triggering the animation, you would have to tackle things a bit different, like e.g. tween on the progress of the timeline on mouseenter/mouseleave with the desired bounce ease, and have an ease of none set on the actual tweens themselves. See the Pen eYVZbNo by akapowl (@akapowl) on CodePen 4 Link to comment Share on other sites More sharing options...
Author Share Posted May 11, 2022 Thanks heaps @akapowl , I learnt a great deal from the additional tips you provided and the end result looks slick. Very much appreciated. You rock! 1 Link to comment Share on other sites More sharing options...
Author Share Posted June 13, 2022 @akapowl Using the method you suggested, I have been able to control timelines in different regions on a map. Im sure there will be a performance hit for having an SVG with so many elements, and I could have done a hover effect using vanilla CSS on all children, but being able to control and stagger so many children is just so awesome with GSAP. See the Pen dydwNxb by windpixel (@windpixel) on CodePen Link to comment Share on other sites More sharing options...
Share Posted June 13, 2022 Good job @Lance Woolf - I like that effect! 19 minutes ago, Lance Woolf said: Im sure there will be a performance hit for having an SVG with so many elements, and I could have done a hover effect using vanilla CSS on all children, but being able to control and stagger so many children is just so awesome with GSAP. Yeah, animating SVG can become quite a lot for the browser - and to be honest I can already notice things not being 100% smooth on Firefox, which appears to be especially problematic with SVG from my personal experience (whereas it is buttery smooth in Chrome). So with that many elements it may already be helpful to convert things to canvas - but that would be a looong road to go down if you have no experience with it so far. Since you appear to have only that one tween, what you could still tweak a bit, is to set it up as a single tween instead of a timeline - but I don't think this would give you any performance boost and would be just for a slight reduction of code. See the Pen YzedxeG by akapowl (@akapowl) on CodePen 3 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