Text Stagger Scroll Animations in Webflow

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.io/word-letter-s...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

[@joaolucaswork]

I love how Tim brings the problem along with the solution, in addition to helping to solve the problem, he gives you this mindset ❤

[@omuriloribeiro]

Grande, João Lucas! To acompanhando teu trampo no insta, não surpreende que você aprende com os melhores

[@joaolucaswork]

@@omuriloribeiro Opaaa Murilo, muito bom ver você por aqui também, vamos nessa 🔥❤️

[@Lukas-xo4zl]

This is exactly what I've been searching for! Perfect!!

[@thebakedone32]

This is amazing Timothy, keep up the good work!

[@timothyricks]

Thanks so much! Will do!

[@ZianiLounes]

Thank you for this very useful tutorial Tim! 🙏

[@gpolonia]

Amazing tutorial and clonable!

[@lukawalli]

Really cool and easy to use, thank you! :)

[@eslamdiaa338]

Love your content, really appreciate ❤️

[@spiderone_]

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 !

[@shaheerrahman87]

Pin this Tim!

[@ne_robkaya]

🙏

[@hehebupbup]

💋💋💋💋😁

[@danielkalina391]

Omg thank you sm i tried so long to fix this. 🙏

[@adc_00]

Thanks for the help, buddy. Was stuck on this issue for so long 😅

[@simonlampert]

Thank you Tim, really valuable content ❤️

[@timothyricks]

Thanks so much, Simon!

[@ronnyt5914]

great tutorial!

[@edelprojects8308]

Thank you!

[@taywoo8216]

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?

[@Daddleo]

thank you so much

[@user-tf3ts6ye6l]

awesome Thanks!!

[@MaximilianArdenius]

you're a legend!

[@alexheeney8216]

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

[@karimsaab3018]

Hey man, can you please share more details? having the same prob

[@luciechartin894]

same here! could you explain? Halfway down the page, the aniations stop showing, unless I refresh the page from there...

[@zoegatti857]

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.

[@olivergunther8474]

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 :/

[@plainwooddigital]

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

[@russellsaw8781]

Gods work.

[@user-nl9ug5jw3d]

why so legend?)

[@austinandriese]

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?

[@BSNsilviu]

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)

[@josetepaz8054]

Hi Tim! Thanks for your content, i have a cuestion for you, can be this animation loop?

[@hehebupbup]

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

[@NachoCombo]

Never clicked so fast on a video

[@domenbrodaric3800]

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?

[@judekolawole7354]

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

[@grahambedbrook1971]

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

[@user-qn2md1mg7u]

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.

[@ericschenkenberger6118]

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?

[@shredv6124]

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. ❤

[@shredv6124]

Site: Em Freebie Issue 2 Also, if you plan to create an additional tutorial video for your KZbin channel, I think this would be helpful. Site: Geospace Template

[@shredv6124]

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.

[@8561]

how do you use codesandbox directly with your webflow preview?

[@misterclutch11]

what to delete in code that removes scroll trigger? i just want animation when the page loads

[@clintonvanarnam710]

Thank you for the tutorial. Any idea why it is deleting my spaces from the text?

[@rafael_cunha]

Is there a way to disable this animation on mobile? Thanks for the video, Timothy.

[@reviewmania1322]

[@sandrarenman1033]

Can you make a video showing how you connect codesandbox with your webflow project please? :D

[@sachinRao15]

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?

[@timothyricks]

Thank you! Just used opacity for simplicity in this case. Autoalpha would work here also though.

[@victorrrsimon]

hey Tim great tutorial, wondering if there a chance you could fix the clone able link. Would be great!

[@ronnyt5914]

+1

[@timquartier1458]

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

[@splendouraustin]

Hey Tim please where can I get the code you used for the video

[@JokerBrand7]

when i use the code on the live site the text heigth changes. Do anybody know why?

[@yikee4500]

nice content! One question, will this work with lenis smooth scroll?

[@timothyricks]

Yes, it should! Lenis doesn’t interfere with GSAP

[@riikkalbum]

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?

[@billchien95]

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?

[@timothyricks]

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; }

[@billchien95]

@@timothyricks Thank you! I tired to put this under the .word style inside tag and it’s still not working 🤧

[@billchien95]

Actually, it works! was missing a space between .your-custom-heading-class and .word. Thank you!!!

[@timothyricks]

Oh awesome! Sure thing!!

[@kvncnls]

This looks awesome! Is the text responsive, though? Like if the text moves over to the next line, does it screw up the animation?

[@timothyricks]

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.

[@kvncnls]

@@timothyricks Ooh thank you! Btw, is there a reason why you don't use GSAP's toggleActions for onEnter and onLeave events?

[@themadute847]

thanks Tim, can the animation happen on load animations?

[@timothyricks]

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.

[@adityabhakat7489]

how do we add some delay if we want?

[@eugenetetris]

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?

[@timothyricks]

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.

[@eugenetetris]

@@timothyricks ah brilliant, makes sense and thanks for the speedy reply much appreciated 👏

[@skyn3t995]

How can it works with a "clip background to text" ? It doesn't work actually. Great tutorial

[@ash1015]

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

[@christinefranklin2301]

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

[@krims254]

Awesome, how hard would it be to implement this to normal html css js.?

[@timothyricks]

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.

[@ostap.design]

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 🙏

[@timothyricks]

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...

[@ostap.design]

​@@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

[@wearestudiotonic]

Hey man, how do you get the source link for the code sandbox? Sorry for such a dumb question...

[@wearestudiotonic]

I want to code in Sandbox like you do, and have the code affect my Webflow website.

[@timothyricks]

Hi @@wearestudiotonic, good question! I show how to connect the two at this timestamp. kzbin.info/www/bejne/nJPWpqtsr8xkmpI I also have a codesandbox tutorial here that goes into more detail. www.patreon.com/posts/51678553

[@wearestudiotonic]

@@timothyricks thanks so much man! Thanks for replying quickly and in detail, I really appreciate it.

[@adarshgoldar]

Nice Tutorial Tim, Is there any alternative to GSAPs SplitText for text animation ?

[@timothyricks]

Thank you! The split library used in this tutorial is SplitType, a free alternative to GSAP’s SplitText

[@mhmadtohme9856]

I clone your webflow project but it not working ?!

[@theusmabit]

It's possible do use this animation with mouse hover?

[@theusmabit]

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

[@wmcreed]

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.

[@wmcreed]

Seems the issue is maybe that I had a gradient fill applied to the text.

[@ErikandOtherNiceStuff]

Hi @timothyricks Split-type doesn't work anymore due to "Cross-Origin Read Blocking (CORB) blocked a cross-origin response". Is there a solution?

[@timothyricks]

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...

[@arrystr765]

Where can i get the code in Code Sand Box

[@timothyricks]

Hi, it’s in the page settings in the cloneable

[@DerekSiu-gm9rl]

Tim Ricks Please Notice Me Senpai!

[@mightbedk]

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

[@KatieM-ix1jw]

It's not working for me?

[@cloutcobain123]

Would this affect the H1's readability for SEO reasons?

[@timothyricks]

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.

[@cloutcobain123]

​@@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.

[@imaginerd92]

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?

[@timothyricks]

Hmm, that usually happens if images above that heading don’t have a height applied

[@imaginerd92]

@@timothyricks Thank you so much, you are a life saver. It worked.

[@swx6074]

@@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?

[@martynabogdanska1182]

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?

[@timothyricks]

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...

[@ericschenkenberger6118]

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.)

[@timothyricks]

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

[@ericschenkenberger6118]

@@timothyricks Hmm, ok, I'll play around with that and see if It helps out. Thanks for the quick reply!

[@ericschenkenberger6118]

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.

[@madsness101]

I used these on several websites and am a big fan. Unfortunately they stopped working today :/ any ideas?

[@jasperdeleeuw1172]

same by me. the code stop working. if someone got a solution please tell me

[@aljazgorsek2627]

In custom code head section change [text-split] {opacity: 1;}, it fixes that the text its visible but animation doesnt work.

[@madsness101]

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.

[@timothyricks]

@@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...

[@madsness101]

@@timothyricks Man you are truly amazing ♥Thanks a lot, I appreciate you!

[@alex2dots]

"No Code Platform"