If you get a line-height problem, this is because overflow:hidden on .word adds height for some reason. Fix this by adding vertical-align:top; to your .word class in the css. Thanks for the tutorial by the way !
Thanks, this helped me on a personal project. One thing I would recommend is that if you are using images throughout the page is to use the imagesLoaded library to keep the scroll trigger in the correct place
Jo, 12th April 2024 and it doesnt work anymore. I literally configured it yesterday and it worked, but today not working anymore. Came back here to see if anyone else has this problem
Thanks for the tutorial! For anyone struggling with the leading/line height changing after you apply the attributes, try vertical-align: top!important in the CSS section in the settings of your Webflow page. I had tried just doing vertical-align: top and it wasn't working until i added !important.
Amazing stuff man, really appreciate you going into depth on this! Also nice to have a free alternative to GSAPs SplitText. I'm wondering if theres a reason you didn't include any animations by line?
If you have a problem when a text indent acts like a letter spacing you can solve it by wrapping the first letter in a span and adding left padding you need there
This is brilliant! Since I am trying to combine this with your page transitions. I need to add a delay before the animtion starts. I attempted to add some gsap delay commands, but coundn't get it to work :/
I have a client that wants the same interaction on the H1 text and the paragraph below, but they should animate sequentially. How do I add delay to a class?
Hi Tim. Great tutorial. But I can't seem to get the animation to work in the cloneable for Webflow. I cannot find the custom code for the javascript animation anywhere in in the file (global, embed or custom code) . I must be doing something wrong. Trying to recreate in Dreamweaver but not having much luck there either. The headings just sit there without animation. Also, because I cannot locate the javascript code in the cloneable file, I cannot see what change you made in the code to switch from unpkg to jsDelivr. Can you help/? Would like to learn how to apply these cool animations to my web designs. Is there a source for just copying the javascript code so I can include it in my project's custom code window? Chris
@@timothyricks Thanks so much, I struggled with it as well, however, Is there a way to make it work with defininng width, and having height adjust, as I have a full spread Image that I want to keep the ratio of?
hey tim that's an awesome explanation, i just had a few questions. When I download the cloneable webflow project it doesn't seem to play the animation in Toggle Preview, do I need to set anything up to activate it? I have a webflow site where I want the text to animate, in order to do that do I just need to add the Custom Code in the Inside and Before sections? for it to work?
Hi, this interaction uses JavaScript so it won’t run in the preview, only on the published site. There’s data attributes on the text and code in the page settings needed to run this.
Hi Timothy, I'm trying to clone your Webflow project but it looks like this effect doesn't work anymore. I faced that problem on other pages with similar animation effects as well. Is there any issue with the GSAP library lately?
Hi, I'm so sorry to hear that! Unpkg went down today 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...
This looks so cool, but I'm really confused. I cloned the project and when I look at each text element, there are no custom attributes on them. But the animations are working. What am I missing?
Hey Tim, I am trying to wrap my head around split type, gsap text animations, its really cool. one small issue is when I split the text into char, the letter spacing seems to be breaking, I guess each char span has a width or something. Is there any quick solution for this?
Love you code explanations. I know a lot of these can be done in Webflow natively but it’d take longer and be harder to replicate. If you could start all over, what code would you learn to write? I took a C# class way back when and now I’m hoping to up my Webflow game. Sounds like JavaScript is best?
Hey Timothy, nice tutorial. Do you have any specific reason for using opacity on page load to hide content? You could have used autoalpha instead to prevent FOUC, right?
Hello! Thank you for this tutorial! I do have a question tho. Does your text height change after using this animations? Would you maybe happen to know how to fix this?
Hi @@wearestudiotonic, good question! I show how to connect the two at this timestamp. th-cam.com/video/fbsux6zg1d0/w-d-xo.html I also have a codesandbox tutorial here that goes into more detail. www.patreon.com/posts/51678553
would be really helpful if we would be able to set the attributes of the elements automatically with javascript based on their class name or tag. So for exemple for each h2 element add those attributes(and therefore the animation)
Hi Timothy! Amazing tutorial, as usual! Using this animation in my project, everything seems good on Chrome but doesn't work on Safari. Has anyone else had this problem?
Hello Tim, I love your content! It's very helpful since I'm a beginner in Webflow. It helps me to solve my difficulties in learning to design a website. When I don’t know how to do it, I just watch your videos. It encourages me to continue what I’m doing. However, some of the interactions I want to learn doesn’t have tutorials. I'm just wondering If I could request you favor. I hope you could create video content regarding this site named Em Freebie Issue 2 on how to do the loading animation. It's a cloneable site but I want to learn more about how he created it. I tried to learn it by myself but still don't get it. I believe it's great content for those beginners who want to learn web design in Webflow. Thanks bro, appreciate it. ❤
Site: Em Freebie Issue 2 Also, if you plan to create an additional tutorial video for your TH-cam channel, I think this would be helpful. Site: Geospace Template
Hey Timothy, I was wondering how I could delay the animation if I was using same animation for two text blocks in a div because they seem to play at once. I’m a weblow beginner loll
Hey Timothy, the animations only work on 1 page. I've tried pasting the code individually in all the pages and also in the head and footer site code, neither seem to work. Is there any solution for this? Thanks in advance
The issue with the animation seems to come from the split type library. I get an "SplitType is not defined" error in the console. Not sure how to address it though.
@@madsness101 Hi, Unpkg went down today 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 this, we can replace this line of code... With this instead...
Hey there, is there a way to split each line instead of word or letters and apply animation for the entire line? currently I've separated each line into an individual div and used default webflow animations. I'm thinking of switching it to gsap and text split.
Hi Tim! Thanks for all your terrific content. How would you modify the code to honor user preferences for reduced motion if any are set? Thanks in advance! -Marc
Hey Tim! This is amazing. Thank you! I’m working with multiple fonts on the same page, and the only thing that bugs me is the universal .word padding and margin. How can I set it up so that different fonts have different padding-bottom and margin-bottom for the animations?
Thanks Bill! If each font has a different class name on the text element, you can override the generic .word padding like this. .your-custom-heading-class .word { padding-top: 2em; padding-bottom: 2em; }
Thank you! Yes, the text is responsive. That’s really only an issue if we wrap the lines into spans, but we’re only using words and characters in this case.
Hey Tim, i have a little problem, i put this code and everything works but sometimes when the text animation shows..it slows down, especially on mobile, it works but slows down a lot..PLEASE ANSWER i must fix that
I have over 20 sites with this code and attributes! And all stopped working today! Timothy, please give us all an answer to solve the problem promptly 🙏
Hi, I'm so sorry to hear that! Unpkg went down today 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...
@@timothyricks Thank you very much! It's already been fixed. There were also bugs with Spline not showing up through the built-in functionality. It seems to be a glitch on the Webflow side. But everything is working as before
Hi, thank you for letting me know! Unpkg went down today which is the website that hosts the split type library. updownradar.com/status/unpkg.com To fix it, we can replace this line of code... With this instead...
The text I'm targeting is getting "-webkit-text-fill-color: transparent" applied on the live site, making it invisible. Any idea why this is happening? It's only when I apply the attribute for this animation.
Sure thing! Yes, it already does if the element is past the trigger point on page load. But you can also remove the paused: true setting and the createScrollTrigger for any animation to make them happen on page load.
I don’t believe so. Each word and letter is wrapped in a span which has no semantic meaning. Spans are meant for use inside headings, and they don’t change the way the heading is read.
I made an similar animation to the "Letters Slide Up" on webflow using 2 text blocks inside a div with interactions but this isn't responsive, so I'm thinking about this animation that you showed in your video if it would work in my case or not
Relatively simple! Just copy over the css and JavaScript from the page settings. Then apply the attributes to any html elements you’d like. The code uses jQuery so you’d also need to import that library if it’s not already on your site or tweak the code.
Anyone having issues with these interactions working sporadically? I've got a site with these added in quite a few places, and I can't find any commonalities on why some items always work, while others often don't. Refreshing the page with the viewport on top of a malfunctioning interaction will cause all text-split interactions on the page to work again. If the page is loaded and items are not working, sometimes (but not always) scrolling up and down past the text will sometimes make the interaction play. There doesn't seem to be any correlation behind scroll speed or scroll distance. (Trying to make sure the interaction has time/space to trigger the reset.)
It sounds like there might be images that don’t have an aspect ratio applied above the text that isn’t working. Images without an aspect ratio cause the page height to change once they load in and offset the scrolltrigger position
Thanks@@timothyricks! I ended up setting the images on the page to eager loading so that if the client swapped them out for others in the future, the aspect ratio wouldn't be locked.
Hi Tim, great video. But is there a way of getting the animation to trigger on a slider change? Client wants his testimonials to do this effect each time the sldier changes. Here's hoping!. Thanks
![Picking boards on the CAASie.co map - In depth [Jan 25]](http://i.ytimg.com/vi/7f7eJAHbskE/mqdefault.jpg)
8:11 is SUCH a crucial part to this whole process. That flickering drives me insane. Thank you Tim!
I love how Tim brings the problem along with the solution, in addition to helping to solve the problem, he gives you this mindset ❤
Grande, João Lucas! To acompanhando teu trampo no insta, não surpreende que você aprende com os melhores
@@omuriloribeiro Opaaa Murilo, muito bom ver você por aqui também, vamos nessa 🔥❤️
If you get a line-height problem, this is because overflow:hidden on .word adds height for some reason. Fix this by adding vertical-align:top; to your .word class in the css. Thanks for the tutorial by the way !
Pin this Tim!
🙏
💋💋💋💋😁
Omg thank you sm i tried so long to fix this. 🙏
Thanks for the help, buddy. Was stuck on this issue for so long 😅
Thanks, this helped me on a personal project. One thing I would recommend is that if you are using images throughout the page is to use the imagesLoaded library to keep the scroll trigger in the correct place
Hey man, can you please share
more details? having the same prob
same here! could you explain? Halfway down the page, the aniations stop showing, unless I refresh the page from there...
This is amazing Timothy, keep up the good work!
Thanks so much! Will do!
Jo, 12th April 2024 and it doesnt work anymore. I literally configured it yesterday and it worked, but today not working anymore. Came back here to see if anyone else has this problem
Same here. Got stuck right at the beggining. Nothing splits ._.
Thanks for the tutorial!
For anyone struggling with the leading/line height changing after you apply the attributes, try vertical-align: top!important in the CSS section in the settings of your Webflow page.
I had tried just doing vertical-align: top and it wasn't working until i added !important.
Thanks for the tip! It worked like a charm
This is exactly what I've been searching for! Perfect!!
Thank you Tim, really valuable content ❤️
Thanks so much, Simon!
Amazing stuff man, really appreciate you going into depth on this! Also nice to have a free alternative to GSAPs SplitText. I'm wondering if theres a reason you didn't include any animations by line?
If you have a problem when a text indent acts like a letter spacing you can solve it by wrapping the first letter in a span and adding left padding you need there
This is brilliant!
Since I am trying to combine this with your page transitions. I need to add a delay before the animtion starts.
I attempted to add some gsap delay commands, but coundn't get it to work :/
Never clicked so fast on a video
Amazing tutorial and clonable!
I have a client that wants the same interaction on the H1 text and the paragraph below, but they should animate sequentially. How do I add delay to a class?
hey Tim great tutorial, wondering if there a chance you could fix the clone able link. Would be great!
+1
great tutorial!
Thank you for this very useful tutorial Tim! 🙏
Really cool and easy to use, thank you! :)
Hi Tim! Thanks for your content, i have a cuestion for you, can be this animation loop?
Hi Tim.
Great tutorial. But I can't seem to get the animation to work in the cloneable for Webflow. I cannot find the custom code for the javascript animation anywhere in in the file (global, embed or custom code) . I must be doing something wrong. Trying to recreate in Dreamweaver but not having much luck there either. The headings just sit there without animation. Also, because I cannot locate the javascript code in the cloneable file, I cannot see what change you made in the code to switch from unpkg to jsDelivr. Can you help/? Would like to learn how to apply these cool animations to my web designs. Is there a source for just copying the javascript code so I can include it in my project's custom code window?
Chris
I am having one problem, everything is working fine, except for a section where the animation gets complete before scroll, How can I get that sorted?
Hmm, that usually happens if images above that heading don’t have a height applied
@@timothyricks Thank you so much, you are a life saver. It worked.
@@timothyricks Thanks so much, I struggled with it as well, however, Is there a way to make it work with defininng width, and having height adjust, as I have a full spread Image that I want to keep the ratio of?
Love your content, really appreciate ❤️
what to delete in code that removes scroll trigger? i just want animation when the page loads
you're a legend!
nice content! One question, will this work with lenis smooth scroll?
Yes, it should! Lenis doesn’t interfere with GSAP
hey tim that's an awesome explanation, i just had a few questions. When I download the cloneable webflow project it doesn't seem to play the animation in Toggle Preview, do I need to set anything up to activate it? I have a webflow site where I want the text to animate, in order to do that do I just need to add the Custom Code in the Inside and Before sections? for it to work?
Hi, this interaction uses JavaScript so it won’t run in the preview, only on the published site. There’s data attributes on the text and code in the page settings needed to run this.
@@timothyricks ah brilliant, makes sense and thanks for the speedy reply much appreciated 👏
Is there a way to disable this animation on mobile? Thanks for the video, Timothy.
Hi Timothy, I'm trying to clone your Webflow project but it looks like this effect doesn't work anymore. I faced that problem on other pages with similar animation effects as well. Is there any issue with the GSAP library lately?
Hi, I'm so sorry to hear that! Unpkg went down today 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 Tim please where can I get the code you used for the video
This looks so cool, but I'm really confused. I cloned the project and when I look at each text element, there are no custom attributes on them. But the animations are working. What am I missing?
Hey Tim,
I am trying to wrap my head around split type, gsap text animations, its really cool.
one small issue is when I split the text into char, the letter spacing seems to be breaking, I guess each char span has a width or something. Is there any quick solution for this?
Hi! This seems to be working only on one text field for me, on the others the letters get all mixed up. What could be the reason for this?
Love you code explanations. I know a lot of these can be done in Webflow natively but it’d take longer and be harder to replicate.
If you could start all over, what code would you learn to write? I took a C# class way back when and now I’m hoping to up my Webflow game. Sounds like JavaScript is best?
It's not working for me?
Hey Timothy, nice tutorial. Do you have any specific reason for using opacity on page load to hide content? You could have used autoalpha instead to prevent FOUC, right?
Thank you! Just used opacity for simplicity in this case. Autoalpha would work here also though.
Gods work.
Hello! Thank you for this tutorial! I do have a question tho. Does your text height change after using this animations? Would you maybe happen to know how to fix this?
how do we add some delay if we want?
Hey man, how do you get the source link for the code sandbox? Sorry for such a dumb question...
I want to code in Sandbox like you do, and have the code affect my Webflow website.
Hi @@wearestudiotonic, good question! I show how to connect the two at this timestamp.
th-cam.com/video/fbsux6zg1d0/w-d-xo.html
I also have a codesandbox tutorial here that goes into more detail.
www.patreon.com/posts/51678553
@@timothyricks thanks so much man! Thanks for replying quickly and in detail, I really appreciate it.
when i use the code on the live site the text heigth changes. Do anybody know why?
would be really helpful if we would be able to set the attributes of the elements automatically with javascript based on their class name or tag. So for exemple for each h2 element add those attributes(and therefore the animation)
how do you use codesandbox directly with your webflow preview?
Hi Timothy! Amazing tutorial, as usual!
Using this animation in my project, everything seems good on Chrome but doesn't work on Safari. Has anyone else had this problem?
Hello Tim, I love your content! It's very helpful since I'm a beginner in Webflow. It helps me to solve my difficulties in learning to design a website. When I don’t know how to do it, I just watch your videos. It encourages me to continue what I’m doing. However, some of the interactions I want to learn doesn’t have tutorials. I'm just wondering If I could request you favor. I hope you could create video content regarding this site named Em Freebie Issue 2 on how to do the loading animation. It's a cloneable site but I want to learn more about how he created it. I tried to learn it by myself but still don't get it. I believe it's great content for those beginners who want to learn web design in Webflow. Thanks bro, appreciate it. ❤
Site: Em Freebie Issue 2
Also, if you plan to create an additional tutorial video for your TH-cam channel, I think this would be helpful.
Site: Geospace Template
it prevents me to send the source link. you can visit it in made with Webflow section you can search it I've tried before. Thank you for your support.
How can it works with a "clip background to text" ? It doesn't work actually. Great tutorial
Hey Timothy,
I was wondering how I could delay the animation if I was using same animation for two text blocks in a div because they seem to play at once.
I’m a weblow beginner loll
Hey Timothy, the animations only work on 1 page. I've tried pasting the code individually in all the pages and also in the head and footer site code, neither seem to work. Is there any solution for this? Thanks in advance
I used these on several websites and am a big fan. Unfortunately they stopped working today :/ any ideas?
same by me. the code stop working. if someone got a solution please tell me
In custom code head section change [text-split] {opacity: 1;}, it fixes that the text its visible but animation doesnt work.
The issue with the animation seems to come from the split type library. I get an "SplitType is not defined" error in the console. Not sure how to address it though.
@@madsness101 Hi, Unpkg went down today 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 this, we can replace this line of code...
With this instead...
@@timothyricks Man you are truly amazing ♥Thanks a lot, I appreciate you!
Hey there, is there a way to split each line instead of word or letters and apply animation for the entire line? currently I've separated each line into an individual div and used default webflow animations. I'm thinking of switching it to gsap and text split.
Hi Tim! Thanks for all your terrific content.
How would you modify the code to honor user preferences for reduced motion if any are set?
Thanks in advance!
-Marc
Thank you!
Hey Tim! This is amazing. Thank you! I’m working with multiple fonts on the same page, and the only thing that bugs me is the universal .word padding and margin. How can I set it up so that different fonts have different padding-bottom and margin-bottom for the animations?
Thanks Bill! If each font has a different class name on the text element, you can override the generic .word padding like this.
.your-custom-heading-class .word {
padding-top: 2em;
padding-bottom: 2em;
}
@@timothyricks Thank you! I tired to put this under the .word style inside tag and it’s still not working 🤧
Actually, it works! was missing a space between .your-custom-heading-class and .word. Thank you!!!
Oh awesome! Sure thing!!
This looks awesome! Is the text responsive, though? Like if the text moves over to the next line, does it screw up the animation?
Thank you! Yes, the text is responsive. That’s really only an issue if we wrap the lines into spans, but we’re only using words and characters in this case.
@@timothyricks Ooh thank you! Btw, is there a reason why you don't use GSAP's toggleActions for onEnter and onLeave events?
awesome Thanks!!
Hey Tim, i have a little problem, i put this code and everything works but sometimes when the text animation shows..it slows down, especially on mobile, it works but slows down a lot..PLEASE ANSWER i must fix that
thank you so much
I have over 20 sites with this code and attributes! And all stopped working today! Timothy, please give us all an answer to solve the problem promptly 🙏
Hi, I'm so sorry to hear that! Unpkg went down today 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...
@@timothyricks Thank you very much! It's already been fixed. There were also bugs with Spline not showing up through the built-in functionality. It seems to be a glitch on the Webflow side. But everything is working as before
Hi @timothyricks Split-type doesn't work anymore due to "Cross-Origin Read Blocking (CORB) blocked a cross-origin response". Is there a solution?
Hi, thank you for letting me know! Unpkg went down today which is the website that hosts the split type library. updownradar.com/status/unpkg.com
To fix it, we can replace this line of code...
With this instead...
The text I'm targeting is getting "-webkit-text-fill-color: transparent" applied on the live site, making it invisible. Any idea why this is happening? It's only when I apply the attribute for this animation.
Seems the issue is maybe that I had a gradient fill applied to the text.
thanks Tim, can the animation happen on load animations?
Sure thing! Yes, it already does if the element is past the trigger point on page load. But you can also remove the paused: true setting and the createScrollTrigger for any animation to make them happen on page load.
why so legend?)
Would this affect the H1's readability for SEO reasons?
I don’t believe so. Each word and letter is wrapped in a span which has no semantic meaning. Spans are meant for use inside headings, and they don’t change the way the heading is read.
@@timothyricks makes sense. I'll test it out by implementing it and I'll use Semflow or some SEO tool to see if it can find my H1.
I clone your webflow project but it not working ?!
It's possible do use this animation with mouse hover?
I made an similar animation to the "Letters Slide Up" on webflow using 2 text blocks inside a div with interactions but this isn't responsive, so I'm thinking about this animation that you showed in your video if it would work in my case or not
Awesome, how hard would it be to implement this to normal html css js.?
Relatively simple! Just copy over the css and JavaScript from the page settings. Then apply the attributes to any html elements you’d like. The code uses jQuery so you’d also need to import that library if it’s not already on your site or tweak the code.
Can you make a video showing how you connect codesandbox with your webflow project please? :D
Nice Tutorial Tim, Is there any alternative to GSAPs SplitText for text animation ?
Thank you! The split library used in this tutorial is SplitType, a free alternative to GSAP’s SplitText
Anyone having issues with these interactions working sporadically? I've got a site with these added in quite a few places, and I can't find any commonalities on why some items always work, while others often don't. Refreshing the page with the viewport on top of a malfunctioning interaction will cause all text-split interactions on the page to work again. If the page is loaded and items are not working, sometimes (but not always) scrolling up and down past the text will sometimes make the interaction play. There doesn't seem to be any correlation behind scroll speed or scroll distance. (Trying to make sure the interaction has time/space to trigger the reset.)
It sounds like there might be images that don’t have an aspect ratio applied above the text that isn’t working. Images without an aspect ratio cause the page height to change once they load in and offset the scrolltrigger position
@@timothyricks Hmm, ok, I'll play around with that and see if It helps out. Thanks for the quick reply!
Thanks@@timothyricks! I ended up setting the images on the page to eager loading so that if the client swapped them out for others in the future, the aspect ratio wouldn't be locked.
Where can i get the code in Code Sand Box
Hi, it’s in the page settings in the cloneable
Hi Tim, great video. But is there a way of getting the animation to trigger on a slider change? Client wants his testimonials to do this effect each time the sldier changes. Here's hoping!. Thanks
Tim Ricks Please Notice Me Senpai!
"No Code Platform"