Onmouse Enter / Leave to play animation of child only

[Lance Woolf 1 Likes (Newbie)]

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

[akapowl 5,495 Likes (Superhero)]

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

 

 

[Lance Woolf 1 Likes (Newbie)]

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!

[Lance Woolf 1 Likes (Newbie)]

@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

[akapowl 5,495 Likes (Superhero)]

 

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