🔴 LIVE - Recreating Text Line Animation on Scroll

[@LeoRivero]

awesome content Timothy! I was looking for something like this to add to my graphic design project! you rock! every time I have a question about WebFlow I mostly find the answer in your channel keep up the good content!

[@tjk_9000]

im finding so much valuable stuff in your older vids...my splittype lines were so broken after resize and you provide the exact fix I needed...GOAT

[@UchihaEon7]

Lol was literally trying to replicate this for a project this week, what are the odds. Thanks for this 👍

[@thelostman5625]

I was awed by this website and wanted to learn how he created this effect and here is a KZbin video of just the thing

[@AGDSGN]

Thank you. The resize and revert helped a lot👏👏

[@themevictory9642]

Great tutorial. Thanks

[@mateostabio]

I am very happy to have stumbled upon your channel. Keep up the GSAP animation videos!

[@ashleythedesigner]

You're such a gem Tim❤🇿🇦

[@maxshishkn]

awesome sauce 🛸🔥♥️

[@dsgnchloe]

Hey Timothy, Thank you so much!! It was so helpful:)

[@footykingdom2342]

Thanks mate, helped alot:)

[@literallyshane4306]

Amazing! Thank you Timothy 👍

[@dmytrokaraulov5623]

Very nice. Seems like we started exploring gsap simultaneously :)

[@AbrahamAguilera]

Holy crap Timothy this is gold 👏

[@vagifmammadov6555]

Really awesome stuff!

[@j_pbp]

thank you bro, really amazing🔥

[@adrimukund]

Is there a link to the notion file? 👀

[@ibraheemolasupo7881]

This man is too good 🙌🏽🙌🏽

[@shauntan2061]

Thank you

[@andrewbrown4493]

Can we get a link to your Notion page?

[@BlueRose917]

hmm.. This didn't work for me. I added the code and "split-lines" tag. Am I missing anything?

[@akpoyibooghenemarojones2370]

I am sure I got everything setup correctly. The text are squished to a single line of text on the live site. Any solution to resolve this?

[@CarlKho]

Such value!

[@MichelleWong-x3h]

This is a wonderful tutorial! Thank you so much for taking the time. 🙏 I have a question and I wonder if it would be possible to apply this to a different section with different background colour on the same page? How would you go about doing this?

[@Kljopa]

You are the man! I'd buy a course from you , thank you for sharing!

[@jennycadam]

Hi Timothy, the Text Line Animation on Scroll worked perfectly, but stopped a few days ago (on all of the pages I used it). Have there been any changes? Thank you!!

[@timothyricks]

Hi, I'm so sorry to hear that! Unpkg went down recently 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...

[@fatinshazwina3518]

Hi timothy... I have a question... "Framer sites" is on the way. People and Framers authority are also saying it's gonna replace webflow and Figma... What's your thought about it...? What can we do in webflow that we can not do in framer? Will it be a good idea if I invest time on webflow?

[@JokerBrand7]

How can i do the same when my background is a gradient and not a solid color? I did everything like in the video but you can see the line-mask div.

[@spacemike800]

use screen as blending mode for the text or wrapper(where text lives) ?

[@graphicdesign3054]

Awesome Timothy , May i request about the first section of Monopo Website , To make the animated 3D Abstract Background , did you can make the tutorial for that ? , Thank you

[@ayushidlal1467]

is there a way to do this by characters? instead of lines?

[@kevinlamberts9908]

Is it also possible to implement this same technique inside Wordpress? If so is there any example or tutorial of the same trick in WP?

[@spacemike800]

niiiice tut ) but gives me some small errors if i scroll fast(also back and fourth) on mobile some parts of text remain visible while have to be hidden by line-mask any idea how to fix it? btw if i use lenis on mobile it fixes this error

[@samueljaramillo7144]

this is amazing :) im seriously so thankful for all your content! wondering if there is a way to change the .line-mask color in a way that responds to a dark mode interaction?

[@leewilson1978]

I have a similar query, I am fading the background from one colour to the next and the mask shows part way through the scroll. Is there a way to mask without using a solid colour?

[@iphonebuyback]

amazing! is there a way to get the cloneable to use on editor x? webflow seems great, but i am already knee deep into editor x.

[@OlaOlowo]

Brillliant. Absolutely brilliant. 🤌🏽

[@ioalessandro]

Hey Timothy, thank you for the awesome tutorial. I have one question: I am trying to isolate and split parts of sentences within a paragraph. I am essentially trying to animate/highlight certain phrases within the paragraph as if I would mark them with a highlighter. Using the tutorial and the Split Type library on spans of the desired text takes them out of context and sorts them underneath the paragraph and forces a line break. How would you go about achieving this?

[@luckielucky]

Awesome content! I tried add this text line animation and locomotive scroll, but only second one works. While I'm excluding locomotive - Text Line Animation works. Any solution for this?

[@sourabh2505]

can we do this in coded website with js?

[@gaetanosorangelo4550]

Hi Timothy great Tut! I have a very "hot" question: how to translate this AMAZING effect in Elementor? I tried with veeeeeeeery bad result! Any idea? Thanks thanks!!!

[@leewilson1978]

Do we have to use a solid colour for the mask, only reason I ask is because I am transitioning between background colours and so colour the mask needs to be will change if it is a solid colour?

[@MichelleWong-x3h]

I'm stuck on this too! Do you happen to have a working solution for different colour backgrounds on the same page?

[@phillipinge3004]

Similarly I am trying to implement this on a background with a texture, so the mask blocks are obvious. Is there a way to mask the mask block to the text?

[@Erg-tk2ln]

Hi Timothy, Is there a way we can manipulate the speed of when the text is highlighted? The current one works but we want it to move a little slower. Thanks!

[@MrTonyHidalgoml]

Hi! Did you find how to manipulate the speed? I’m currently trying it

[@junlargo11]

@@MrTonyHidalgoml set the duration value to 3 or more

[@hollandnr1453]

I am currently using elementor. would this text function also be possible in elementor. if so how do i put everything in javascript? 👍🏼

[@tobiasola4098]

did you succeed with elementor?

[@hollandnr1453]

@@tobiasola4098 no can you explain me

[@livingandloving10]

Hi, Everyone. Quick question. I'm new to using code. When you add code inside Webflow, Does it matter in what order you place the code sections? Or can you place effects in any order as long as the open code and close code for each effect are in place? Thank you.

[@timothyricks]

Hi, generally you can place them in any order. Adding the script tags for libraries like GSAP should usually go at the top so the library gets imported before we add any custom scripts using GSAP.

[@bang_official]

I praise you for the cool work! For some reason I have the whole text in one line when I add the class «split-lines». What could be the problem? 🤔

[@AsherWoltermann]

Same!

[@MariiaZhemela]

I have the same problem and cannot find solution, was you able to find it?

[@alexsandrkhaladzhy6386]

Hi! I have a problem.. text reveal animation on scroll with GSAP & SplitType NOT WORK on CMS template page (on static page animation is working, everything fine... ).. Mabe someone know how to fix this? Thaks!

[@pauleflores]

This tutorial is awesome. Thank you so much Timothy! Idk if it’s just me, but the scroll animation doesnt work on mobile. 😢 does anybody have the same issue?

[@sarmadali77771]

😘

[@Shug564]

I am getting this error in my console: Uncaught ReferenceError: $ is not defined at runSplit ((index):7:22) at (index):11:1 Any suggestions?

[@yash7630]

How about splitttingjs

[@azeddineblidi4698]

anyOne have an idea about how can i implement this animation in react instead please ????

[@KOpower01]

Cant get this to work at all unfortunately

[@salok1508]

Triple monstre

[@danilorastovic3838]

not working!!!!