Easy Letter Animations in Webflow

[@stvngunn]

Can't believe we only chatted about this yesterday and you've already done a tutorial on it! Love it!

[@asagoldstein1669]

Please do a video on design techniques! You have such a unique professional flair in your designs that I can’t ever seem to nail.

[@timothyricks]

Thanks so much! Here’s a few design videos that I’ve done so far. kzbin.info/www/bejne/b5XSf6akptecgas kzbin.info/www/bejne/oWS9iWd8arWheJY kzbin.info/www/bejne/nKethaetpdWWf6s

[@hamzafarouk1538]

Thanks Tim. Your youtube channel is a gold mine for webflowers

[@tomaszrosinski5825]

Hi Timothy, Can you explain to me how I can apply a fade-up animation to make different text appear after the text disappears (e.g. for three different texts in a loop). Thank you very much

[@belabacisami7777]

Hi bro, do you have the solution to fade-up three different text please ? Thanks you

[@DreamyMoondust]

For those with spacing problems, simply space the letters out using Shift+Space (instead of just Space). Hope that helps :')

[@garethellison01]

I know these are all old videos. But they're such a help! Thank you.

[@esoterickaplan]

When using a linear gradient and clipping bg to text to create a text gradient it breaks the animation - do you have a solution for this? Please help!

[@gorzyk80]

Great video Timothy, thanks a lot!. Would you please kindly advise on how to implement this method to a swapping text? I've seen this question asked by several people here already. Much appreciated!

[@botbot3698]

your webflow content is amazing

[@chrysangeloskougioutas7556]

The fadeup animation looks a bit choppy on desktop in chrome, mobile is smooth any advice?

[@lafeo0077]

hi, i was wondering how you could have an array of different texts to show up one after each other?

[@plantseeds_]

Amazing content as always. You're the GOAT man! I have a question about the way you rotate those two headings in the Crush site... What's your structure to make them alternate like that? I can get them to animate just fine but I'm not sure how to make one show, disappear and then show the other one. Thank you so much for everything you do for us man, keep rocking

[@maltekerssenfischer796]

@timothyricks second that - it would be great if you could tell us how you made those two headings alternate. And thanks for the tutorial - awesome!!

[@imkeyi]

Really cool video! But what if i want the text change per loop like "A house of hope and healing" fade in and fade out then "B house of hope and healing" fade in and fade out then more

[@lucasrochas2008]

This channel is definitely one of my favorites. Keep the great work 🔥

[@timothyricks]

Lucas Rocha Thanks man! Will do!

[@JulianHibbert]

Awesome Tim, many thanks!

[@Bubble798-s3v]

thanks as always timothy!

[@ruuuhro]

hey, this is awesome, thanks so much for sharing your work! is there any way we could use this for multiple text with different titles? (so it can animate like example you put in the beginning)

[@alessandramirto9992]

Thank you ! This is GOLD. I love your videos

[@angelazhou6643]

Thanks so much! Super clear tutorial + worked like a charm.

[@magueuh]

Hey, awesome work! so helpful for a beginner like me! I have a question... to animate on "scroll into view", on let's say 4 titles on a page, since it targets an id, do you have to create 4 bits of that code? one for each title? But seriously, you've got the best webflow content out there lately!

[@ramondoo]

Hi, have you found out a solution? I am facing the same problem ahaha

[@magueuh]

I just use GSAP now...

[@Abhimabi]

Bag of t.ricks thank you, would like you to have a series, from beginner to advance level. These are random but still helpful.

[@timothyricks]

Abhinab Thank you! That’s a great idea! I may work on that series one day. Right now, this is what I have for a beginner tutorial. kzbin.info/www/bejne/bmLZq5SFaJVqaJI

[@Abhimabi]

@@timothyricks already done with it and it was very insightful

[@madselsoe]

This just solved a problem I’ve been having for a long time, thanks a lot 😊 Would also love a tutorial on the fading background color changes from the Crush site 🙏🏻

[@willpricestudio]

This is excellent and easy to follow. Thanks for sharing. Is it possible to apply this to multiple headings in a loop without setting different classes and timing each one?

[@Ellonirie]

I barely write on youtube, man keep it up! you are great! easy and fast! thanks for the quick help days ago! I was also looking for that easy letter animations and you just posted it! ^^

[@timothyricks]

Barry Baris Dogan Thanks so much!! Happy to help

[@chrysangeloskougioutas7556]

That's game-changer thank you!

[@DVDB_Media]

Thanks a lot man for doing this!

[@stevenbernstein6555]

Love this. Amazing job!

[@pablocortes682]

Hello Timothy, thanks for sharing this. I've run into an issue and I would really appreciate if you can help me. I can set up the animations to play just fine. The problem I have is when I set up the animation to play when scroll into view. I placed a heading inside a div block, gave the div block an id, placed the id on the javascript, placed the play command where it says, add the classes to the heading, but then when I publish in webflow, nothing happens, I mean not even the heading will show up on the site. Any clues as to why this is happening? Thanks in advance.

[@pablocortes682]

Never mind Timothy, I got it to work! Thanks again for sharing this!

[@willneeteson9627]

@@pablocortes682 I'm having the exact same problem! How did you get this to work?

[@yaschatorfs1348]

Same issue here, how did you manage to fix this problem?

[@RogueUX]

Ran into the same problem. I had 2 headers with the same "fade-up" class. I think the second header automatically started its animation after first header animation was finished; instead of waiting for the scroll into view trigger. Fixed it by making a new animation class like in 4:00

[@janineheinrichs6853]

Great tutorial thanks!

[@alekznial]

Amazing video, your designs are amazing. I tried testing these animations out on a website I'm building, so far the load page animation works flawlessly but the scroll in animation has an issue. As I scroll into view the text is visible but as soon as it hits the div with the ID to trigger the animation, the text disappears and the animation follows. is there anyone on here with a similar issue or what to troubleshoot?

[@fjb9095]

same issue, let me know if you have a solution!

[@antonioguedes2155]

Clean and neat! Thank you!

[@shafin8614]

man i love you

[@baltazarfajto]

Amazing channel, thanks for sharing this!

[@olivergilberthorpe6789]

Amazing stuff, thanks so much man

[@OleksiiGryshko]

Hey Timothy! On 7:00 you said about problem - that text shown before animation started. And I have such a problem. I've used trigger 'when shown in viewport' and when I'm scrolling website I see text on its place, but then it disappear and starts an animation. I know that it happens because code of animation reded by browser after all other things. But I don't know how can I fix this? If anybody have solution on this - help me please!

[@Colin_Sanders]

Did you ever find a solution to this? I'm struggling with the same thing now lol.

[@zendallx]

A really helpful breakdown on everything, I wish every lesson others did was so clear and concise. One question I have is when using this animation to trigger based on scroll into view the text is sitting in its final state and then triggers. Is it possible to set its initial state to not be displaying so it slides in as smoothly?

[@timothyricks]

Thanks so much! Yes, it is possible! You can use the class name of your animation to style the letters inside using CSS. For instance, if your animation scales up each letter, you'd want to set the scale on each letter to 0. Or if it fades up each letter using opacity, you'd want to set the opacity on each letter to 0 by default. Here's what the code would look like inside style tags. .fade-in .letter {opacity: 0;} .pop-in .letter {transform: scale(0);}

[@zendallx]

@@timothyricks Thank you heaps for that, I got it working perfectly! I have very minimal knowledge of JS and I just want to break it down further from the perspective of someone that may be a little overwhelmed playing with JS. The style tags he's referring to are at the top of the code, I was trying to adjust it within the JS - look for ".letter {display: inline-block; line-height: 1em; opacity: 0;} " right up the top to style it. Again, I only figured that out as you've clearly laid everything out and thank you for that, can't wait to keep going through your videos and improving my skills!

[@dnoco]

@@zendallx Thanks zach! I wouldnt have got it if you hadnt broke it down :D just fixed mine

[@Therealisraeli]

This is AWESOME!

[@cre-ate]

This one is brilliant. I additional way to use text animations Thank you

[@dannygoldfarb8378]

It would be great to get an update video of this with some new text effects?

[@IvanAgram]

This looks great! How can I delay until it is scrolled into view?

[@ddrraaggoonnzz1]

Did you find how to do that?

[@tuckermurphy17]

Thank you for the awesome tutorial! I'm having an issue where the letters load in, unformatted, on top of each other in the bottom left of the div block. What am I doing wrong?

[@kevynlevine]

This is exactly what I needed! Is it possible to set fade in effect on text element when clicking another element such as a card that expands to show the text?

[@SharvariA-ys4xc]

how can we apply these animations to entire sentences?

[@Tr786hala]

Love your tutorials! Keep it up

[@07ariana07]

Incredible channel!! 🙌

[@bartspek]

Amazing job!

[@bartspek]

I just can't get your link to the code to work somehow? Maybe it's me

[@JahrenStacey]

Amazing! Only thing for me is this code replaces my 👋emoji hand with two question mark icons, any help?

[@MRVLTECH]

Any idea whether this needs some external stuff to work? Tried to get the code working on my wordpress website, the classes are set but none of the animations work. No errors in console to be found, so the syntax seems alright.

[@joashsak]

Amazing tutorial thank you. Quick question: @7:03 you mention that you need to set the opacity to 0 so it doesn't show up at first. How would you go about that in the custom code section? When I set it to 0 in the designer it never shows up.

[@timothyricks]

Thank you! You would need to set the opacity of the individual letters inside the text block by using css since they’re the things JavaScript will turn the opacity up on. For instance if you were using the fade up animation, it would be .fade-up .letter {opacity: 0;}

[@josephgraham6098]

@@timothyricks I wish I knew what this meant. My JS knowledge leaves a lot to be desired.

[@adriennwhite]

@@josephgraham6098 I've just put the code snippet Tim said between the style tags at the very beginning of the code and works like charm. Thank you so much!

[@j_pbp]

this isn't working on gradient background clipped text, any ideas how to fix it?

[@michaellieu]

This is amazing! Is there a way to apply the animation to a block of text with multiple lines staggering each line separately (rather than character or words)? From my limited knowledge, it will help SEO by keeping text together rather than manually breaking them up.

[@jakesteelman]

Not sure if this is what you're referring to, but I have my heading in a container that restricts its width, then when I applied the animation initially to the heading it did each line separately and won't require you to split the words.

[@letsrun-runclub]

Amazing! Any way to have alternating text in the heading? So that the text is different each time it fades in. Thanks in advance

[@gregwashington1611]

Is there a way to get the entire word to animate and not just each individual letter?

[@afolayanolajesu1599]

If I try previewing it, will I see the effect of the code, so sorry, I'm not a developer but I'm trying to make this work

[@ayrtonlavayen]

Fantastic!

[@phillipylee]

1 - you are a legend for these. THANK YOU. 2 - is there an edit to the code so we can wrap each word of an element in a span tag, rather than each letter?

[@Adam-xy9fr]

Why do that though? That's what the anime.js is using so that you don't have to pollute the dom with a bunch of tags. The code will do that for you.

[@andreasmb]

Thank you for a great tutorial! I was wondering if there was a way to have the animation start with the first character on each word at the same time? (Meaning - the animation starts with fading in the first character in each word, then goes to number two, etc).

[@TheSocialDancers]

Great tutorial! Question - in the last example, why do you create a div ID and not a class?

[@TheSocialDancers]

To follow up - What would I need to add to the code to make the same animation play when different DIVs are scrolled into view? Thanks so much!

[@fiercevideos7519]

I'm having an issue that I can't figure out: The animation works great at all breakpoints. However, at the mobile breakpoint, the words have no spacing between them. This goes away when I delete this script, so I know that the cause is related in some way. Is there a way I can fix this? Thanks!

[@asafrombrandshine1075]

The letters just disappear completely when I try to do this. Any fix?

[@ReneAlbertsen]

Awesome videos and channel Timothy. If this was my H1 on a page, i guess Google would not read it, and index it correctly, because its broken up into spans. Or do you know if that does not have an effect on how Google sees the H1 text?

[@timothyricks]

From what I’ve researched, no one seems to know one way or the other if spans matter for SEO. I personally think Google would still be able to read it but can’t be certain

[@maxfri6680]

there is a flickering when i apply any of those animations on my project.. why is that?

[@rickbossenbroek]

Thanks! Very handy.

[@kevinwalton.]

How can I do this in Squarespace? I don't know anything about code but I want to add this to my site.

[@bloodforfeathers]

Is there a way to change how long the text stays for? I don't want it to stay for as long as it does but I can't seem to see a way to change it

[@JoshuaParkerToulson]

Any way to get rid of the flash of text before animation starts (on scroll to view). You can just see a flash of the text before it animates in.

[@fjb9095]

+1 on this

[@antaradave8240]

Is it possible to change the text within this? When it is done fading out it replaces with new text which again fades and then replaces with another new text and this goes in loop...

[@madselsoe]

Would it be possible to span the words og lines instead of letters? Thanks!

[@Antnvita]

This fantastic - thanks for sharing. You mentioned that you can't use the same class to cue the animation because of the play order. How would this animation work in a collections list navigation where I can't change the class per item? When I mouse over item 1 and the text animates perfectly, but when I roll over items 2,3,4, etc there is a delay that varies based on the order of the item in the list. It's been a tricky one to figure out. Fantastic channel for a new Webflow user like me!

[@Antnvita]

I figured it out using conditional visibility (CMS includes a unique id # per post) and then excluding any classes that have that unique # by modifying the first line in the .tricks jQuery...... var tricksWord = document.querySelectorAll('.tricks:not(.w-condition-invisible)');

[@chakhmanmohamed9436]

Hi, could you please show me how do you do that to the images

[@timothyricks]

Hi, you mean staggering images? I have a tutorial for that at kzbin.info/www/bejne/aKjTgGxmjc2Gi6M

[@karinasmyrnova9108]

Thank you so much for tutorial! When I apply .tricks class for my h1, there become no space between words ( any ideas how to fix it? tried with .h1 {word-spacing: 30px;} in style, but with no results.

[@VideoTest87]

This is dope. Any recommendations for animating multiple lines of text?

[@timothyricks]

Thanks Josh! I just updated the code to work with multiple lines of text.

[@ElinaLin318]

@@timothyricks This is great! How can this be used to loop a series of text, so that each one would replace the next?

[@martinlagrange5792]

@@ElinaLin318 Yes I wonder :)

[@skylov01]

I love this thanks so much!! by the way, I can't use this fade up animation in changed slider in webflow because it can't be reset animation again after one play time. it would be appreciate if anybody inform me about solution!!

[@Kabarza]

Love this. awesome.

[@nathangarland7711]

Hi guys, I'm using the slide in animation but the text disappears after it's loaded. Any ideas on how to stop this happening? Cheers

[@shibly95]

it doesn't work with the text which is clipping with background image.

[@dmytrokaraulov5623]

Is there any way to break the text on mobile breakpoints? I use effect on hero text in one line. But for mobile I need to break it. Because of span it breaks every single letter.

[@sonimoretti]

The animation doesn't play when my text has a gradient background :( , anyone having the same bug?? Thank you so much Timothy!

[@Kuromiicat]

Did you ever figure this out? :(

[@j_pbp]

Same situation here, any ideas how to do that?

[@fiercevideos7519]

Is there a way to prevent the letters from flashing on screen bfiefly when the page loads? Mine flash real quickly, then disappear and the animation starts.

[@Colin_Sanders]

Did you ever find a solution to this? I'm struggling with the same thing lol.

[@mahriovezmyradova4215]

hey, anyone can help with dowloading the code presented in the video?

[@judekolawole7354]

Hi Timothy, Is there a way to make the scroll in animation play when the div is around half of the viewport not immediately when it enters into the viewport?

[@timothyricks]

Hi Jude, good question! That’s possible with GSAP ScrollTrigger. I have a solution for that here www.timothyricks.com/resources/text-stagger-scroll-animations-in-webflow

[@judekolawole7354]

@@timothyricks if you don’t mind, how do I get the custom code for the gsap scroll trigger?

[@timothyricks]

@@judekolawole7354 It’s in the project cloneable :)

[@judekolawole7354]

@@timothyricks Thank you Timothy, I love you 😘 😆

[@JuanRojas956]

The scroll into view doesn't seem to work for me. Anyone else having this problem?

[@jasonstevens9389]

This is great! though I'm having a couple of issues: 1. looks like the script is removing all of my type formatting 2. even though its set to loop: false its still looping Any ideas why?

[@timothyricks]

Thank you! 1. You could try styling the class name of your animation. So like if you’re using the slide-up class, it could have whatever your heading style is. It would be best to style the heading directly with no classes if possible. 2. Please double check that whatever class you’re using, that auto play is set to false under that animation name. There’s about five different ones in there. Also, if you don’t want the text to animate out after it animated in, be sure to delete the animate out part by following the tutorial.

[@jasonstevens9389]

@@timothyricks so good. thank you! REALLY appreciate all of your content.

[@Simon-zan]

Amazing video, thanks! I'm using fade up as a hover animation. But it only plays on the first hover. My JS knowledge is not quite there yet - I'm taking some courses and will figure it out eventually I'm sure, but does anyone know the quick answer?

[@timothyricks]

Right under the line that cues the play, add: fadeUp.restart();

[@Simon-zan]

@@timothyricks Thank you so much man!

[@jessypage2172]

@@timothyricks Hello! It restarts only when you scroll back up to the first title you applied the effect to. If we apply it to other titles, they aren't triggered directly. Please, would you have a workaround for that Tim?

[@patrickrodrigues2892]

Can I only see the result if the site is published? In the toggle preview it doesn't work?

[@timothyricks]

Patrick Rodrigues That’s correct! You can only see the results of JavaScript on a published site in WebFlow.

[@patrickrodrigues2892]

@@timothyricks Thanks, bro! Great video.

[@blakewillette6126]

hey thank you for this video its very helpful. I got the animations working, no problem. The issue I'm having is I can't figure out how to have multiple headings, all in the same place animate in and then out, each one after the other. I thought tweaking delay values would do it, but I cant figure this out. I even took the setTimeout part and tried it in the inview trigger in different ways, and while it seems to offset the start time of the animation, the first element will hold until the second appears and then overlapping, they both animate out at the same time. To be clear, the section I want this for is at the bottom of the page, so the scroll into view trigger has to be the one, and I want 3-4 words to animate in, then out, one after another in the same place using Pop-In. I successfully made a pop-in2, all tags etc. on the second div containing the second heading, and it works, but like I said I can't figure out how to delay it properly so that it comes after the first pop-in animations is completely over. Any help on this would be great! Thanks

[@isabelavdd423]

Hey blake! I am having the same issue. Did you figure this out? :)

[@Fizzy2]

Could you check the link to the code again? Doesn't seem to work for me.

[@timothyricks]

Thank you for the heads up! It looks like snipsave.com/ is currently down. I'll continue to monitor it to see when the site comes back up.

[@timothyricks]

It appears to be back up and working now! I'm sorry for the inconvenience

[@Fizzy2]

@@timothyricks Thank you man, appreciate you helping us out!

[@bryanmanio_]

My text is visible when the page loads at first before the animation begins. Is there a way around this?

[@timothyricks]

Bryan M Yes, there is! Please see the comment thread on this video by Zachary Kendall

[@alekznial]

Hey Bryan did you figure this out. I read the comment above and implement some custom css style but the text just doesn’t appear now.

[@bryanmanio_]

@@alekznial I actually got wrapped up in other things, and I never got around to trying to fix the issue.

[@DreamCatcherAppOfficial]

i don't pay to use webflow so I cant use custom code is there another way i can do this

[@timothyricks]

Yes, it requires a lot more steps, but you could use this kzbin.info/www/bejne/pIjYmZyAgJxgfdk

[@des7638]

These are such awesome tutorials. thank you so much! I dont write code and never will, so-thank you!

[@AntonyNorthcutt]

I love you.

[@samanthavolpe183]

I wonder why I lose my spaces with this.. all my letters are in one line

[@TheSmkfts]

Hey Timothy, you are quickly becoming my fave Webflow youtuber. BTW, I have a tutorial suggestion. How difficult would it be to create a product showcase slider like in this site? (pack 1, pack 2, pack 3... etc): www.gpresets.com/

[@timothyricks]

Thanks so much! I don't see a slider on that page. The list of packs just seem to be standard cards on the page. Am I missing something?

[@TheSmkfts]

@@timothyricks Yeah, if you scroll further down the page on desktop, just under the signup form there's a slider that takes up the full width of the browser and you can navigate between the products by clicking on the "pack" icons.

[@timothyricks]

@@TheSmkfts Ah, I see it now! This can be done natively in Webflow with the Tabs component, but moving the tabs around based on which one is active could be an interesting tutorial.