Framer Tutorial: Creating A Text Cycle Animation Loop

in this video you are going to learn how to create this text cycle component in framer without writing a single line of code my name is nandy this is framer University and let's get [Music] started so as you can see here we are in framer and we already have a little document set up but it is nothing crazy we just have a text slider stack and within that stack we have this text and this text is set to horizontal Direction and The distribute is set to start so this text is on the left side of this stch so what we need to do is to basically duplicate this text here and write slides here so now we have this uh slides text here which is basically a separate text layer and this is going to have a white color and yeah uh if you are doing it for yourself make sure that this deck has a gap which is basically kind of the same size that we have here in this text which is around 19 pixels in my case so yeah basically that's all we have to do here and now we can make a component out of the slides text because we are going to be creating uh different variants and connecting them with inter ctions to create the text cycle component so now we can press option command K and this will create a component for us I'm going to just give it a name that is words and then hit enter on my keyboard so now we have this uh component canvas view basically here what we can do is we can duplicate this text here a couple of times but before that I'm going to turn this into to a stack because it isn't so I'm going to select the variant one and give it a layout so now it is perfectly turned into a stack and I'm going to set the width to fit content and the height to fit content as well so if I for example change the text here the frame size will also adapt to it so now I can duplicate this four times if you want to have more text you can duplicate it more times but in this case we're going to only have three text but we need to have four text in order to do a text cycle component with three texts the reason for this is quite interesting but I'm going to talk about it a little bit later so we have all these right here now and we can just rename these texts so this will be text one this will be text two text three and the last one will be text text one second so the last one will basically be the same text as the first one so now what we're going to do is we're going to select all of these texts here so the text two and text three and the text one second and we're going to set their position to Absolute so now they are absolutely positioned we can move them around freely I'm going to set the left pin to zero and I'm going to also activate the bottom pin and now we cannot see them and that's because this variant's overflow is set to Hidden so we're going to set it to visible and now if we move these down with the arrow keys you can see these separate layers here so I can just place them right below each other so the text two will be basically here under the text one the text three will be below that and the text 1 second will be below that so now what we can do is we can go into uh the variables and change the texts on each so text two will have a different variable so we're going to create a new plain text this will be title two and it will say moves so as you can see we have now slides move moves and the third one will also have a new variable title three and this will say e cool and then the last one will be basically the same as the first one so we can leave the title variable there now we can add multiple variants to this component so I'm going to add another variant this will be variant two and here what I'm going to do is I'm going to select the text one set its position ition to Absolute so I can move it around freely I will set the left pin to zero and then also I'm going to activate the button pin and then by adjusting this value I'm going to move it here to the top and then I'm going to select text two I'm going to set its type to relative so now it jumps into the frame and I will just select these text here and move them up so basically what will happen is if we go from variant 1 to variant 2 these texts will move up I can also show that to you so if I connect these with an appear interaction and we wait a little bit here you can see that after waiting 1 second it goes up so yeah we can now add another variant which will be variant three and I'm going to basically change the text to Absolute and then set the left pin to zero then select the text one and the text two move them up then the third text will be relative so it jumps in place and then this will be right here and then we can add the last variant we move everything up again so this will be absolute left pin is zero then we move these to the top like this and this will be relative so now we have all these Texs and they are moving up with each variant and so here is the part where I'm going to explain why we have these slides two times so if we would do three text and we would only use three text in the component so we wouldn't have a fourth one we would basically go like this so we go from variant one to varant two by moving up then we go from variant 2 to variant 3 by moving up again and from here to go back to this we would need to animate all these back and then go again to the top I can also show this to you by just showing this bad version of the component so as you can see it starts moving up but then to go back to the variant one we need to animate all the text back to the bottom and we actually can see that animation and that doesn't really look great because we want to show like an infinite cycle Loop that always goes to the top so that's why we basically use that helper uh text layer which is basically the slide one more time here at the bottom and that's the variant for and what we can do with this is basically we can animate from variant 4 to variant 1 with an instant transition which will basically mean that we transition from variant 4 to variant 1 so these text layers go back into their position but we didn't really you know notice anything because we were displaying slid and we are displaying slides here as well and we just go with an instant transition so yeah basically that's the trick so now what we can do is we can connect these with appear uh effects at the first one we're going to wait 0.5 and then from here we're going to go with 1 second delay from here we're going to go with 1 second delay and from variant 4 to variant one we're going to go with 05 delay again and as I said we want to go from variant 4 to variant 1 with an instant transition so we're going to set the variant On's transition to instant and then we're going to set back all the other variants transitions to spring so now if we take a look at this you can see that they start moving up but it stops here it's probably because here it has tap uh trigger so I'm going to set it to appear so now everything has appear trigger so now as you can see it moves up perfectly and I can also inspect it here on the homepage but as you can see uh for some reason it it's kind of weird because as they move up the text goes to the left that's probably because we have to set the component here to fit FD and fit height so now if I take a look again and as you can see it works perfectly so now all we have to do is to basically only show the text that is in the frame so all the rest that we see for example right here will be hidden in this case this will be hidden and we will show this one I'm just basically changing the opacity of these text layers making sure that only the one in the frame is visible so now if we take a look at this you can see that we have a text cycle uh effect that is working perfectly and because of the uh variables that we implemented we can easily change the text for each of the title so for example we can say say uh framer and three so now if we take a look at this the text is changed changed and we still have the nice Tex cycle animation and yeah basically that's it for example here if we want to have a smaller text size we can also add um a variable for the text size property so we can select all the text layers and here for the text size we can C create a phone size variable and here we can change this text also so to a little bit smaller maybe 42 and this can also change to 42 and then we can make sure that the direction is horizontal and then a little bit more Gap here to match this space right here so now as you can see it is nicely optimized for mobile as well so yeah basically that's how you create a TX cycle component for your framer website without writing a single line of code if you want to see more resources for framer go to framer University because I have more than 100 resources there all completely free and I think those can help you learn framer make sure to like this video And subscribe for more and I'm going to see you in the next [Music] one

Channel: Framer University

Views: 4,542

Keywords: framer, framer tutorial, framer website, framer template, no-code, no-code website, website builder, website animation, framer university, no-code text animation, text cycle loop, text cycle animation, text cycle framer, text loop animation, text animation website, website text animation

Id: 7cbOQBVmvVU

Length: 12min 27sec (747 seconds)

Published: Fri Jan 05 2024