Creating Text Reveal Animation on Scroll with GSAP & SplitType - Day 78/100 Days of Webflow

Welcome to Day 78 of my 100 Days of Webflow journey.
Today, I'm getting back to basics and creating this trendy and highly demanded animation-Text Reveal on Scroll! 🚀
I'll be using GSAP and the SplitType library to create this eye-catching effect. This animation can add a layer of interactivity and engagement to your website, making it stand out from the crowd. Whether you're a beginner or a seasoned Webflow user, this tutorial is designed to offer something for everyone.
🔗 Cloneable Project:
webflow.com/made-in-webflow/w...
📚 Resources:
GSAP: gsap.com/docs/
Split Type: www.npmjs.com/package/split-type
Custom Code Notion: levelflow.notion.site/GSAP-Te...
👉 Don't forget to like, share, and subscribe for more Webflow tips and tricks. Let's keep the Webflow love going! 💙

[@VasanthClutcher]

GREAT video yar clean on point

[@hussmohamad]

Thanks @yar, I really appreciate this. Keep up the great work! Just an FYI, the class name is set to 'split-lines' in the cloneable. It should be set to 'split-word' to match the CSS in the header.

[@yaroshidi]

Must have missed that! Thank you for pointing it out!
Happy you liked the video!

[@kevinlorca7069]

Thanks @yaroshidi great animation! One question, is there a way to use the class 'split-word' as a combo class that way it can be used in different sections?

[@yaroshidi]

Thanks to the new webflow class attributes feature. you can add split-words as a combo class in the attributes section and it would work the same

[@lydiasun1344]

Thanks Yar, such a nice tutorial! However, how do I adjust the line breaks for different breakpoints? The sentences aren’t wrapping properly to the next line across various screen sizes.

[@yaroshidi]

You could use a CSS media query to adjust the wrapping on different screen sizes for best performance.

[@pavl3222]

Is there a way to use the class 'split-word' as combo class that way it can be used in different sections?

[@yaroshidi]

You can do that with custom attributes thanks to the new update

[@MdSagor-uf1nn]

hey there, but my backgound color is white.

[@hannekeverhoeven9171]

Hi Yar. Do you have any idea how to implement this in elementor. I only found tutorials where the whole text is revealed at once. Not per character. Your video does show this. But when I use the same JS code and style it does not do anything. Thank you in advance.

[@sebfri35]

I'm also looking for a solution for elementor, have you found one?

[@josephbibi2416]

Same problem here, I've been at it for a while. If anyone can help us out, that would be much appreciated.

[@bittolea2416]

Hey, sorry I am not first english speaker so you maybe already told it in the video, but, Do I need the GSAP plugging ? And how do I select the text I want to apply the effect ?

[@yaroshidi]

You will have to select the element using the class name or ID name. That name is what you apply in the GsAP code

[@dozietek]

the notion link isnt working

[@yaroshidi]

How come?
Here is the link
levelflow.notion.site/GSAP-Text-On-Scroll-Reveal-0873728884cf4be9928bc84678f0ad9b

[@akpoyibooghenemarojones2370]

Thanks @yaroshidi, I did everthing right but on the live site, all the text are squished into one line.

[@MAJHARULISLAM-sj3jx]

where is the notion link?

[@yaroshidi]

Just added to the description

[@WanderingTechie]

This animation didn’t turn out well for me.
I couldn’t edit the height of the texts as they were all stacked together

[@yaroshidi]

Splitype usually breaks the normal format of the text. Perhaps adding the height with the !important tag on your CSS will overwrite the splittype styling

[@tonymathew9887]

Is splitype is paid

[@yaroshidi]

Up until now it is free