Animations

Adding animated effects at the component level in Framer (Animation Lesson 12)

Adding animated effects at the component level in Framer (Animation Lesson 12)

Adding animated effects at the component level in Framer (Animation Lesson 12)

Joseph

·

3:11

·

8.7K views

·

Sep 9, 2025

About this lesson

By adding animation effects at the component level, we can ensure every instance of that component shares exactly the same polish. In this lesson, we’ll combine what you know about components with the Appear Effects we learned about at the beginning of the course. Animating at the component level keeps your design consistent, your workflow efficient, and is a great way to scale polish across your whole project.

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

https://www.youtube.com/watch?v=2OXLc3F00T8&t=18s Setting up component instances

https://www.youtube.com/watch?v=2OXLc3F00T8&t=80s Applying appear effects to a component

https://www.youtube.com/watch?v=2OXLc3F00T8&t=137s Previewing instances

https://www.youtube.com/watch?v=2OXLc3F00T8&t=167s Wrap up

Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-animations-scroll-variants

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

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

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

0:00By adding animation effects at the 0:02component level, we can ensure every 0:04instance of that component shares 0:06exactly the same polish. In this lesson,0:09we'll combine what you already know 0:10about components with the appear effects 0:12that we learned at the beginning of this 0:14course.0:18Let me start by talking you through how 0:19I have some things set up in the framer 0:22project here. So on this page, you can 0:24see I've got an instance of a component 0:27called icon. And if I double click on 0:29this, you can see there's just one 0:30variant, but within that variant, I do 0:32have some variables set up so that I can 0:34tweak the appearance of this from page 0:36to page. And if we go to one of the 0:38other pages here, you can see this is 0:40actually the very same component. I've 0:43just gone in and tweaked some of the 0:45variables so that I have a different 0:47icon and I have some different colors.0:48But if I double click on it, you can see 0:50that this is in fact the same icon. And 0:54on our third page, which is called 0:56events part two, we've got that same 0:58icon again, and that has similar 1:01overrides to the page before. But the 1:04important thing is we've got three 1:05instances of the same component on three 1:08different pages. So if I'd like to apply 1:10an appear effect, and I don't want to 1:12have to do that three separate times, I 1:14can actually do it within the component 1:16itself. So I'm going to double click on 1:18any one of these instances to go into 1:20the component itself. And if we select 1:22the parent frame of the variant, the 1:24variant frame itself, and head down here 1:27to effects like we normally would, and 1:29add an appear effect, by doing so from 1:32the variant frame, we're really doing 1:34the equivalent of going and adding this 1:36appear effect to each and every one of 1:38those instances that we just saw. So,1:41let's tweak the settings here. I'm going 1:43to start with the fade in preset, but 1:44for the effect, I'm going to have it 1:46start at a slightly larger scale. I'll 1:48go 1.4 four or 140%. And for our 1:52transition, I'm just going to have this 1:53ease out. So, I'll go to the ease tab 1:56and switch to the ease out preset. But 1:58I'll make the time a little more 1:59dramatic. I'll go to one full second.2:02So, it's going to come in full speed and 2:03then it's going to slow down over the 2:05course of 1 second. And if I press 2:07command P here to preview it, I can 2:09actually see it directly within the 2:12component preview here. And if I reload,2:14you can see what that looks like a 2:15couple more times. But where the real 2:17magic happens is on those pages where we 2:20have instances of this component. Now if 2:22I press command P here from this page,2:24you could see that that appear effect is 2:26on that instance. And if I go to one of 2:28our other pages and preview that, there 2:31it is. That appear effect is on this 2:33instance as well. And naturally, if I go 2:35to this third page and preview that,2:37we've got the appear effect on this 2:39third instance as well. So, even if we 2:41had hundreds of instances of this 2:43component, we'd have them all taken care 2:45of in one quick swoop. And there you 2:48have it. Animating at the component 2:50level keeps your design consistent, your 2:52workflow efficient, and is a great way 2:54to scale polish across your entire 2:56project. That's it for this one. I'll 2:59see you in the next one.

TeachesComponent Effects Appear Effect

Also coversComponent Variants Components Frames Transitions & Easing Variables

Watch on YouTube ↗

‹ Using Events for nested interactions in Framer (Animation Lesson 13)

Creating Animated Component Interactions (Animation Lesson 11) ›

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.