Text Stagger Scroll Animations in Webflow
Вставка
- Опубліковано 7 лют 2025
- Update: Unpkg went down temporarily on April 12, 2024 which is the website that hosts the split type library. I updated the cloneable to use a jsDelivr link to the library instead.
Follow along as we create repeatable letter and word animations using GSAP that are easy to apply across your entire website.
Get the cloneable for this project (affiliate link)
webflow.grsm.i...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.i...
8:11 is SUCH a crucial part to this whole process. That flickering drives me insane. Thank you Tim!
I love how Tim brings the problem along with the solution, in addition to helping to solve the problem, he gives you this mindset ❤
Grande, João Lucas! To acompanhando teu trampo no insta, não surpreende que você aprende com os melhores
@@themuriloribeiro Opaaa Murilo, muito bom ver você por aqui também, vamos nessa 🔥❤️
If you get a line-height problem, this is because overflow:hidden on .word adds height for some reason. Fix this by adding vertical-align:top; to your .word class in the css. Thanks for the tutorial by the way !
Pin this Tim!
🙏
💋💋💋💋😁
Omg thank you sm i tried so long to fix this. 🙏
Thanks for the help, buddy. Was stuck on this issue for so long 😅
This is amazing Timothy, keep up the good work!
Thanks so much! Will do!
Thanks, this helped me on a personal project. One thing I would recommend is that if you are using images throughout the page is to use the imagesLoaded library to keep the scroll trigger in the correct place
Hey man, can you please share
more details? having the same prob
same here! could you explain? Halfway down the page, the aniations stop showing, unless I refresh the page from there...
Thank you Tim, really valuable content ❤️
Thanks so much, Simon!
Thanks for the tutorial!
For anyone struggling with the leading/line height changing after you apply the attributes, try vertical-align: top!important in the CSS section in the settings of your Webflow page.
I had tried just doing vertical-align: top and it wasn't working until i added !important.
Thanks for the tip! It worked like a charm
This is exactly what I've been searching for! Perfect!!
Jo, 12th April 2024 and it doesnt work anymore. I literally configured it yesterday and it worked, but today not working anymore. Came back here to see if anyone else has this problem
Same here. Got stuck right at the beggining. Nothing splits ._.
Amazing tutorial and clonable!
Thank you for this very useful tutorial Tim! 🙏
Never clicked so fast on a video
Really cool and easy to use, thank you! :)
Love your content, really appreciate ❤️
If you have a problem when a text indent acts like a letter spacing you can solve it by wrapping the first letter in a span and adding left padding you need there
you're a legend!
great tutorial!
Amazing stuff man, really appreciate you going into depth on this! Also nice to have a free alternative to GSAPs SplitText. I'm wondering if theres a reason you didn't include any animations by line?
This is brilliant!
Since I am trying to combine this with your page transitions. I need to add a delay before the animtion starts.
I attempted to add some gsap delay commands, but coundn't get it to work :/
I have a client that wants the same interaction on the H1 text and the paragraph below, but they should animate sequentially. How do I add delay to a class?
Hello Tim, I love your content! It's very helpful since I'm a beginner in Webflow. It helps me to solve my difficulties in learning to design a website. When I don’t know how to do it, I just watch your videos. It encourages me to continue what I’m doing. However, some of the interactions I want to learn doesn’t have tutorials. I'm just wondering If I could request you favor. I hope you could create video content regarding this site named Em Freebie Issue 2 on how to do the loading animation. It's a cloneable site but I want to learn more about how he created it. I tried to learn it by myself but still don't get it. I believe it's great content for those beginners who want to learn web design in Webflow. Thanks bro, appreciate it. ❤
Site: Em Freebie Issue 2
Also, if you plan to create an additional tutorial video for your UA-cam channel, I think this would be helpful.
Site: Geospace Template
it prevents me to send the source link. you can visit it in made with Webflow section you can search it I've tried before. Thank you for your support.
Gods work.
I am having one problem, everything is working fine, except for a section where the animation gets complete before scroll, How can I get that sorted?
Hmm, that usually happens if images above that heading don’t have a height applied
@@timothyricks Thank you so much, you are a life saver. It worked.
@@timothyricks Thanks so much, I struggled with it as well, however, Is there a way to make it work with defininng width, and having height adjust, as I have a full spread Image that I want to keep the ratio of?
what to delete in code that removes scroll trigger? i just want animation when the page loads
Thank you!
hey Tim great tutorial, wondering if there a chance you could fix the clone able link. Would be great!
+1
thank you so much
why so legend?)
awesome Thanks!!
Hi Timothy! Amazing tutorial, as usual!
Using this animation in my project, everything seems good on Chrome but doesn't work on Safari. Has anyone else had this problem?
I have over 20 sites with this code and attributes! And all stopped working today! Timothy, please give us all an answer to solve the problem promptly 🙏
Hi, I'm so sorry to hear that! Unpkg went down today which is the website that hosts the split type library. I just uploaded a copy of the library to jsDelivr instead. updownradar.com/status/unpkg.com
To fix it, we can replace this line of code...
With this instead...
@@timothyricks Thank you very much! It's already been fixed. There were also bugs with Spline not showing up through the built-in functionality. It seems to be a glitch on the Webflow side. But everything is working as before
Hi! This seems to be working only on one text field for me, on the others the letters get all mixed up. What could be the reason for this?
It's not working for me?
Hi Tim! Thanks for your content, i have a cuestion for you, can be this animation loop?
Is there a way to disable this animation on mobile? Thanks for the video, Timothy.
How can it works with a "clip background to text" ? It doesn't work actually. Great tutorial
when i use the code on the live site the text heigth changes. Do anybody know why?
Hi Timothy, I'm trying to clone your Webflow project but it looks like this effect doesn't work anymore. I faced that problem on other pages with similar animation effects as well. Is there any issue with the GSAP library lately?
Hi, I'm so sorry to hear that! Unpkg went down today which is the website that hosts the split type library. I just uploaded a copy of the library to jsDelivr instead. updownradar.com/status/unpkg.com
To fix it, we can replace this line of code...
With this instead...
Hi Tim.
Great tutorial. But I can't seem to get the animation to work in the cloneable for Webflow. I cannot find the custom code for the javascript animation anywhere in in the file (global, embed or custom code) . I must be doing something wrong. Trying to recreate in Dreamweaver but not having much luck there either. The headings just sit there without animation. Also, because I cannot locate the javascript code in the cloneable file, I cannot see what change you made in the code to switch from unpkg to jsDelivr. Can you help/? Would like to learn how to apply these cool animations to my web designs. Is there a source for just copying the javascript code so I can include it in my project's custom code window?
Chris
This looks so cool, but I'm really confused. I cloned the project and when I look at each text element, there are no custom attributes on them. But the animations are working. What am I missing?
Hey Tim please where can I get the code you used for the video
Hey Tim, i have a little problem, i put this code and everything works but sometimes when the text animation shows..it slows down, especially on mobile, it works but slows down a lot..PLEASE ANSWER i must fix that
how do we add some delay if we want?
how do you use codesandbox directly with your webflow preview?
I used these on several websites and am a big fan. Unfortunately they stopped working today :/ any ideas?
same by me. the code stop working. if someone got a solution please tell me
In custom code head section change [text-split] {opacity: 1;}, it fixes that the text its visible but animation doesnt work.
The issue with the animation seems to come from the split type library. I get an "SplitType is not defined" error in the console. Not sure how to address it though.
@@madsness101 Hi, Unpkg went down today which is the website that hosts the split type library. I just uploaded a copy of the library to jsDelivr instead. updownradar.com/status/unpkg.com
To fix this, we can replace this line of code...
With this instead...
@@timothyricks Man you are truly amazing ♥Thanks a lot, I appreciate you!
would be really helpful if we would be able to set the attributes of the elements automatically with javascript based on their class name or tag. So for exemple for each h2 element add those attributes(and therefore the animation)
Love you code explanations. I know a lot of these can be done in Webflow natively but it’d take longer and be harder to replicate.
If you could start all over, what code would you learn to write? I took a C# class way back when and now I’m hoping to up my Webflow game. Sounds like JavaScript is best?
Hello! Thank you for this tutorial! I do have a question tho. Does your text height change after using this animations? Would you maybe happen to know how to fix this?
Hey Tim,
I am trying to wrap my head around split type, gsap text animations, its really cool.
one small issue is when I split the text into char, the letter spacing seems to be breaking, I guess each char span has a width or something. Is there any quick solution for this?
The text I'm targeting is getting "-webkit-text-fill-color: transparent" applied on the live site, making it invisible. Any idea why this is happening? It's only when I apply the attribute for this animation.
Seems the issue is maybe that I had a gradient fill applied to the text.
I clone your webflow project but it not working ?!
nice content! One question, will this work with lenis smooth scroll?
Yes, it should! Lenis doesn’t interfere with GSAP
Hey Timothy,
I was wondering how I could delay the animation if I was using same animation for two text blocks in a div because they seem to play at once.
I’m a weblow beginner loll
hey tim that's an awesome explanation, i just had a few questions. When I download the cloneable webflow project it doesn't seem to play the animation in Toggle Preview, do I need to set anything up to activate it? I have a webflow site where I want the text to animate, in order to do that do I just need to add the Custom Code in the Inside and Before sections? for it to work?
Hi, this interaction uses JavaScript so it won’t run in the preview, only on the published site. There’s data attributes on the text and code in the page settings needed to run this.
@@timothyricks ah brilliant, makes sense and thanks for the speedy reply much appreciated 👏
Hey man, how do you get the source link for the code sandbox? Sorry for such a dumb question...
I want to code in Sandbox like you do, and have the code affect my Webflow website.
Hi @@wearestudiotonic, good question! I show how to connect the two at this timestamp.
ua-cam.com/video/fbsux6zg1d0/v-deo.html
I also have a codesandbox tutorial here that goes into more detail.
www.patreon.com/posts/51678553
@@timothyricks thanks so much man! Thanks for replying quickly and in detail, I really appreciate it.
Hey there, is there a way to split each line instead of word or letters and apply animation for the entire line? currently I've separated each line into an individual div and used default webflow animations. I'm thinking of switching it to gsap and text split.
Hi @timothyricks Split-type doesn't work anymore due to "Cross-Origin Read Blocking (CORB) blocked a cross-origin response". Is there a solution?
Hi, thank you for letting me know! Unpkg went down today which is the website that hosts the split type library. updownradar.com/status/unpkg.com
To fix it, we can replace this line of code...
With this instead...
Anyone having issues with these interactions working sporadically? I've got a site with these added in quite a few places, and I can't find any commonalities on why some items always work, while others often don't. Refreshing the page with the viewport on top of a malfunctioning interaction will cause all text-split interactions on the page to work again. If the page is loaded and items are not working, sometimes (but not always) scrolling up and down past the text will sometimes make the interaction play. There doesn't seem to be any correlation behind scroll speed or scroll distance. (Trying to make sure the interaction has time/space to trigger the reset.)
It sounds like there might be images that don’t have an aspect ratio applied above the text that isn’t working. Images without an aspect ratio cause the page height to change once they load in and offset the scrolltrigger position
@@timothyricks Hmm, ok, I'll play around with that and see if It helps out. Thanks for the quick reply!
Thanks@@timothyricks! I ended up setting the images on the page to eager loading so that if the client swapped them out for others in the future, the aspect ratio wouldn't be locked.
This looks awesome! Is the text responsive, though? Like if the text moves over to the next line, does it screw up the animation?
Thank you! Yes, the text is responsive. That’s really only an issue if we wrap the lines into spans, but we’re only using words and characters in this case.
@@timothyricks Ooh thank you! Btw, is there a reason why you don't use GSAP's toggleActions for onEnter and onLeave events?
Hey Timothy, the animations only work on 1 page. I've tried pasting the code individually in all the pages and also in the head and footer site code, neither seem to work. Is there any solution for this? Thanks in advance
It's possible do use this animation with mouse hover?
I made an similar animation to the "Letters Slide Up" on webflow using 2 text blocks inside a div with interactions but this isn't responsive, so I'm thinking about this animation that you showed in your video if it would work in my case or not
Hey Timothy, nice tutorial. Do you have any specific reason for using opacity on page load to hide content? You could have used autoalpha instead to prevent FOUC, right?
Thank you! Just used opacity for simplicity in this case. Autoalpha would work here also though.
Would this affect the H1's readability for SEO reasons?
I don’t believe so. Each word and letter is wrapped in a span which has no semantic meaning. Spans are meant for use inside headings, and they don’t change the way the heading is read.
@@timothyricks makes sense. I'll test it out by implementing it and I'll use Semflow or some SEO tool to see if it can find my H1.
Hey Tim! This is amazing. Thank you! I’m working with multiple fonts on the same page, and the only thing that bugs me is the universal .word padding and margin. How can I set it up so that different fonts have different padding-bottom and margin-bottom for the animations?
Thanks Bill! If each font has a different class name on the text element, you can override the generic .word padding like this.
.your-custom-heading-class .word {
padding-top: 2em;
padding-bottom: 2em;
}
@@timothyricks Thank you! I tired to put this under the .word style inside tag and it’s still not working 🤧
Actually, it works! was missing a space between .your-custom-heading-class and .word. Thank you!!!
Oh awesome! Sure thing!!
thanks Tim, can the animation happen on load animations?
Sure thing! Yes, it already does if the element is past the trigger point on page load. But you can also remove the paused: true setting and the createScrollTrigger for any animation to make them happen on page load.
Awesome, how hard would it be to implement this to normal html css js.?
Relatively simple! Just copy over the css and JavaScript from the page settings. Then apply the attributes to any html elements you’d like. The code uses jQuery so you’d also need to import that library if it’s not already on your site or tweak the code.
Can you make a video showing how you connect codesandbox with your webflow project please? :D
Hi Tim! Thanks for all your terrific content.
How would you modify the code to honor user preferences for reduced motion if any are set?
Thanks in advance!
-Marc
Where can i get the code in Code Sand Box
Hi, it’s in the page settings in the cloneable
Nice Tutorial Tim, Is there any alternative to GSAPs SplitText for text animation ?
Thank you! The split library used in this tutorial is SplitType, a free alternative to GSAP’s SplitText
Hi Tim, great video. But is there a way of getting the animation to trigger on a slider change? Client wants his testimonials to do this effect each time the sldier changes. Here's hoping!. Thanks
Tim Ricks Please Notice Me Senpai!
"No Code Platform"