Animations

Using the Appear Effect in Framer (Animation Lesson 6)

Using the Appear Effect in Framer (Animation Lesson 6)

Using the Appear Effect in Framer (Animation Lesson 6)

Joseph

·

6:30

·

19K views

·

Aug 5, 2025

About this lesson

When a visitor lands on our site, their browser will abruptly display elements on the screen as soon as they load.

But, using the Appear Effect, we can guide our visitors’ attention with smooth, timed entrances that let us unfold the story to the visitor in exactly the way we want. In this lesson, we’re looking at how the Appear Effect in Framer let’s us choreograph how and when elements entering canvas in just a few clicks.

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

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=7s What is the appear effect?

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=27s Why use it

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=50s Adding the appear effect

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=75s Adjusting direction and offset

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=102s Customizing delay and duration

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=131s Previewing the animation

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=156s Using appear on a component

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=188s Why it works this way

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=211s Overriding direction and delay

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=252s Staggering with delay

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=279s Setting delay per child

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=306s Building your own stagger

https://www.youtube.com/watch?v=iHEgKwxpc2k&t=334s Recap and wrap-up

Sign up: https://framer.link/yt

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

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

0:00When a visitor lands on our site, their 0:02browser will abruptly display elements 0:04on the screen as soon as they load. But 0:06using the appear effect, we can guide 0:08our visitors attention with smooth timed 0:11entrances that let us unfold the story 0:13to the visitor in exactly the way we 0:16want. In this lesson, we're looking at 0:18how the appear effect and framer lets us 0:20choreograph how and when elements enter 0:23the canvas in just a few clicks.0:26[Music]0:28Again, for this lesson, we're going to 0:30be using that same project file that we 0:32used in the last couple of lessons. So,0:34if you don't already have that, head to 0:35frame.com/academy 0:37and grab the remix link from below the 0:39video on the lesson page for this 0:41lesson. So, in this project here, we 0:43have a few elements that appear above 0:45the fold, so to speak, meaning we can 0:47see them as soon as the page loads 0:49without having to scroll. We've got an 0:52icon here that's in a little frame, and 0:54we've got a text box here, a text box 0:56here, and we also have the navbar. We 0:57could even animate that if we wanted to,0:59but for this lesson, we're going to 1:00focus on the icon here. And then maybe 1:03we'll slap a couple animations on these 1:04frames. But I do want to tell you when 1:06it comes to text, we do have dedicated 1:09text effects, which we're going to talk 1:11about in a later chapter of this course.1:14So, let's start with this little 1:15lightning bolt icon here. I'm going to 1:17select the parent frame that has the 1:19lightning bolt icon in it. I'm going to 1:21come over to the properties panel, click 1:23effects, and I'm going to choose to add 1:25the appear effect. Now with the trigger 1:27set to on appear, we're working with the 1:30appear effect. If you change this,1:32you're working with kind of a different 1:33effect altogether. You're going to be 1:35triggering something on scroll. We're 1:37going to talk about that in the next 1:39chapter, but in this chapter, we're 1:41going to focus on the onappear option.1:43So, we want to stick with that. Then, we 1:45get to choose from a list of presets. If 1:48we don't want to fiddle around with 1:50custom settings, we can just choose to 1:51have this fade in, scale in, scale in 1:54from the bottom, flip horizontally, etc.1:57I'm going to start with scale in cuz I 1:58want something like that. We don't have 2:01to stick with the defaults associated 2:03with one of these presets. You can start 2:05with a preset and then we can tweak it.2:07So, if any of these sounds even close to 2:09what you're trying to do, grab the 2:11preset and then customize it afterwards,2:13like we're about to do here. So, when we 2:15head down to the enter effect, that's 2:18where we get to dial in what this layer 2:20is going to look like before it 2:23transitions in. Where's it going to come 2:25from? So, it's going to come from 0%2:27opacity. It's going to come from a scale 2:30of 0.5 or 50% of its original size. And 2:33what it's going to transition to is the 2:35way it appeared on the canvas before we 2:37added this effect. It's going to come to 2:39rest at its normal appearance, so to 2:41speak. Now, I'm going to leave the 2:42opacity alone because I do want this to 2:45fade in. But as it's fading, rather than 2:47going from half of its original size to 2:49its original size, I want it to start a 2:51little bit larger than its original 2:53size. So, I'm actually going to go up to 2:551.3 or 130% of its original size. And 3:00I'll leave everything else alone. And 3:02let's just fiddle with this transition 3:04here. Rather than having a spring, I 3:06want this to ease out nicely. I want it 3:08to come in at full speed and then ease 3:11out. and come to rest very gently. So,3:13I'm just going to switch the easing 3:14curve here to ease out. And just to make 3:17things a little more dramatic and make 3:18it easier for us to see, I'm going to 3:21increase the duration of this to one 3:23full second. Cool. So, now I'll hit 3:26command P on my Mac to go into preview 3:27mode. And there we have it. As soon as 3:30the page loads, I'll hit commandR to 3:32refresh this. That icon now goes from 0%3:35opacity to its original opacity. and it 3:38goes from 1.3 times its original size to 3:41its original size. So, it kind of scales 3:43down and fades in together. But let's 3:46make this look even more 3:47three-dimensional. Let's have the icon 3:50sort of leap out or look like it's 3:53closer to the camera in 3D space. And to 3:55do that, we want it to be bigger at 3:57first before it comes to rest at its 3:59original size. So, I'm going to go back 4:01here. I'm going to select the icon 4:02itself. And again, the icon's already 4:04being transformed by the appear effect 4:07that's on its parent frame because it's 4:09inside of its parent frame. It goes with 4:11the flow of its parent frame. But we can 4:13stack another effect on top of that. So 4:15I'm going to click effects. I'm going to 4:17choose appear. And similarly, I'm going 4:20to go with the scalein effect even 4:21though I'm going to change it anyways.4:23And for this one, I'm going to increase 4:25the scale all the way up to 1.6 4:29just to be extra dramatic with it. And 4:31then the transition, I'll make it match.4:33I'll set our transition here to ease.4:35And then again, I want it to ease out,4:37which means come in at full velocity and 4:40then slow down gradually at the end. And 4:42I'll make this the same 1 second 4:44duration. So let's preview this with 4:47command P. And there we go. Slightly 4:49more 3D, slightly more dimensional.4:52We've got the icon starting a bit larger 4:54than its parent frame. And that gives us 4:56a bit of added depth there. And now,4:59even though we do have those dedicated 5:00text effects that we're going to talk 5:02about later in this course, a text box 5:04is still technically an element. So, we 5:06can add an appear effect to the text box 5:08itself. We get more granular control 5:10when we use text effects, but again,5:12we're talking about those later. So,5:14let's head back and I'll just slap a 5:16couple of appear effects on these text 5:18boxes. I'm just going to hold shift so I 5:19can select both of these at the same 5:21time. I'll click to add an effect. I'll 5:23add an appear effect. And for this, I'm 5:26just going to leave it on the basic fade 5:28in, which if you wanted to dig into 5:30those settings, you could see everything 5:31is left alone except opacity. Opacity 5:34just starts at zero. And then for the 5:36transition, I'll do the same thing. I'll 5:38do the ease and then set it to ease out.5:41And then what the heck? Let's be extra 5:43dramatic and make this a 2C duration.5:46And there we go. Our icon comes in twice 5:48as quick and then that text comes in a 5:51little bit slower, which looks 5:53surprisingly even. But then again, this 5:55text is going from black to pure white.5:58So having that extra time kind of 5:59smooths out that massive increase in 6:01luminance. And there you have it. Appear 6:04effects bring our content and layouts 6:05into view in a way that feels smoother 6:08and more thoughtful. It's a simple touch 6:10that gives your designs a sense of life 6:12and flow. And it's sure to make a strong 6:15first impression. That's it for this 6:17one. I'll see you in the next one.

TeachesAppear Effect

Also coversFrames Links Remix Links Scroll Animations Stacks Text Effects Transitions & Easing

Watch on YouTube ↗

‹ Framer Event — Introducing On-Page Editing

Framer Marketplace: Introducing Components ›

More in this topic

Framer Update: Logo Shaders

Framer Update12K views · 1 month ago

Framer Update: Holo Shader

Framer Update: Holo Shader

Framer Update6K views · 2 months ago

Shader: Chromatic Aberration

Shader: Chromatic Aberration

Framer Update7K views · 2 months ago

Announcement23K views · 2 months ago

Framer Update: Flow Effect in Layout Templates

Framer Update: Flow Effect in Layout Templates

Framer Update10K views · 3 months ago

Building an Expanding Article Stack in Framer

Building an Expanding Article Stack in Framer

Animations4K views · 4 months ago

Scaling a clipped image on hover in Framer

Scaling a clipped image on hover in Framer

Animations7K views · 5 months ago

Making elements revolve in Framer

Making elements revolve in Framer

Animations5K views · 5 months ago

Create a free website with Framer, the website builder loved by startups, designers and agencies.