DeltaFrog

Always going above and beyond my wildest expectations. Thanks Craig.

So so awesome, I started to attempt this type of setup so happy to see I was on the right track. Thanks for adding the delay, I was wondering about how to address the jitter issue that occurs when resizing. The delay works for small resizes but I ended up removing it because I did not like how it could break the paragraph if the user resizes quickly which is a trade off for the jitter. Greatly appreciate your help. I can live with this setup but I wonder how https://www.lucidmotors.com/air set theirs up because their resize seems to have the best of both worlds. https://codepen.io/deltafrogcraft/pen/eYVgOmX

Hey Craig I stumbled my way through this and kinda have it working. Is there a better way to re-add the scroll trigger without duplicating the code? https://codepen.io/deltafrogcraft/pen/jOZVEGZ?editors=0010

Ahhh, makes sense. So when I revert the text it doesn't change how scrollTrigger is looking for the initial number of lines in the array created by SplitText...and that's why I have to kill the initial ScrollTrigger after reverting the text. 1) revert split 2) loop through and kill ScrollTriggers 3) re-split and re-add ScrollTrigger. I'll give it a try, thanks Craig.

Oh on second look...maybe the above code is working but I also need to reinitiate the scroll trigger?

I'm a bit confused, I added this listener but not sure how to re-split the text. :S https://codepen.io/deltafrogcraft/pen/jOZVEGZ window.onresize = function() { split.revert(); split.split(); };

Super duper helpful, I'll give it a try.

Thanks Craig, just to explain further - the issue resulted when trying to transfer the code into WordPress, the text block is now h2 and its acting a bit differently in the WP environment. I tried to recreate the same issue in CodePen but could not which is often a hurtle I run into when implementing in WP. This site https://www.lucidmotors.com/air does the same style animation but when the browser is resized the text and animation remains perfect. I'm trying to duplicate this setup.

I'll give the resize listener a try, big thanks!

I noticed when I resize the browser window the Split text divs stack in undesirable ways. Is there a way to fix this? Is this a CSS issue?

Thank you so much Craig. Learning a lot from the GSAP team.

Wow! Amazing Craig. Just amazing.

Hi All, I have a few separate lines of text with css backgrounds being animated by Scroll Trigger using stagger. This setup in my Pen works but Id like to be able to apply the animation to a paragraph instead of stacked single lines. So I want the animation to display on each line but using a single text paragraph. I think SplitText could help me do this but not sure how. Anybody got an idea?

I get it now. Thanks guys. https://codepen.io/deltafrogcraft/pen/GRQgWRe/b7d9a13d7cfe86812338c378ba5fcd68

Ok! I'm going to give it a try. Big thanks to both of yall!