13.06. FramerX - Coding Animations and Overrides

13.06. FramerX - Coding Animations and Overrides

(techno music)

- Hi and welcome back to another session about Framer X.
This time, we're going to learn how to code animations using overrides, but we're gonna do it on the design component instead of a code component and we can apply events and overrides to create a transition that is far more flexible and powerful than the one in the Quick Prototype in Tools. So, for example, if you look here, this is a very basic transition that is using one of the presets such as Modal, Overlay, Instant. Instead of doing that, we are going to use the Code tab here which allows us to connect to a specific script and then apply very custom animations in code, but it's going to be applied to a design component. But first of all, let's create a copy of this card and then detach it like this. So now it's no longer connected to a link that goes to another screen like this one. Let me zoom in. Let's take this master component out.

And now we can do whatever we want with this frame.
And by the way, it doesn't have to be a design component, it can also be a frame, it can be, pretty much, anything where you can apply this code. So let's go to Examples and click on New File. This is going to open in VS Code. So I'm going to double tap on my mouse using two fingers and put this right next to Framer X. Make it minimal. Use option Z to wrap the words. Let's close this for now. And then focus on the coding here. So let me explain the code a little bit. So here we are using an override called Scale. And then on the tap of this override, then we're applying an animation of spring from 0.6 to one. Now, let's take a look here and see that we have a list off of Override using this specific file called App.tsx. So now I can apply the override called Scale. And when I do so, first of all, let's make sure that we remove the link, and then I go to Play. That's when I click on it, and it's applying the animation. Cool, so let me actually put this right here because we won't be needing the actual frame. We're just gonna be playing with the prototype. Let's go to the code. Now, you can see that the Animatable, here, for scale is set to one by default, and then at the very end, it's set to one again, so that's why it returns back to it's initial state. So, this is the beginning state, and this is the end state, but on the tap, it sort of like starts with 0.6, but if we didn't do this, we would only have initial state and an end state. We can set this one to two and it will remain at two. So let's save it, click on it. You can see that it remains there. And it's within the frame, so we might wanna go to the stack and make sure that it doesn't hide. So, Overflow set to Show. All right, so let me reset this back to one and then save. What I want to animate is not the scale, I actually want to animate the size of my box. So, first of all, I'm going to remove the scale value. I'm going to animate the left position, instead. And if you remember, there's a padding of 40 from the left. And here, I'm going to change it to left, which is the name of the override, and then apply the data, the value of left, and for this as well.

Let's set the end position to 20.
And give it a try, I click here and it moves to the left. Let's talk about the spring function here. So we have data left, which is of value 40, and this is the beginning position of the animation, and this is the end position of the animation. The value that we have here is simply an override that is gonna be displayed on the canvas. So, this override is actually using this value. So, now if we change this value to zero, it's gonna override whatever is seen right here. Let's put it back to 40. So what this means is that as long as you have an element that can accept the function and an override, then it's going to apply to the canvas, regardless if it's a frame, a component, or any other element. So for this override, I'm going to be very specific. I'm going to say CardOverride because I only want to apply these values to the card. So when you change the name of the override, you have to apply it again, so I'm gonna move this, select my card, set the override to CardOverride. Let me minimize this first. Let's animate the other properties. Let me just indent this first to make it clear. Make sure to have a comma right after this line. And in a Visual Studio Code, you can do Shift, Option, and Down Arrow to duplicate multiple times. And the second one, it's gonna be right, and then top, bottom. For the top value, let's put it to 169, and bottom value is gonna be 438. Now these values are the card against the canvas, so if we press the Option key against the canvas, you'll see that it's 169 and 438. But we do have a problem where the card is within a stack, and that can really mess up with the positioning, so let's right click on the stack, and then Remove Stack like this, great! So now we just needs to set the overrides, so Shift, Option, Down Arrow, let's do for right, right, and then top, top.

You can also select this and do Command D,
and then just apply two or more values at once, so, bottom. Let's do the same with the animation.

And then here, set to right, top, bottom.

So the end goal, really, is this screen right here.
We need the card to expand so that it takes all the space so we can set the distance using these values. So, 112, 20, 20, and then zero.

So top is gonna be 112, and bottom is gonna be zero.
Let's select the card and make sure that it's above everything else except for the status bar and the home button. So let's test it. So we click on this and it opens to the second state. We just need to figure out a way to get it back to the first state. We just need to set the boolean value to a true or false called cardOpen. My default is gonna be false, and put comma. And here, when the user taps, that's when it changes, so data.cardOpen, make sure it's camel case, is equal to the opposite, so exclamation point, data, cardOpen. So what this means is that when the user taps, false becomes true, and if the user taps again, then true becomes false, and it's always the opposite. With the new update to the cardOpen value, we can say if, parentheses, data.cardOpen, if it's equal to true, in curly brackets, apply this animation. So I'm just gonna move this, command X, into this space, and using command squared brackets, I can shift that and indent it like this. And then if else, so the opposite, if card is not open, then just put the same code here and reset the positioning to 40. 40, 169, and then 438, save.

Let's go to the preview.
If I click here, it opens, click again, and it closes. Now you can see that the spring animation is a little bit extreme. We can actually tweak that. Let's go at the very top and do const, springOptions,

is equal to curly brackets, and we're gonna have
the tension, set it to, let's say 500, and the friction, set it to 30. Now let's apply the spring options to the spring function. I'm going to select this first, and then using the option key and then hold, click here as well, and all of those points before the parentheses. And from here, I can edit all of those places at the same time. Now comma, springOptions, and save. Now this is going to apply my new spring values so if I click here, you can see that it's much better. It's not as bouncy as it used to be. Now this is not much of a transition. We can actually add more elements that can be affected by the onTap event, so let's do that. Let's add a new background right underneath the card. Create a frame, very small, right here. I don't wanna make it too big because otherwise it's gonna nest everything inside it, so I'm gonna do it like this.

Take the whole space, and put it underneath the card.
We're going to use the background of the other screen. So let me move this here.

And control C, and voila.

Let's set this as a background element
and set the Opacity to zero.

Because this is going to be in the way,
we can decide to lock it like this. So now it won't be in the way of our selections. What we would like to do is, when the user taps on the card, then it's gonna change the opacity of the background, so for that to happen, we need to set up the data. So, opacity is gonna be animatable and zero by default.

Let's set the override, so export, const,
background, Override, Override, is equal to parenthesis, arrow, curly brackets. Let me maximize this a little bit to have more space. And then we're gonna do return, curly brackets, then let's change the opacity override. So opacity, using data.opacity, save. In the event, we're going to animate, so animate, parenthesis, data.opacity, comma, and animated to a value of one, like this. And when the card closes back, we're gonna put it back, too. So, animate, data.opacity, comma, to zero. Notice that we are not using the spring function. We're just using animate, that's it. Now we just need to apply that override to the background. Let's click on Code, using the App, selecting BackgroundOverride. And now we can test it, so I click here, and backgrounds kicks in. We might wanna add some duration or some bezier curve, so let's learn how to do that. Let's import the curve. So, import, curly brackets, curve, from, double quotes,

and then search for framer.

Now, underneath spring options, we're gonna do const, bezierCurve, is equal to, and then the value for the bezier curve, I like to use 0.2, 0.8, 0.2, and one as curve.

Let's set the duration, so const, duration,
is equal to 0.5, and then const, bezierOptions, is equal to, curly brackets, curve.

So we're gonna use the bezierCurve, using also the duration.

So now let's go to animate, we're gonna replace this
with bezier, and the same with this one.

And at the end, add another comma, and add bezierOptions.

Let's do the same with the other one, as well, and save.
Perfect, now if we click here, the opacity transition is much faster, much smoother, and that's what we wanted. But there is one issue, it's that this background frame is not allowing me to click on the menu here, which is supposed to be clickable, so the menu should be above this, but when I click on it,

I don't want this to appear.
So I can just do a simple menu override. Export, const, MenuOverride, parenthesis, arrow,

curly brackets, return, and then also using opacity.

This time it's gonna be data and then menuOpacity
which we are going to set here. So menuOpacity, which is going to be animatable.

Starting with one and do the opposite.

So, menuOpacity, zero, and then menuOpacity to one.

Let's select the Menu and set the Code
to have the override column MenuOverride. And now, if we click here, it's gonna fade out the menu, as well. But the menu is gonna work. There is just one more thing we can do. So, when you click here, we wanna make it look, as much as possible, to the final section screen, so what we can do is to use a children component instead of the background. So, this background here, we can use the component

called children, and this component is gonna be
right above the background that we had earlier. Let's resize this to take the full width and height.

Let's set the content for that component.
So, we can duplicate this section, put it right here,

and remove the parts that we don't need.

Then let's connect that.

There seems to be an issue with the text,
I'm not sure why, so what I can do is...

Remove it just for this here, and let's test it again.

So, on this children component, we can apply the code.

Select the override and use the same
override as the background. Now let's give it a test, voila. Now I just want to point out that this is pretty much like a hack and it's not really meant to use on a big prototype with so many clickable elements. So, definitely try to isolate this type of transition somewhere where you can test the animations using the same techniques that we have learned in this lesson. We can, of course, set the opacity to zero, and make this locked. Another thing that I wanna point out is that all of this stuff is using design components. So if I wanna change any element, it's just gonna be reflected right away. I don't need to recode everything again and again. That makes iterations really quick and you can create really awesome stuff. Before we go, I just wanna fix a few things first. So, for example, the hover state don't work. That's simply because this thing is underneath the background and the children. So, let's put it back up there and then let's apply the same MenuOverride like this.

It's still gonna work, but now
the hover states work, as well. The second thing is, what if we had a change of color for the status bar? Well, what we can do here is on the status bar, we can apply the override for the menu like this. And now it's gonna disappear, therefore, right here, I'm going to put the status bar.

Let's go back here, and voila.
You can see that it's changing from black to white pretty seamlessly. And there's just so much more you can do with this. Really, I'm just scratching the surface. In the next session, we're going to learn how to connect to an API and get the data, whether it's images or names, so we're gonna use UINames, which is a very simple API that use JSON, and I'm gonna teach you how to apply that to your own code component and create that from scratch. I hope you're having a ton of fun, and that you're applying all of these animations to your own designs, I would love to see them. Feel free to send them to me on Twitter. I would love to share them. Thank you so much for following along, I'll see you in the next session.


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?