How to Create a Scrolling Text Animation (Infinite Loop) - Webflow Tutorial

i just finished up a website for a client and i placed a pretty cool animation on one of the sections which i like to call an infinite loop text and in this video i want to give you a step-by-step tutorial on how you can create something like this on webflow what's going on everyone my name is rr abroad and welcome back to webflow wednesdays and today we're gonna get right into the tutorial of what i like to call the infinite loop text so let's hop right into it so the first thing we want to do is go ahead open up our handy dandy webflow designer and let's go ahead and add our stuff first let's go ahead and add our elements and then we'll teach you the animation it's so easy i was so surprised how easy it was so we'll go ahead and add our elements let's first of all add a section that's just me i like to add a section right away well no go ahead and name this section section all right and then we'll go ahead and add some stuff inside this section and these are really key so first of all we're gonna add a div block inside this section and we're going to name this loop text outer now we're going to have two containers okay a loop text outer and then we're going to add another div block inside this container which we're going to call loop text inner and real quick i want to put uh padding on this section just so it looks a little bit decent now you may say why do we need these two dibs well it's really simple the loop text outer is the container that's going to be shown in your computer screen and then the loop text inner is the container inside that box that's going to be moving left to right so think about if you were to have the screen but then a box is going this way and that box inside that box is going to be your text okay so let's go and add some text into this first and we'll get right to the animation it's going to be so easy so go ahead and press the plus button and then we'll do a heading inside here i'm going to call this heading h1 that's where my coding comes in i'm just kind of used to that and let's put some def uh let's make it a little better let's put montserrat bold a little bigger let's make it 60 and a 60 height a little taller there you go now we're going to add some text here um i'm going to put i'm a laker fan we're in the finals right now by the way 3-1 we just won tonight so you might say you may see that i'm so happy because we literally just won tonight and we're up 3-1 against the heat and the theme of the lakers right now is called leave a legacy so we're going to have this text here and what we're going to do we're going to duplicate this text multiple times now before we do that i want you to get this this is super key this is important because if you don't do this you're going to mess this up you're going to be wondering like how come i'm getting this wrong go to the uh style tools go all the way down where it says the text section and i want you to go over to where it says breaking okay go to breaking and i want you to go and select that and put no wrap no wrap meaning it's not going to follow the rules inside the body and you know right now with text which is what we want a lot of times websites if the screen size or the browser size were to me to become thinner the text automatically moves on to the bottom right that's breaking but we're not going to allow breaking because we want the text to bleed out to uh outside of the um the container so let's go ahead and copy this and duplicate it multiple times oops one thing that we forgot to do i forgot to mention that go ahead and click the loop text enter and we're going to make this into a flex box let's make it centered so that when we add different elements they're all right next to each other right so go ahead and add our elements there and we'll do one more for good measure now as you notice the other texts are outside right that's what we want that's what we want so go ahead and go to loop text enter well let's add some uh margins to the right let's add maybe 20 pixels to the right it's a little more spaced out right and this one's important as well now when we get to loop text outer what we want to do is we want to make sure that the width is 100 so go to width click 100 and then you want to make sure you do this on overflow you put none okay because if we were to show the overflow then if you had a browser there you'd be able to scroll to the right and see the rest of the stuff bleeding out which you don't want so you want to put overflow none and so now we have our elements ready and really there's only one small step is we want to go ahead and put the section as we want to go and put the animation okay you're gonna be amazed by how easy this is so once we do that go ahead and click the container loop text enter because this is the one that we're gonna animate this is the one that's gonna move inside the loop text outer go ahead and go this go to our animation tools and go to page trigger get the plus button and go to page load okay because you want it to move automatically now you have different ways you can do it you can make it where it's moving as you scroll but this one's gonna make it move automatically so one go to action on when page starts loading select that and click start an animation now as you can see i had it ready but we're gonna start over so that you get it step by step all right so we're going to press the plus button and we're going to call this loop animation now with the loop text inner container selected go ahead and click the plus button and we're going to click move okay now let me move myself out of the way so you can see the screen here and what we're going to do on loop text in as we have that we're going to set that as the initial state and on this part right here we're going to put 0vw meaning zero viewport the default state is the state it's in right now and then we're going to add one more click that one again press move and this is going to be our animation so this is very important you want to make sure the duration is zero now the reason for that is this if you have a duration what happens is this when the animation is done it's gonna go it's gonna animate going back like this so it's almost like a typewriter where it's like it's like scrolling this way and then it goes back and goes like that which you don't want you want to put uh you want to make it put the illusion that it's infinitely scrolling okay so we want to make the duration zero we want to make the loop automatic um that'll happen right away and then on the move part what you're gonna do is um on this one you're gonna just move it to the second okay you're gonna move it to the second word where it seems like it's still it's it seems as if um it hasn't changed the look that's why we added more stuff on the right side here the leave a legacy so that when we move it it's it creates the illusion that it hasn't moved okay so we're just going to move it to the left until we get the right spacing and i think well we we want to do vw not pick uh pixels so we want to make it say 30 vw okay now that we have it on vw we're able to move better there we go so it starts out at zero vw which looks like that so we want to move it to the left where it looks a little bit similar perfect there we go so 0 25 and i know it's a little bit different but it's fine you used to have the illusion there you want to be exact you can do like 25 point whatever okay actually on the duration here i made a mistake i apologize on the duration go ahead and click that and let's put uh 10 seconds so this is gonna be how long the scrolling will be how long it takes to go from here to here okay now we're gonna add one more now this is when it goes back to the default position go there and go to the move and we'll go once again put zero vw so we have 0 25 negative 25 and a zero now this is the part where i said you need to make the duration zero because this is the animation that the first part is the animation that shows you it shows it moving but the last part is animation where when it's done it goes reverts back to the beginning so we're going to make the duration zero go ahead and press save so make sure you do that to duration zero and then go ahead and click the loop because we want it to keep playing over and over again now we're going to preview this fingers crossed hopefully it works here we go count to 10. and bam did you see that the animation actually finished and repeated but you didn't notice it on the website itself which now creates the infinite looping illusion looping text whatever you want to call it i hope that tutorial was helped to you and let me know if you put that on your next website well thank you so much for watching that tutorial if you're new to our channel my name is rr abroad and i'm the founder and creative director at abbar creative and we create websites for mission driven organizations and we specifically use a tool called webflow and i hope that you enjoyed that video i hope you learned something from it if you did would you do me a favor and click that like button that helps us bump up the video in the youtube algorithm and make and helps people to be able to find it and then also consider subscribing every wednesday we come out with webflow tutorials and also we come up with tips as far as how to be a web designer we come out with videos about getting clients how you can get website jobs and grow your freelance web design business well until next time guys i hope to see you and hope to remember that you remember to always keep learning peace

Channel: RR Abrot

Views: 7,014

Rating: 4.9125681 out of 5

Keywords: build websites without code, building a responsive website in webflow, how to build websites without code, how to create a website for business free, how to learn web design for beginners, how to make a website for free, how to make a website for free 2020, how to make a website for free and earn money, how to make a website for free for small business, no code web development, no code website, webflow tips, website no code, website tutorial from start to finish, webflow tutorial

Id: zquun0Dzssw

Length: 11min 26sec (686 seconds)

Published: Wed Oct 07 2020