Easy Letter Animations in Webflow

what's up youtube in today's video i'm going to be showing you how to create these really fun text effects in an easy way in webflow so be sure to like uh comment and subscribe to stay up to date with new videos and in the comments below let me know your idea for the next youtube tutorial so i'm going to leave in the description of this video the code that we're going to use and we can just copy that code and head over to our webflow page where we want to add the animation and then in the pages settings underneath the closing body tag we can paste in our custom code and then there's a bunch of different animations that we can use you can customize these to your liking you can duplicate them to add new animations if you want to apply it to different text but you'll see there's the slide in animation slide up there's a fade up there's a pop-in there's a bunch of different ones so the way that it knows to apply a particular animation is it looks for this class of fade dash up so we need to add that not including the period has a class name to whatever we want to animate so by doing that it knows that we want to apply the fade up animation but there's one more step each one of these letters has to be broken up into a span so that way they can be slid in one after the other so for that to happen we have to add another class a combo class of tricks and uh by adding that class it's going to break um all these up so you need the animation name and you also need this class for this to work and once we hit publish we can sort of just preview on the live site what this is going to look like so once we load it up you'll see it each letter kind of slid in one after the other and then it slides out so it did kind of put that all in one line so what we may need to do is duplicate this and we may need to actually take out this line on this one take out that line on that one to kind of force it and it's still going to fade up this line first then this line second so it'll still work that way so once we publish we should be able to test this out and see what it's going to look like all right so on the live site we refresh it slides up yep one after the other and then it slides out so that's perfect um now if for some reason you wanted this to loop all we would have to do is go to whatever animation we're using and in this case it is the fade up animation and then right here under where we first call it we won't need to change loop from false to true and uh then once we save this and publish again and then once we load up the page it should just start looping it should just keep going through it so it fades up and then it should fade out fade up again fade out again so that's definitely an option maybe if you didn't want it to loop and you just wanted it to play once what we could do is under this fade up animation we could set loop back to false and then you'll see in this first set where it says add is that's where it's targeting each letter and making it fade up one by one and then the second ad is where it makes them all fade out um so what we could do is start right here on this line we need to leave this last piece of code in but on this line here all the way up to the line that says add we just delete all that and then this will just make it only fade up and then it won't fade back out so on the live site once we go ahead and publish we can come over here and refresh so now it fades up and then it won't fade back out the text will just stay in view so you can do that for any one of these animations say i wanted to reuse this fade up animation in another place um like maybe i wanted this text to also fade up uh i can't use this exact same fade up class because it's going to count it all as one animation and it'll wait till these two lines have animated before it animates this one so what i could do instead is um i would have to duplicate the whole fade up animation and that is right so it starts right here and then it ends right there you can look up this uh in the comment where it says fade up that's what we'd need to copy so i can copy that i can create a new line and i can call it fade up animation 2 and then i'll just replace everywhere that says fade up this variable with fade up two fade up two even the class name will need a change to fade up too and then where we play it which is down here towards the bottom these are all the things that actually play the animation so we have one called fade up i'm just going to copy that one and then make fade up two and that will play it and we'll hit save so then this one again is going to need the class of fade up 2 this time so fade dash up 2 and then it will need the class of tricks to split it all up so now when we publish this it should animate uh both of those for us so let's see refresh yep and they're all fading up so it is kind of funny how it's like sliding uh you can see the text it's running into the text underneath it so one thing we could do is actually set the overflow to hidden on any one of these like if we set the overflow to hidden and it's going to kind of create like a whole new look so it'll actually just crop the letters outside of this box and it'll make them slide into the box so we're not going to get that overlap effect and you can do that with any one of these text animations that i have in here so you see it kind of just crops yep just crops it just like that so that looks pretty good um there's a lot of ways we can play the animation so we don't have to make the animation only play when we load the page there's a lot of different things we can do and so we can first of all we can delay the animation so it doesn't start right away so like this fade up to animation down at the bottom we just create it i can copy that play delete it from here and then i can put it inside this timeout thing so it says wait before playing your animation put the play below this line so i'm going to create a new line below this line and i'll make it wait to play fade up 2 and it's going to weight 800 but i can adjust like if i wanted to wait a thousand or how long do you want it to wait before it starts playing that animation so now if we publish and we go back to the live site we should see this headline will play instantly but this one will wait a little bit before it plays just like that yep and we may need to set its opacity to zero initially or do something to where we're not seeing it but it is delaying like we would expect so that is looking pretty good another thing we could do is make it to where any time we hover over something it plays in the animation so like say anytime we hover over the hero message class right here we would want to play this fade up animation inside so what we could do for that is there's a separate trigger and that is if down here um i have one for play animation when hovered in so this is class is the class of the thing you want to hover over so in this case it's my c hero message then all i have to do is remove this fade.play from here and then i'll just put it under the see hero message line here so whenever i hover over c hero message it'll play our fade up to animation so i'm just going to go ahead and publish this and we can test it out so back on the live site this plays instantly like we would expect but now whenever i hover over this card this animation plays just like i would expect so that's looking great one other thing we could do is one click so i could make it to where anytime i click on that card instead we would it would play that animation and to do that i would just change this c hero message this class needs to be on the click class up here and then you can duplicate these so you could copy this whole block if you wanted to have multiple click animations and just use a different class for the second one if you'd like but um we can make it where whenever we click on this it plays the animation instead of hover based so we'll go ahead and test that one out too so you can have one page load one mouse hover over an element or i'm going to go ahead and click and it slides up the last one that we can have is whenever we scroll into view of an element so like let's say that maybe this heading here i would want it to animate once it scrolls into view so for this one we're going to need a container actually around the um heading that we plan to animate so i'm going to drag in a div block and i'm going to wrap it in here and then it's going to need a class so i mean it's going to need an id so we can call it a text container for our id and then basically what that's going to do is say whenever it scrolls into view this div scrolls into view text container play in animation so for the animation let's try a different one there's a bunch of them we could try um let let's uh do the let's do pop-in so we'll do the pop-in animation so we'll grab this pop-in and we'll go over to this when scrolled into view and then so we'll put it under this line we'll play the pop-in when we scroll into view of the text container id i believe is what we called it so let's save that and let me just make sure this was text container yeah perfect so then for this we're just going to need to give it that class of pop dash in and then for here we also need to give it the class of tricks so it knows to split up the letters so i'm going to go ahead and publish that and we can test it out so back on the site on the live site this fades in instantly this fades in once i click i can scroll down and then this one won't play until i yep right there until i scrolled into view i can refresh to test it again i scroll into view and it plays so um that's everything for creating these text animations i hope you've enjoyed this video

Channel: Timothy Ricks

Views: 22,472

Keywords: anime.js, text animations, webflow, how to, tutorial, lesson, letter, letters, letter animation, javascript, jquery, custom, animated, interactive, interactions, move, slide in, slide up, animate, unique, stagger, page load, sentence animation, text animation, font animated, fun

Id: xiAqTu4l3-g

Length: 11min 19sec (679 seconds)

Published: Fri Oct 23 2020

Reddit Comments

[u/peshroo]

do you think I’d be able to apply the same code to animate (fade up, down, on scroll, etc.) pictures in a div/container?

[u/wildkarrde]

Just randomly googled this subreddit, and have gone down a rabbit hole of your youtube channel. Thanks so much for all of this!

[u/bonespenguin]

Amazing dude thanks so much!

[u/nightsky_]

Hi, thanks for sharing your knowledge! :)

Is it possible to animate only a single word in the middle of a sentence?
Moreover, I'd like to animate a word IN and after a certain while OUT again, so there's a blank space left again in the sentence. This blank space should be filled with another word that animates IN and OUT again. And so on.

What I try to do here is to make something like a ticker, imagine a tag line
"Your next travel destination [...] "
and the [...] then shows different cities (e.g. London, Paris, Rom, etc) looping one after another.