Animations
Using Events for nested interactions in Framer (Animation Lesson 13)
Using Events for nested interactions in Framer (Animation Lesson 13)
Using Events for nested interactions in Framer (Animation Lesson 13)
Joseph
·
9:28
·
16K views
·
About this lesson
Sometimes we end up with an interaction inside of a component that we need to trigger from outside of that component.
A special type of interaction in Framer, called an “Event”, makes that possible. Events are essential variables for interactions, which let us bubble up interactions within a child component so they can be use in a parent component or overlay. In this lesson, we’ll explore a couple common examples of scenarios where Events save the day.
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=0s Intro
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=21s Setting up the parent component
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=202s Adding events
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=300s Mapping events to parent transitions
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=401s Common use case: closing overlays
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=512s Special "event" triggers
https://www.youtube.com/watch?v=_qJHZ7wBeVQ&t=543s Wrap up
Grab the remix link from Framer Academy: https://www.framer.com/academy/lessons/framer-animations-component-events
Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
0:00Sometimes we end up with an interaction0:02inside of a component that needs to0:04trigger something outside of that0:06component. Well, a special type of0:08interaction in framer called an event0:10makes that possible. In this lesson,0:13we'll explore a couple common examples0:15of scenarios where events save the day.0:21For this one, I've done very little0:22setup ahead of time so that way we can0:24walk through all the steps together. But0:27just to remind you of where we're0:28headed, we've got a toggle that we0:30created in a previous lesson. And within0:32that toggle, we have some interactions,0:34but we want to use that toggle within0:36another component where we can click to0:38go between three different variants that0:40change the alignment of the text and the0:43icon that we see above it. So the bottom0:45line is we want to create a parent0:46component that uses a child component0:49and the functionality within that to0:52drive some of the transitions that are0:53happening in the parent component. So,0:55let's take a look at the project and how0:57that's set up here. I've got a parent0:59frame here called interactive alignment.1:01And within that, I've got some text1:03frames. I've got an icon, and I've got1:05that toggle component that we created in1:07a previous lesson. Now, it's no problem1:09to take this whole parent frame and just1:12rightclick and create a component from1:14that. We can create components that have1:16child components within them. No big1:18deal. I'm going to leave the name at1:19interactive alignment and I'm going to1:21click create. And now here we're ready1:23to set up those variants for the text1:25being left align, middle aligned, and1:26right aligned. So I'm going to do just1:28that. I'm actually going to start with1:29the left aligned text since our first1:31variant is going to have the left1:33aligned button selected. So with this1:36frame selected, I'm going to change our1:38alignment to left. And then I'm going to1:40select our heading frame and our body1:42frame, which have separate text boxes1:44for everything. So that way they'll all1:46become aligned when I switch the1:48alignment to the left. Cool. Cool. So,1:51that's really it for this first variant.1:52Now, we can create the other two. So,1:54I'm going to select the primary variant1:56and I'm going to zoom out a bit so that1:58we can see the button to create our next2:00variant. And I'm going to click on that2:02and click it again. So, that way we have2:05all three of our variants. We just need2:07to make our adjustments in the other2:09two. So, I'm going to start with variant2:10two. I'm going to zoom in on this. And2:12with that lockup frame selected, I'll2:14center it to get the icon in the middle.2:16And then I'll select the heading and2:18body frames again. center align those.2:21And then finally, I'll select our2:23component at the bottom. And for this2:25one, I'll select our item two variant.2:27So that way we see that center alignment2:29icon highlighted when we're looking at2:31the center aligned variant of this2:33parent component. And for the third one,2:36I'll zoom in here and with this frame2:38selected, we'll right align. These two2:41will right align as well. And for our2:44toggle component here at the bottom,2:46we'll go and switch that to the item2:48three variant that has that third right2:51align icon selected. Cool. But now the2:54problem emerges cuz I need to link the2:56individual triggers within this toggle2:59component to the different variants in3:01the parent component. And because this3:03is a component, it behaves like one3:05solid layer. And all of its3:07interactivity is encapsulated in its own3:10little bubble. So, this is exactly where3:13events come in. We need each icon within3:16the child component to be able to shout3:18up to the parent component, hey, I've3:20been clicked. And that's exactly what3:22we're going to do. So, we're going to3:24double click on our toggle component.3:26And we're going to come in here and do3:28everything on the primary variant. So,3:30that way everything we do here gets3:32inherited by the other two variants. And3:34I'm going to start by selecting this3:35first icon. And I'm going to add an3:38additional interaction to this. But this3:39time I'm going to choose to create a new3:42event. And when I do so, the variables3:45modal comes up and I get to give this a3:47name. So I'm going to name this left. I3:50am going to try to give these events3:51different names from the variants3:53themselves. So that way it's easier to3:55tell things apart as you're watching3:56this lesson. So left is going to be my3:59first icon here. And I'll hit return on4:01the keyboard to lock that in. And then4:03I'll select the second icon. I'll create4:06another event. New event here. And I'll4:08name this one middle. Hit return. And4:12now this third one I'm going to do a4:14little bit differently just to show you4:15an alternative way that you can add4:18events and map them to the individual4:20layers that are on the canvas. So rather4:22than selecting this and adding the event4:25from here, I'm going to show you that4:27you can open up the variables modal at4:29any time from the toolbar at the top and4:31you can see any existing variables that4:33you've created. And it's from here that4:35you could rename them or remove them.4:37But you can also come up to the plus4:39sign and you can choose to add a4:41variable. And one of our variables that4:43we get to choose from is an event. So4:46essentially an event is just a variable4:48for interactions. And here I'm going to4:50name this one right. But because I came4:53straight to the modal and added this4:55event variable, it hasn't actually been4:58connected to any of the layers on the4:59canvas. So I'm going to dismiss the5:00modal. I'm going to select our item5:02three layer here and I'm going to add an5:04interaction. But instead of choosing new5:06event, I'm going to go to choose event5:08to pick an existing one where I can find5:11right and select that. So there we go.5:14We've got one event being triggered when5:16we click the first icon. We've got5:18another event being triggered when we5:19click the second icon. And we've got a5:21third event being triggered when we5:23click the third icon. They're called5:24left, middle, and right. So what5:27actually happens is now when we go back5:29to the parent component and we have this5:31child component selected, we've got some5:34new interactions that show up on the5:36properties panel on the right hand side.5:38So now we can say what actually happens5:41when the left event gets triggered, what5:43actually happens when the middle event5:44gets triggered and what actually happens5:46when the right event gets triggered. So5:48we'll start with the left event. When5:49the left event gets triggered, I would5:51like to add a new transition that goes5:54to the first variant because variant one5:57is the one where everything is left5:58aligned. And you probably guessed it, we6:01then want to go to the middle variant,6:02add a new transition, and have that go6:05to variant 2 cuz variant 2 is the one6:07where I had everything aligned in the6:09middle. And finally, we want to go to6:10the right event. We want to add a new6:12transition, and we want this one to go6:15to variant three. So there we go. Now,6:17let's preview this. If I click on the6:19second icon, the middle event gets fired6:22and the middle event triggers the6:24transition to variant 2. If I click on6:26the right icon, it's going to trigger6:28the event called right and the event6:30called right is going to transition to6:32the third variant. So events are6:34successfully translating what's going on6:36within the child component so that the6:38parent component can transition to the6:40right variant. Awesome. And one last6:42thing I want to show you is arguably one6:45of the most common use cases for events,6:47and that's using an interaction within a6:49component to close an overlay. So, I'm6:52going to leave this preview here. I'm6:54going to go to the pages panel and head6:56to the third page of this project. And6:59in this project, if I preview this, I'll7:01press command P on my Mac. I'll click7:03open overlay. We've got an overlay here7:05with a contact form. And this whole7:07contact form is a component. So the7:09close button actually exists within the7:10component and we want to be able to use7:12that to close the overlay. So if I go7:15back here and just show you the anatomy7:17of this on the layers panel triggered by7:20my CTA button, I've got this overlay and7:23then here we've got this form component.7:25And because it's a component again, it7:27behaves like one giant layer where that7:30button and everything else is7:31encapsulated within it in its own little7:33bubble. So what we're going to do is7:36doubleclick on the component. We're7:38going to select the close button. We're7:40going to head up here to interactions7:41like we did before. We'll create a new7:44event. And I'm just going to name the7:46event close and hit return. And there we7:49go. Now when clicking on the little7:50close icon, an event called close will7:53be triggered. So if we go back to where7:54this overlay exists with the overlay7:56selected, more specifically with the7:58form selected, we've got our close event8:01and we can choose what that actually8:04triggers within the context of this8:06overlay. And if I click, we only get one8:08option, the option to close the overlay.8:10So naturally, that's the one I'm going8:12to choose. And I don't want any sort of8:14delay. So I'll head straight to preview8:16by pressing command P on my Mac. And8:18when I open the overlay, here we go.8:20Here's the component. And unlike when8:22we're editing, all of the nested8:24functionality of the component becomes8:25accessible, including clicking on that8:28button to trigger that event, which in8:30turn tells the overlay to close. And the8:32last thing worth mentioning is there are8:34elements that actually have special8:37events that are built into them to8:38trigger transitions when certain things8:41happen. So like a video for example, a8:43video could trigger a transition when8:46the video plays when the video pauses or8:49when the playback of the video gets8:50scrubbed. And similarly, a form could8:53trigger a transition when it's submitted8:55successfully or if it runs into an8:57error. And I'll teach you more about8:58that in our dedicated course on forms.9:02And there you have it. Now you know how9:04events are sort of like variables but9:06for interactions. And let us bubble up9:08interactions within a child component9:10that can be used in a parent component9:13or overlay. That's it for this one. I'll9:16see you in the next 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