Create Modern Text Scroll Animations 🖱️

-- Today, I'm going to show you a great way to make your websites more interesting with motion -- and that is how to implement various scroll-based text animations. We'll use Lenis for smooth scroll, and greensock to handle the rest.

Lenis:

Greensock:

Codepen:

0:00 - Intro
0:24 - HTML & CSS Overview
2:55 - JavaScript Imports
3:39 - Lenis
4:04 - GreenSock
13:00 - Customizing with Data Attributes
16:17 - fromTo Method

Let's get started!

#javascript #frontend

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Interested in more of these types of interactive tuts?! Let me know.

[DavidSosaJunquera]

Great tutorial! For those wondering how to handle word breaks effectively, consider using 'words' instead of 'chars'. This way, you can ensure better control over line breaks, avoiding random cuts in the middle of words.

[Gandarufu]

Awesome tutorial, man. Just what I've been searching for without success for a few hours. You made my day <3

[artisist]

holy cow, I was actually asking on the last video about those text effects! You're legend! Thanks

[JasonYochim-xd]

Not sure if this will help anyone else but I was having an error when following this code tut, the error was resolved by modifying where he has "SplitTypes" in the cost text = area to "SplitText" then it will work just like his flawlessly. Thank you so much for these tutorials!! You have no idea how valued you are.

[kevinwamuge]

This channel has relly helped me in my design journey thanks.

[SuryaNarayanan-zv]

Fewture is here! #lenis #greensock are kickass

[Zach-yruh]

This sensei is awesome, I like the way he teach... ❤❤

[kliMaLd]

These videos about animations are awesome!

[romanperera]

This looks really nice. Can gsap be used to do background video frame animation on scroll? Like apple? When you scroll the video (or sequence) frames will play? Would be wonderful if you can do an explainer video on how to do that 😃

[aps]

Can you make a video about the hover animation in Minh Pham's site which showed different stuff when under the mouse tracker

[woody]

really awesome tutorial!!
It seems that when using splittype, text isn't wrapping per word but rather is wrapping at a char in the word. Any work around on this?

[ngc]

Best stuff so far. Thanks a ton @DesignCourse

[frogman]

why do you not use GSAP's built in word/text plugin and opt for another library instead?

[highroller]

Great stuff! I'm using this in a Next project and it's working great, though for some reason when the scrolling stops the text flickers. Appreciate the content!

[AkbarBadhsha-jg]

Great tutorial. I have tried in the webflow. I am facing a problem that, line breaks (example -opportunity) this “opp” and the balance “ortunity” showing next line. How can solve this issue

[sajzadhosenmunna]

cant use the code in elementor not working in elementor can you say how can i do it plz

[kelindrawn]

What do you think about Motion One? Have you tried it? Did you miss a feature when compared to GSAP?

[JaiVignesh-nx]

Is there any tutorial to do that text filling animation scrolling in figma. All I get is after delay...

[elevateyoursoul]

how can i use it on elementor? thank you