🔴 LIVE - Recreating Text Line Animation on Scroll

Get the cloneable for this project at webflow.grsm.io/highlight-tex...
Split Type Library at github.com/lukePeavey/SplitType
monopo.vn/
Site by
monopo
Damien Mortini
Florent BIFFI
www.awwwards.com/sites/monopo...
Join my Webflow Wizards Community
/ timothyricks
Try Webflow using my affiliate link below.
webflow.grsm.io/4840096

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

[@AGDSGN]

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

[@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!

[@UchihaEon7]

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

[@mateostabio]

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

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

[@chloedesigns]

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

[@literallyshane4306]

Amazing! Thank you Timothy 👍

[@dmytrokaraulov5623]

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

[@ashleythedesigner]

You're such a gem Tim❤🇿🇦

[@vagifmammadov6555]

Really awesome stuff!

[@themevictory9642]

Great tutorial. Thanks

[@j_pbp]

thank you bro, really amazing🔥

[@AbrahamAguilera]

Holy crap Timothy this is gold 👏

[@maxshishkn]

awesome sauce 🛸🔥♥️

[@Kljopa]

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

[@ibraheemolasupo7881]

This man is too good 🙌🏽🙌🏽

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

[@CarlKho]

Such value!

[@user-rv3fb5ke8u]

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?

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

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

[@BlueRose917]

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

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

[@shauntan2061]

Thank you

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

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

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

[@andrewbrown4493]

Can we get a link to your Notion page?

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

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

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

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

[@ayushidlal1467]

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

[@sourabh2505]

can we do this in coded website with js?

[@azeddineblidi4698]

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

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

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

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

[@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!!!

[@renishparvadia2594]

hello amazing tutorial

[@anthonynguyen3519]

I have no clue how to do this on elementor. Please let me know if someone can!

[@KOpower01]

Cant get this to work at all unfortunately

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

[@user-rv3fb5ke8u]

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?

[@yash7630]

How about splitttingjs

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

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

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

[@sarmadali77771]

😘

[@salok1508]

Triple monstre

[@danilorastovic3838]

not working!!!!

[@OlaOlowo]

Brillliant. Absolutely brilliant. 🤌🏽