DeltaFrog Posted May 13, 2022 Share Posted May 13, 2022 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? See the Pen GRQjXPE by deltafrogcraft (@deltafrogcraft) on CodePen Link to comment Share on other sites More sharing options...
Solution PointC Posted May 13, 2022 Solution Share Posted May 13, 2022 Split your text into lines, loop through those targets and create a ScrollTrigger for each one. Boom - you're good to go. Happy tweening. See the Pen 3e64dc369cd5e8a71235b7d123180339 by PointC (@PointC) on CodePen 4 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 13, 2022 Author Share Posted May 13, 2022 Wow! Amazing Craig. Just amazing. 1 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 13, 2022 Author Share Posted May 13, 2022 Thank you so much Craig. Learning a lot from the GSAP team. 1 Link to comment Share on other sites More sharing options...
PointC Posted May 13, 2022 Share Posted May 13, 2022 1 hour ago, DeltaFrog said: Wow! Amazing Craig. Just amazing. Happy to help. Thanks for your Club membership. We appreciate the support. 1 hour ago, DeltaFrog said: Learning a lot from the GSAP team. Yep - it's a phenomenal community. I wouldn't know much of anything about JavaScript and GSAP had I not started hanging out here. I found the best way to learn was to try and help other users and answer questions. You'd be surprised how much you pick up just by trying to figure out someone's code problem. Have fun and happy tweening. 4 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 13, 2022 Author Share Posted May 13, 2022 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? Link to comment Share on other sites More sharing options...
PointC Posted May 13, 2022 Share Posted May 13, 2022 Resizing can be a bit tricky with lines and a fixed font size. I used 10vw for a font size in my fork of your demo and it seems to work just fine. Another option is to use a resize listener to revert the text and re-split when the user has finished resizing. Happy tweening. 1 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 13, 2022 Author Share Posted May 13, 2022 I'll give the resize listener a try, big thanks! Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 13, 2022 Author Share Posted May 13, 2022 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. Link to comment Share on other sites More sharing options...
PointC Posted May 13, 2022 Share Posted May 13, 2022 Yeah - looks like they just have a resize listener and re-split. You can see on wide screens there are 4 divs for the lines and that jumps to seven as you shrink the viewport. They also drop the font size a bit for mobile. Best of luck. 2 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 14, 2022 Author Share Posted May 14, 2022 Super duper helpful, I'll give it a try. Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 14, 2022 Author Share Posted May 14, 2022 I'm a bit confused, I added this listener but not sure how to re-split the text. :S See the Pen jOZVEGZ by deltafrogcraft (@deltafrogcraft) on CodePen window.onresize = function() { split.revert(); split.split(); }; Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 14, 2022 Author Share Posted May 14, 2022 Oh on second look...maybe the above code is working but I also need to reinitiate the scroll trigger? Link to comment Share on other sites More sharing options...
PointC Posted May 14, 2022 Share Posted May 14, 2022 Yep - in this case it's not a simple matter of refreshing ScrollTrigger because the number of targets is changing. On wide screens you'll only have a few lines and triggers, but on small screens you may have 10 or more. So you'd want to loop through and kill the ScrollTriggers when you revert the text. Then re-split and re-add your ScrollTriggers. Make sense? 1 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 14, 2022 Author Share Posted May 14, 2022 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. Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 15, 2022 Author Share Posted May 15, 2022 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? See the Pen jOZVEGZ?editors=0010 by deltafrogcraft (@deltafrogcraft) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted May 15, 2022 Share Posted May 15, 2022 You're pretty close. The thing to ask yourself when you repeat code is - can I use a loop and/or a reusable function to make this happen? So, in your case, the initial creation of the ScrollTriggers can be moved into a function which you call on page load and again when you revert and re-split the text. Here's a fork of your demo. I've also added a throttle so it's not constantly firing during a resize event. Adjust that to your liking or remove it completely if you prefer. See the Pen NWybQow by PointC (@PointC) on CodePen It's also not necessary to call revert() on the text when you'll be calling split() again. Not that it hurts anything, but split() just automatically calls revert first if necessary. Hopefully that helps. Happy tweening. 3 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 15, 2022 Author Share Posted May 15, 2022 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. See the Pen eYVgOmX by deltafrogcraft (@deltafrogcraft) on CodePen Link to comment Share on other sites More sharing options...
PointC Posted May 15, 2022 Share Posted May 15, 2022 My personal design philosophy is not to worry how animations look during resize. I'm also of the mind that outside of the design and development world, not many users actually resize their window while browsing. That's just my two cents. YMMV. That being said, I think the Lucid Motors site is not using a scrub value. They have it set to true, but there doesn't appear to be a 'catch-up' to me. Drag up and down with the scrollbar and you'll see what I mean. When you navigate their site with your mouse wheel, you'll see they have some kind of smooth scrolling happening (doesn't appear to be ScrollSmoother though) which is why the text seems to have a scrub value. The glitch you see when resizing your demo is that scrub trying to catch-up on each line as we're firing the resize a lot. If we set scrub to true (no number - just Boolean) and use the awesome ScrollSmoother plugin, you'll see that we can achieve the same effect. See the Pen MWQJWqJ by PointC (@PointC) on CodePen I also noticed they are using a mask over each line (same color as background and opacity set to 0.65) and animating its scale rather than animating the background position of clipped text. I made that change to the fork above as well. Hopefully that helps. Happy tweening. 3 Link to comment Share on other sites More sharing options...
DeltaFrog Posted May 15, 2022 Author Share Posted May 15, 2022 Always going above and beyond my wildest expectations. Thanks Craig. 1 Link to comment Share on other sites More sharing options...
DexteRs Code Posted June 4, 2023 Share Posted June 4, 2023 for the exact same codepen above what if i want any particular words to be red and with the same animation continuity, is there any way to do that? Link to comment Share on other sites More sharing options...
Cassie Posted June 4, 2023 Share Posted June 4, 2023 Yep, you can tweak the CSS - See the Pen vYQBXmz?editors=0110 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
Abhishek Animates Posted July 26, 2023 Share Posted July 26, 2023 Is there any way to achieve this effect without using splitText plugin? Link to comment Share on other sites More sharing options...
Rodrigo Posted July 26, 2023 Share Posted July 26, 2023 Hi @Abhishek Animates, This example should provide a good starting point: See the Pen mdKWBmm by GreenSock (@GreenSock) on CodePen Hopefully this helps. Happy Tweening! 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