Lance Woolf

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.

@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. https://codepen.io/windpixel/pen/dydwNxb

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!

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.