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!
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
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?
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!!
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...
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.
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.
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?
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!!!
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
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?
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?
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?
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?
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?
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?
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?
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!
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!
hmm.. This didn't work for me. I added the code and "split-lines" tag. Am I missing anything?
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.
use screen as blending mode for the text or wrapper(where text lives) ?
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?
Lol was literally trying to replicate this for a project this week, what are the odds. Thanks for this 👍
awesome sauce 🛸🔥♥️
Great tutorial. Thanks
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
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?
anyOne have an idea about how can i implement this animation in react instead please ????
Thank you. The resize and revert helped a lot👏👏
You're such a gem Tim❤🇿🇦
😘
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!!
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...
Hey Timothy, Thank you so much!! It was so helpful:)
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.
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.
I was awed by this website and wanted to learn how he created this effect and here is a RUclips video of just the thing
thank you bro, really amazing🔥
Is there a link to the notion file? 👀
Can we get a link to your Notion page?
Really awesome stuff!
Very nice. Seems like we started exploring gsap simultaneously :)
Holy crap Timothy this is gold 👏
Thank you
How about splitttingjs
I am currently using elementor. would this text function also be possible in elementor. if so how do i put everything in javascript? 👍🏼
did you succeed with elementor?
@@tobiasola4098 no can you explain me
I am very happy to have stumbled upon your channel. Keep up the GSAP animation videos!
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?
This man is too good 🙌🏽🙌🏽
I am getting this error in my console:
Uncaught ReferenceError: $ is not defined
at runSplit ((index):7:22)
at (index):11:1
Any suggestions?
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!!!
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
Triple monstre
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
You are the man! I'd buy a course from you , thank you for sharing!
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?
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?
Amazing! Thank you Timothy 👍
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?
is there a way to do this by characters? instead of lines?
I have no clue how to do this on elementor. Please let me know if someone can!
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?
Cant get this to work at all unfortunately
Such value!
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.
can we do this in coded website with js?
hello amazing tutorial
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?
I'm stuck on this too! Do you happen to have a working solution for different colour backgrounds on the same page?
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?
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?
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?
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!
Hi! Did you find how to manipulate the speed? I’m currently trying it
@@MrTonyHidalgoml set the duration value to 3 or more
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? 🤔
Same!
I have the same problem and cannot find solution, was you able to find it?
not working!!!!
Brillliant. Absolutely brilliant. 🤌🏽