[Line Reveal on Scroll for Multiple Elements]

Hi All,

I have the split text animation working ok, scroll trigger is ok. I just need to set my code up to so I can have multiple paragraph tags <p> per page or section. The idea is that I can drop another paragraph element in, slap a class on it and it will reveal when itself is in the viewport.

Currently, I seem to be triggering the lot of elements, rather than a single p element on scroll.

 

Please see code pen attached, Hopefully it is straight forward. Thanks in Advance.

 

See the Pen poZoQZK by windpixel (@windpixel) on CodePen

[Onmouse Enter / Leave to play animation of child only]

@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

[Onmouse Enter / Leave to play animation of child only]

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!

[Onmouse Enter / Leave to play animation of child only]

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