Animations
Creating Animated Component Interactions (Animation Lesson 11)
Creating Animated Component Interactions (Animation Lesson 11)
Creating Animated Component Interactions (Animation Lesson 11)
Joseph
·
13:03
·
14K views
·
About this lesson
Components are the building blocks of any interactive site — and when you add animation to them, they become so much more than static pieces.
By combining component variants with interactions, we can create dynamic components that respond to taps, clicks, hovers, and more. In this lesson, I’ll show you how to wire up interactions inside your components and animate between variants to create polished, reusable elements that feel alive.
Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-animations-component-interactions
https://www.youtube.com/watch?v=pAnZHluPjvM&t=0s Intro
https://www.youtube.com/watch?v=pAnZHluPjvM&t=36s Anatomy of an animated component
https://www.youtube.com/watch?v=pAnZHluPjvM&t=83s Creating multiple variants
https://www.youtube.com/watch?v=pAnZHluPjvM&t=225s Creating interactions
https://www.youtube.com/watch?v=pAnZHluPjvM&t=430s Editing speed and transition settings
https://www.youtube.com/watch?v=pAnZHluPjvM&t=520s Hover and pressed states
https://www.youtube.com/watch?v=pAnZHluPjvM&t=662s Editing interactions and "Cycle"
https://www.youtube.com/watch?v=pAnZHluPjvM&t=700s Automatic transitions with "Appear"
https://www.youtube.com/watch?v=pAnZHluPjvM&t=758s Wrap up
Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
0:00Components are the building blocks of0:02any interactive site. And when you add0:04animation to them, they become so much0:06more than just static little pieces. By0:09combining component variants with0:11interactions, we can create dynamic0:13components that respond to taps, clicks,0:16hover, and more. In this lesson, I'll0:19show you how to wire up interactions0:21inside your components and animate0:23between variants to create polished,0:25reusable elements that feel alive.0:31Before we jump in, let's just take a0:33quick bird's eyee look at the anatomy of0:35an animated component interaction. We've0:38got a component variant that we start0:40on. We've got a layer within that that's0:42going to be our trigger layer that we0:44add an interaction to, like an icon that0:47we click, for example, and then another0:49variant that we transition to. Then0:52Framer will automatically animate the0:54differences between the variant that we0:56started on and the variant we0:57transitioned to. And then of course we1:00can tweak things like the speed and the1:01easing of the transition itself. And of1:04course just like the previous tutorial,1:06in order for us to animate variance, the1:09variants have to exist in the first1:10place. And I am assuming you've got some1:12base of knowledge on components and1:14component variants and how all that1:16works. So, if you don't, head to1:18frameware fundamentals and check out the1:20lesson on components. So, let's jump1:22into the project file here. I've got a1:24component already created for a little1:26toggle down here. And if I double click1:28on this, we can go in and see that I1:30have not yet created any variants for1:32this. I'll zoom in just a little bit to1:34make this easier to see. Now, what we1:35want here is a variant just like this1:37one where we've got the icon on the left1:39highlighted with the circle behind it.1:41Then we want another variant where the1:42middle icon is highlighted with the1:44circle behind it and a third one where1:46the third icon is highlighted with the1:48circle behind it. So let's create those1:50variants. I'm going to set up both of1:52them ahead of time. I'm going to click1:53here to create a new variant. And then1:55I'm going to do it again so that we have1:57all three variants. And I'm going to1:59scoot these a little closer together2:02just so that way I can zoom in and make2:04things a little bit easier to see. So,2:06as you know from the intro to components2:08lesson in framework fundamentals, every2:10variant of a component shares the same2:12layers. We modify the properties of2:15those layers. We can move them around.2:16We can change their appearance, but it's2:18the same set of layers in each and every2:21variant. So, here what we're going to do2:23is take this existing circle in variant2:262 and move it to the center. And I just2:29want to be absolutely sure it's dead2:31center. So, I'm going to hold the option2:32key on my Mac, Alt key on a PC, and just2:35double check the measurements here.2:36We've got four pixels above, below, and2:3852 on the side. So, that is perfectly2:40centered and aligned. Then, I'm going to2:43take this first icon frame and I'm going2:45to reduce the opacity down to 40%. I'm2:48just going to tap the number four on the2:50keyboard to do that really quickly. And2:52then for the middle icon, that's now2:54meant to be the one that's highlighted,2:55I'll press the zero key to bring it up2:57to 100% opacity. And again, you'll3:00notice everything I'm doing here on3:01variant 2 does not affect variant one,3:04which is the primary variant. But3:06everything I do on the primary variant3:08will affect all the other variants. But3:10we'll get back to that in just a sec. So3:12again, we want to do some overrides here3:14on variant 3. We want the circle to be3:16all the way at the end here. And again,3:19I'll hold option on my Mac just to3:20double check those measurements.3:22Everything looks good. So I'll reduce3:24this icon to 40%. And I'll bring this3:27one up to 100%. again by using the3:29number four to set 40% and the number3:32zero on the keyboard to set 100%. And if3:35you tap zero again, it'll toggle between3:37100% and 0%. So that's a really handy3:39shortcut. Okay, so this is the gist of3:42the setup. These are how I want the3:43three variants to look that I want to3:45animate between with interactions. And3:47before I go any further, I am going to3:49be a good boy and I'm going to name each3:50one of these variants. So I'm going to3:52name the first one item one. I'm going3:54to name the second one item two. And you3:57guessed it, the third one is going to be3:59item three, which will be helpful later.4:02Now we can start linking these variants4:03together with interactions. Starting4:05with this second icon, which we want to4:08be able to click on and transition to4:10the second variant that has that icon4:11highlighted. So with this icon selected,4:14you can come up here. There are a couple4:16of ways to do this. You can come up here4:18to the top of the properties panel and4:20click to add an interaction. And the4:22type of interaction we're doing here is4:24called a transition. events are4:25something else and we're going to talk4:26about that in an upcoming lesson, but4:28for now we want to do transitions. But4:30choosing new transition here isn't4:32really the quickest way to do this in4:33the first place. So, what I'm going to4:35do is if we look over here on the layer4:38itself, there's a little lightning bolt4:40icon. And you'll see that depending on4:42your zoom level. If you're zoomed too4:43far out, you might not see it. If you're4:45zoomed too far in, you might not see it.4:46So, make sure your zoom level's all4:48good. Or if you don't see the icon, but4:50you want to add an interaction, you can4:52just press the letter L. The same4:54shortcut as adding a link to a normal4:56page, press the letter L on the4:58keyboard, and your cursor turns into a5:01little pick whip, which lets you click5:03to choose which variant you want to5:04transition to. So, I'm going to click on5:06item two. Now, we get to choose exactly5:09what interaction is going to trigger5:11this transition to occur. There's click,5:14which technically means click down and5:16then release the mouse button. There's5:18click start, which means as soon as the5:19mouse button gets clicked down, the5:21interaction will trigger. There's mouse5:23enter, which means hovering your cursor5:25over the trigger layer. And then there's5:27mouse leave, which means hovering your5:29cursor away from the trigger layer. Then5:31we have a delay, but since we want5:33things to be nice and snappy, I'm going5:35to leave that at zero. And click is5:37indeed what we want for this5:39interaction. So there we go. One down.5:42Let's now test it out. And instead of5:44just pressing command P, I'm going to5:46select the variant itself and then click5:47the play button next to the name of it.5:49So that way I know where I'm starting5:51here in the preview window. And here we5:53go. We're starting on variant one. And5:54if I click on this icon, there we go. It5:57triggered on click transitioned5:59automatically to variant 2. And the6:01properties that animated were the6:03position of that circle and the opacity6:05of those icons. But now I've sort of6:07reached a dead end. if I try to click to6:09go back or go anywhere for that matter.6:12We don't have any interactions set up6:14yet except on this middle icon. So,6:17let's go and create the rest of those6:19interactions. I'm going to go back to6:20the design canvas here. And now, you6:22might be tempted to select the first6:24icon on item two and link that back to6:28the item one variant. And then you might6:30want to go over to the first icon on the6:32item three variant and link that back to6:34the item one variant. But just like6:36layers themselves and other properties,6:38the other variants inherit everything6:40from the primary variant. That is,6:42unless we go and override the properties6:44on those other variants. So if we set up6:47our interactions on the primary variant6:49and the primary variant only, it'll be6:51on every variant. So let's do that.6:54Let's just set it up once and have frame6:56do the rest of the work for us. So I'm6:58actually going to link this first icon7:00on the primary variant to the primary7:02variant. You'll notice it'll let me do7:03that. that it'll let me sort of link to7:05itself. And I do want click, so I'll7:08leave it at that. And then the third7:09one, I'll press L on the keyboard and7:11link that over to item three. And we7:14want that on click, no delay as well.7:17And that's it. I've just set up all of7:18the interactions on all of the variants7:20by setting them up on the primary7:22variant. Pretty nice. So, let's preview7:24this again. I'll click on my primary7:26variant, click on the preview button,7:28and then when I click on the second7:30icon, there we go. We transition to the7:32second variant. third icon, third7:33variant, back and forth. I can skip7:36wherever we go. There are no dead ends.7:39Now, if we want to play with the speed7:41or springiness of the animation itself,7:44we can go back and with a variant itself7:47selected, you'll see transition as a7:49property. Now, just like everything7:51else, if we set this on the primary7:53variant, the other variants will inherit7:55it. But let's say you want one of them7:57to go a little quicker than the others.7:58The important thing to know is that when8:00you set the transition, you're setting8:02the transition to the variant that you8:05have selected, not from the variant you8:07have selected. It could go either way.8:09Just know that it's the incoming speed8:12for the variant that you have selected8:14when you're playing with these settings.8:15So, with the primary variant selected,8:17I'm going to make an adjustment. I want8:19this to go just a little bit quicker.8:20I'm going to bump this down to, let's8:22say, 04 seconds, just so the animation8:25is a little bit more snappy and8:27responsive. And if I preview that, there8:30we go. It's just a little bit faster, a8:32little bit more snappy, and it's going8:34to feel more responsive and performant8:35to the visitor. Now, one more thing I8:37want to point out, if we go back to the8:39design canvas here, is that there's this8:41special type of variant down below that8:44says hover/pressed,8:46and that allows us to create a hover8:48state or press state, which is in fact a8:51variant, but the hover interaction or8:53the pressed interaction comes with it8:55automatically. But setting up a hover or8:58press state is going to be just for the9:00variant that it's below. So if I wanted9:02each and every one of these to have a9:04hover state, let's say I wanted the9:06background to get a little bit brighter9:08when hovering over this whole component,9:10I would have to set up a hover state for9:11variant one, another one for variant 2,9:13another one for variant 3. So I don't9:16necessarily want to do that. But an9:18alternative, which we learned about9:19earlier in the course, is that I can set9:21up a hover effect on the icons9:24themselves. So that way the icons can9:26respond to hover and I won't have to do9:28it on each and every variant because9:30whatever I do here on the primary9:31variant is going to get inherited. So9:33I'm just going to select each one of9:35these three icons and I'm going to come9:37down here to effects on the properties9:39panel and I'm going to add a hover9:41effect. And on hover I think I want the9:44opacity of each of these to go to 80%9:47or8. And I want to leave the scale9:49alone. So I'm going to leave the scale9:51at one instead of 1.1. And now when we9:54go and preview this, we should see there9:56we go. Now when we hover on each and9:58every one of these icons, we get a10:00little bit of a response that serves as10:02an affordance or a signifier that these10:05things are clickable in the first place.10:07And the other great thing about this is10:09because this is a component, we can put10:11instances of this all over the place and10:14all of this interactivity is going to10:16come with it. So, if we go back to this10:19page of the site itself and I press10:20command P on my Mac to go into preview10:22mode, you can see that this instance10:24that existed originally now gets all of10:27this interactivity. And I want to show10:29you one more thing. So, I'm going to10:31leave preview mode and go back into the10:34component here. Cool. Now, let's say we10:36want to edit an existing interaction.10:38Each and every layer that has an10:40interaction applied to it has a little10:42lightning bolt icon on the layer list.10:44So that way we can find the layers that10:46trigger our interactions because it's10:48those layers that we have to select in10:50order to remove or edit the interactions10:53that we've created which show up here on10:55the properties panel. And if we click on10:57the interaction, it'll give us a little10:59popover where we can edit the specific11:01interaction that triggers this11:03transition. We can tweak the delay and11:05we can also change which variant this11:07transitions to in the first place. But11:09the real reason I brought this up is11:10because I want to show you that in this11:12popover, there is another feature that11:14only exists within this popover, and11:16that is to transition once or cycle.11:20Once is the default behavior. That's11:22what we've been looking at this whole11:23time. But cycle allows you to link to11:26the next variant without knowing what11:29the next variant is. So simply by saying11:31cycle, it will get rid of the variant11:34option altogether because it's11:35automatically going to go to the next11:36variant until it reaches the last one11:38and then it'll go back to the first one.11:40So this is really good for slideshows11:42and linear experiences or even just a11:45toggle that goes back and forth, back11:47and forth. So that way you don't have to11:48create a bunch of separate interactions.11:51You can just create the interaction once11:52on the primary variant and wherever11:54that's visible on other variants, you11:57can click it to go to the next variant.11:59And speaking of slideshows, eventually12:00you're going to say, "Wait, what if I12:02want to go from one variant to another12:04automatically? Maybe instantly, maybe on12:07a timer." It didn't look like there was12:09a way to do that, but there is. You just12:11have to select the variant itself and12:15add the interaction from there. When you12:17add an interaction to the variant12:18itself, you get a new option here called12:21appear, which lets you choose an amount12:23of time before this transition gets12:26triggered automatically. And you also12:28get to decide whether or not this12:29transition is going to play or if it's12:31going to remain paused while it's off12:33screen before the user has scrolled down12:35to it. And there you have it. Now you12:37know how component variants can unlock12:39an entire world of designing interactive12:42experiences. And by adding thoughtful12:44animations, those experiences aren't12:46just functional, but delightful. That's12:49it for this one. I'll see you in the12:50next one.
More in this topic
2:05Framer Update: Logo Shaders
Framer Update12K views · 1 month ago
1:46Framer Update: Holo Shader
Framer Update6K views · 2 months ago
1:56Shader: Chromatic Aberration
Framer Update7K views · 2 months ago
2:28Framer Shaders
Announcement23K views · 2 months ago
2:12Framer Update: Flow Effect in Layout Templates
Framer Update10K views · 3 months ago
13:14Building an Expanding Article Stack in Framer
Animations4K views · 4 months ago
5:41Scaling a clipped image on hover in Framer
Animations7K views · 5 months ago
3:38Making elements revolve in Framer
Animations5K views · 5 months ago