Rolling Text animation in Framer | Step-by-Step No-code Tutorial

hi guys it's Tony and today we are going to create this rolling text animation in frame let's start by creating our text and we should make sure that the height is set to be fixed and that it's aligned into the middle of the text frame then make sure that there is a little space in top and bottom of the text but we don't want this to be too big so that the animation doesn't overflow then we want to duplicate our text and we want to have a separate individual layer for each of the letters in the text then we want to use the original text as a placeholder and then we are going to put each of the letters on top of the original text when this is done we can delete the original text text layer and now we want to select all the letters and add a frame then we will select the frame and create a component out of it to help us set the animation we want the Overflow to be visible but we will change it back to Hidden later in the video now we want to create duplicates for letters and place them above and below the main letter it's best to use Notch tool to make sure the letter stay inside the frame so use arrow keys and shift to move letters I'm going to speed this up a bit but you can use your imagination in here on how big of an animation you want to create I suggest that you make some variance into the directions and amounts of letters so you can achieve the coolest effect once we have done this to all letters we are going to create a second variant and now we want to move the letters from the top to bottom or vice versa and this will make the letters animate again use Arrow and shift here to make sure that the letters will stay inside the frame and let's speed this up a bit again now we want to go to the first varant and set the Overflow to be hidden this makes sure that there is basically only one letter at a time in inside the box and the ones outside of the box will not be seen then we will set a new interaction between the two varant and make sure that the interactions set to be appear now when we go to the preview we can see that it's actually working and we have a nice rolling animation here if you want to you can go to the Styles menu and change the transition style this way you can achieve different animations now I want it to be a bit more relaxed so I changed the values here and that was it quite simple hopefully you enjoyed the video and you can find the remix link to this file from the description below also make sure that you like and subscribe my channel and if you have any feedback or ideas for the future videos let me know in the comments thanks a lot guys

Channel: Toni Järvinen - Design Tutorials

Views: 32,246

Keywords:

Id: dpWIkVfnd2g

Length: 4min 4sec (244 seconds)

Published: Sun Oct 29 2023