Animations

Animating text in Framer (Animation Lesson 17)

Joseph

8:37

16K views

Oct 14, 2025

About this lesson

Animated text can add drama, energy, or rhythm to your message.

In this lesson, we’ll explore the Text Effect in Framer and how to bring those headlines, bullets, or even body copy to life.

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=0s Intro

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=62s Add the text effect & choose triggers

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=79s Presets and per-character/word/line options

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=165s Customizing the effect

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=252s Previewing the heading animation

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=289s Animating the paragraph

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=382s Comparing per word vs per character

https://www.youtube.com/watch?v=yxQhLc1AsdY&t=487s Wrap up

Grab the remix link on Framer Academy: https://www.framer.com/academy/lessons/framer-animations-text-effects

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00Animated text can [music] add drama,0:02energy, or rhythm to your message. In 0:05this lesson, we'll explore the text 0:06effect in Framer [music] and how to 0:08bring those headings, bullets, and even 0:10body copy to life. [music]0:15To add a text effect in the first place,0:17we just need to make sure that we have a 0:19text layer selected. Otherwise, it won't 0:22even show up on the properties panel.0:24So, hopping into our project file here,0:26I've got a text box with a heading, and 0:28I've got a text box with some body copy.0:30I'm going to start with the heading. And 0:32with this text box selected, we can just 0:34come over here to the properties panel,0:36click on effects, and because we have a 0:39text layer selected, we see the text 0:41effect as an option. If I click on that,0:44I get the popover with some familiar 0:46settings. We get trigger where we get to 0:48choose from on appear, layer in view, or 0:51section in view. So essentially, we've 0:53got our appear effects for text and 0:55we've got our scroll effects for text 0:57all built into this one effect that 1:00shows up in this one popover. Since the 1:02text I have here on this page is above 1:04the fold, meaning we don't have to 1:06scroll to see it, I'm just going to do 1:08the onappear trigger. So that way the 1:10text effect happens as soon as the page 1:12loads. And then we get some preset 1:15animations to choose from. We have 1:16things like blur, flip, shake, etc. I'm 1:19going to stick with blur as my starting 1:21point. But then arguably the most 1:24important property here for text effects 1:26is that we get to decide if we want to 1:28animate per character, word, line, or 1:32element. So with this set to character,1:35you can see in the little preview above 1:36that our blur effect is happening to 1:39each individual character with a little 1:41bit of a stagger between each character 1:44animating in. Depending on which option 1:46you choose here, you might also notice a 1:49slight difference in the kerning between 1:51some of the characters depending on 1:53which font you're using. For example,1:55here if I set character, we've got a 1:57little bit more kerning here between the 1:59T and the E. But if I set this to word,2:02we don't. And that has to do with the 2:04way the text is being diced up behind 2:06the scenes to make the individual pieces 2:08animate. But it's just something to be 2:10aware of. It's not really a problem.2:11It's just if you notice it happening,2:13that's why. But for this heading, I'm 2:15actually just going to do the whole 2:17element all at once. But we'll play with 2:19some of these other ones for the body 2:20copy down below since we've got more 2:22content to work with. And then the next 2:24property we have is to customize the 2:26effect if we don't want to go with the 2:27defaults of the preset that's chosen.2:29And then we have delay, which is the 2:31initial delay before the whole animation 2:33starts. There is another delay. We'll 2:35get to that in a second, but this one 2:36here is the initial one-time delay 2:40before the whole animation begins. But 2:42now let's get into customizing this 2:44effect a little bit. Just like the 2:46appear effects that we apply to normal 2:47layers, we get a list of properties that 2:50we can animate. And by default, this 2:52blur preset that we started with is 2:53going to have the opacity go from zero 2:55to one. It's going to have the scale 2:57start at one and end at one. And I'm 3:00actually going to change this. I want 3:01the text to kind of look like it's 3:03coming into focus and moving in just a 3:06little bit. So I'm going to set this to 3:08a scale of 1.2. And up here in the 3:10preview, we can see what that looks 3:11like. like the text kind of floats in 3:13and lands and comes into focus as it 3:16moves into place. And then down here we 3:18have the actual blur amount. I'm going 3:20to leave it at 10. I think that's plenty 3:21of blur. And then we have a Y offset of 3:2410 pixels. And that's just going to push 3:26the text down by 10 pixels at the 3:28beginning of the animation. So that way 3:29it moves up just a hair as it comes to 3:32rest. And then last but not least, we 3:34have our transition, which is currently 3:36set to spring, which is fine, but I do 3:38want to slow this down a little bit.3:40Rather than point 4 seconds, I'm going 3:42to do two entire seconds here. And then 3:44I mentioned before that there is another 3:46delay. This delay here is that stagger I 3:49was talking about between characters,3:51words, or lines. But because we're 3:53animating this H1 heading as all one 3:55single element, this delay is actually 3:57irrelevant. But we'll come back to it 3:59when we do the characters in the 4:00paragraph of text below. Cool. So, I'll 4:03just go back one step and I'll just 4:04check the little preview here. And there 4:06we go. We get something a bit more 4:07gradual and dramatic. But let's actually 4:10preview what our text looks like by 4:12pressing command P on my Mac to go into 4:14the preview window. And it played real 4:16quick there. But I'll click reload in 4:18the top left corner here to make that 4:20play again. So, you could see we get 4:21that blur, that 10 pixels of blur. We 4:24get that 10 pixels of Y offset. So, the 4:26text rises up just a little bit as it 4:28comes to rest. And that gives it a bit 4:31more of that 3D effect because it looks 4:33like it's traveling through space before 4:35it comes to rest on the page. Now, let's 4:37do that little paragraph of text down 4:39below because there's a lot more content 4:40there for us to work with. So, I'm going 4:42to leave preview mode. I'm going to 4:44select this text box, head back over to 4:46effects, and again choose to add the 4:48text effect. And again, for this one,4:50I'll keep it triggered on appear so that 4:52it plays as soon as the page loads. I'm 4:54going to run with that blur preset 4:56again, but this time let's compare per 4:58line, per word, and per character. I'm 5:00going to start with per line. And I 5:02don't want any delay on this, but I am 5:04going to go into the effect so that way 5:07I can get into the transition and slow 5:09this thing down. But what I'm slowing 5:11down is each line of text. So, I don't 5:14want to slow things down too much. But I 5:16am going to go with a time just above 5:18half a second at 0.6. And I'm going to 5:20leave the default delay alone just for 5:23now at 0.05 seconds, which again, this 5:26delay is the stagger between the 5:28individual lines that are going to 5:29animate in or the words or the 5:31characters depending on how we have our 5:33settings set. But we're starting with 5:34lines. So this is a 05 second stagger 5:37between the first line, the second line,5:39and the third line. So let's actually 5:41see what that looks like. I'm going to 5:43press command P again on my Mac to go 5:45into preview mode. And there we go. I'm 5:47going to play that back cuz it happened 5:48kind of fast. But you can see that the 5:50first line, the second line, and the 5:52third line have an ever so slight 5:54stagger between them as they come into 5:57view. So let's go back. Let's make the 5:58stagger a bit more dramatic. So again,6:01I'm going to go into the effect so that 6:04way I can get to the transition so that 6:06way I can make a more drastic decision 6:08here. I'm going to go way drastic 2,6:11which is four times longer than it was 6:13before. And I'll go back into preview.6:15And there we go. Now you can really see 6:17the stagger between those lines. But 6:20let's see what animating by word looks 6:22like. So I'm going to go back into the 6:23popover and I'm going to set per instead 6:26of per line. I'm going to go to per 6:28word. And again, let's preview this and 6:31see what it looks like. So you can see 6:32with the same stagger, this animation 6:34does take a lot longer to complete,6:37which makes sense because there are many 6:38more individual words than there were 6:40individual lines of text. and we're 6:42applying the same animation settings to 6:44each of those individual words as we 6:46were to the very few individual lines 6:48that we had before. So, let's push this 6:51even further. I'm going to head back to 6:52the popover one more time and I'm going 6:54to set this on per character instead of 6:57per word. And you can see in the preview 6:58that we get that staggered effect 7:00between each and every individual 7:02character. And if we preview this, this 7:04is going to take a whole heck of a lot 7:06longer to complete because now we've got 7:08a relatively long delay staggering each 7:11of these individual character 7:12animations. So, let's definitely speed 7:14that up. I'm going to go back one more 7:16time and head back over to the text 7:19effect popover. And then down here, I'm 7:21going to go back into the effect so that 7:23way I can get back to the transition so 7:25that way I can access the delay. And I'm 7:28going to go even quicker than the 05 7:30default that we had originally. And I'm 7:33going to set this to 02 because we've 7:35got a lot of characters to get through.7:37And I'll add a little bounce while we're 7:39here. Why not? I'll add a little 6 of 7:42bounce to make this slightly more 7:44expressive and fun. And press command P 7:46again to go into preview mode. And there 7:48we go. We got our big heading that's 7:49coming in slowly and dramatically like 7:51it's got a bit of weight to it. And then 7:53we got the paragraph below coming in 7:54character by character, but with such 7:56little stagger that it's a very fluid 7:59animation. And the lines look like 8:00they're just getting painted in one 8:02after the other after the other with 8:03that little bit of playful easing that 8:05we get from the bounce. And there you 8:08have it. Now you know how text effects 8:10can reinforce a message letter by 8:12letter, word by word, line by line, or 8:15all at once. Just don't forget that text 8:18is for reading. So use a bit of 8:20restraint. A little motion goes a long 8:22way. That's it for this one. I'll see 8:25you in the next one.

TeachesText Effects

Also coversAppear Effect Semantic Tags Stagger Transitions & Easing Typography

Watch on YouTube ↗

‹ Introducing Vector Sets on the Framer Marketplace

Setting Up custom cursors in Framer (Animation Lesson 16) ›