Master the basics of vector animation 🎨🔥 with Flare 2D in Flutter by re-creating the awesome navigation menu from the Giphy mobile app https://fireship.io/lessons/animated-navigation-flutter-flare/

- Flare https://www.2dimensions.com/about-flare
- Flutter https://flutter.dev/
- Giphy Apps https://giphy.com/apps

#flare #flutter #giphy
2024-02-04T06:51:29.412Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8295ca13-337e-4af3-8d1d-84b4100829db
b19bcefbc1bb3b1ab80545aff052978e61035e7dfe24c96719f6383b8c48f787
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
I bet you folks don't have one of these.
I want that.
You see, this I think you're run of the mill crapperware.
One of the coolest navigation menus I've seen in a long time comes from the Giphy mobile app.
In today's video, you'll learn how to build this menu from Scratch using Flutter and an awesome 2 d animation tool called Flare.
By the end of this video, you'll understand the fundamentals of vector animation and how to turn your creations into interactive UI elements that render at 60 FPS.
If you're new here like and subscribe and I recommend following along with the source code on Fireship IO.
Let's take a closer look at the entire menu itself.
Focus on the bar that hovers above the icons.
You'll notice when an icon becomes active it slides to a new position and also animates the color.
We can achieve that effect very easily in Flutter natively by simply using a combination of a stateful widget and an animated container.
But the icons themselves are obviously using much more advanced animation sequences here.
Hypothetically, we could implement these using nothing but a custom painter and some Dart code.
But fortunately, there's a design tool called Flare that makes it easy to create complex vector animations, which can then be exported and run natively in Flutter's engine at 60 FPS.
Throughout this video, I want to teach you the fundamental concepts required to build animated UI elements.
You don't need to be a graphic designer or an artist.
You just need to know a few key concepts about animation and you can start building your own interactive UI elements that look just as good as the Giphy mobile app.
First thing you'll wanna do is sign up for a free Flare account and then go ahead and create a new file.
You'll see the artboard here in the center of the screen, that's the canvas that we use to draw the graphics.
When working in design mode, you'll notice that flare is very similar to other design tools like Figma or Adobe Illustrator.
On the left side of the screen, you'll see we have a hierarchy of shapes, So the artboard is at the top and then we can layer in additional shapes as needed.
In the top menu, you'll see a handful of different tools for drawing shapes.
I'm going to draw a star and then show you all the different techniques that we can use to animate it.
In total, we'll look at 5 different ways to animate shapes, then you can use a combination of these techniques build every single icon in the Giphy native menu that I showed you earlier, and we'll look at each of those icons individually in just a few minutes.
After you place a shape on the artboard, there's a few keys that you wanna remember to quickly access the tools to move it and resize it.
Hit t for translate, which allows you to move the object.
Hit s for scale to resize the object and r for rotate to rotate it.
When you have a shape selected, this menu on the right will appear which allows you to modify its properties.
When it comes animated icons, you generally want them to be centered directly in the artboard and also take up as much of the y space as possible.
When it comes to colors, shapes can have a fill color, and they can also have a Stroke, which is basically a border or an outline around the shape.
I'm going to remove the stroke for now, and the first animation that we'll build is just an interpolation from one color to another color.
This is where we start to see the superpowers of flare.
So currently, we're in design mode, but now we can switch over to animate mode, and this will bring up a timeline down at the bottom.
You can create multiple animations in a single file and give those animations names.
That's important because when we get to Flutter, we can run animations programmatically based on the In this demo, every icon just has one animation named go.
In animate mode, you'll notice that every property on the shape now has this little diamond symbol next to it.
You can click it to create a keyframe on the timeline.
A keyframe is just a representation of that property at a specific point in time.
So if you have 2 key frames at different points in time, Flare will automatically animate between those 2 key frames.
We can move to any frame in the animation by sliding the scrubber.
For this first animation, we'll just go ahead and slide all the way to the end, and then we'll change the fill color to yellow.
If we start scrubbing the timeline, you'll notice that our star changes from gray to yellow.
And that's basically how all animation works.
You just start with one value and then change to a different value over time.
And that brings me to the first actual technique, which is animating the transform of the shape.
And by transform, I'm referring to the position, the scale, or the rotation of the shape.
Starting at the beginning of the timeline, I'll go ahead and set keyframes for the x and y values for Scale and also for the rotation.
Then we'll move the timeline to the end and set a rotation value of 360 degrees.
Now we also want the star to start invisible and then scale up as the animation progresses.
We'll go back to the beginning and then set these scale values to 0.
We'll also make sure to set a keyframe at the end with the desired scale value.
So this is starting to look pretty cool, but how can we make this look a little more lifelike?
That brings me to concept number 2, timing.
By default, Flair will calculate the values in between your key frames with a linear function.
But when it comes to motion graphics, it's often better to have this function ease so it starts or ends a little bit Slower or a little bit faster.
We can do this easily in Flare by highlighting a set of keyframes and then clicking on the key interpolation menu.
This will change the way the actual in between values are calculated.
For example, we can make a curve that starts off really fast and then eases out very slowly.
And that tends to be more appealing to human beings because that's the way motion works in the natural world.
Now we're ready for technique 3, animating the vertices of the shape.
Vector graphics are made up of a series of points and we can modify those points to animate the underlying shape itself.
Create a keyframe next to the edit vertices button and then click that button.
You'll see a bunch of circles appear on the shape.
These represent its vertices.
Let's go ahead and do this animation in multiple steps.
Move a little bit forward on the timeline then adjust some of the points in the shape, move a little bit forward again and do the same thing and so on and so on.
After you've done that a few times, it will create this animation that sort of looks like the star is waving its hands up and down.
As you can imagine, changing the vertices can lead to some very cool looking and complex animation.
But the next technique I wanna show you is how to animate the stroke of a shape.
We can use the stroke to make it look like we're actually drawing the shape by hand in our animation.
Go back to design mode and then remove the fill and then add a stroke with whatever color you want, and a size of 50 looks pretty good for these Giphy animations.
From there, I'm going to set the trim path to sequential.
From there, we can change the ending value and you might be able to imagine how we can use this to animate the stroke in to make it look like it's drawing around the outline of shade.
Go back to animate mode and set a key frame that starts the stroke with an ending point of 0% and then finishes with 100%.
And now you have this cool hand drawn icon with almost no effort.
That brings me to the 5th and final animation technique, clipping.
Clipping allows you to control the visibility of a shape when it's inside of another Hyper shape.
Let's go back into design mode and we'll draw a circle and then remove the fill and the stroke from that circle.
It's going to serve as an invisible mask for the star.
From there, go ahead and select the star and then hit the clipping button.
It will ask you to select a parent which is the circle shape.
Now the circle is basically a window and the star is only visible inside that window.
As we move it around, you can see how it partially hides the star.
If we go back to animate mode, we'll go ahead and set our first keyframe for the star all the way over to the left and then we'll translate the shape all the way to the right.
And just a side note, if you grab the red arrow it will move it perfectly along the horizontal axis.
And now we have this animation where it looks like the star is sliding through some invisible window.
Now that you know these five techniques, I want to show you how I combine them to recreate Giphy's navigation menu.
We'll look at these in order of difficulties starting with the easiest one which is the heart.
Because Flair is web based, you can basically open source your designs, so feel free to check those out on my Flair profile.
I didn't actually draw the heart myself, but instead just imported it as an asset and then use Flare to handle the animation aspect of it.
To create a heartbeat effect, all you have to do is scale the shape up and down and that's about as easy as it gets.
The next one we'll look at is the headless guy And you can see we actually have 3 shapes here.
We have the head that's currently visible, we have an invisible head, and then the body.
To make the head roll off, we just set a series keyframes that move it along the path of the body.
And we do that until it falls completely off of the artboard.
The invisible head is sitting exactly where the original head was, And we can replace it by just increasing the opacity from 0 to 1, and that just fades in a new head in the old head's place.
The next animation we'll look at is the planet.
On this one, you'll notice we have 3 circles that are only visible when they're inside of the bigger planet, and that's possible because we're clipping these smaller shapes with the bigger planet.
So to create this animation, we just move the 3 circles from left to right.
And at the same time, we'll animate the rotation of the planet itself.
And now we have this effect where it looks like the smaller shapes are creating an eclipse shadow on the bigger planet.
And hopefully, you're seeing how simple these animations actually are compared to how they look when you first see them.
Next up, we have the plus sign that transforms into a camera and then flashes a picture.
This one is a little more complex because we need to actually animate the vertices into a brand new shape.
So in this case, you kind of need to plan ahead to make sure that your plus sign can actually transform into the shape that you want.
After we convert the plus sign into a camera, we then scale up a circle in the middle, and that gives us an effect that looks like the flash of a camera.
By far, the most difficult animation is the house because it creates this 3 d rotating effect in a 2 d animation environment, Kind of like how they built the original Doom video game.
To make this look decent, I first created a clipping box around the house, and then I created a bunch of shapes that outline the various walls in the house.
Then I very tediously animated the vertices from one side to the other.
I did that very carefully step by step and then I animated in a new door from the left side.
Now that we have all these awesome animations, it's time to export them to Flutter.
Go ahead and click the export icon, and you want the binary of the file, which you can just save in the assets directory of your app.
Flutter maintains a package that allows you to run your graphics in the Flutter engine.
Go ahead and add it as a dependency to your project by adding it to the pubspec YAML file.
And while we're in this file we can also register our assets directory as assets in the Flutter app.
If we jump into the main dot dart file you can see that I just have a material scaffold set up.
Then I have our custom Navbar centered in the middle of the screen.
I'm only doing that for presentation reasons for this video.
All of the meaningful code will be implemented in this Navbar stateful widget.
We're starting out here with just an empty stateful widget, and I'm also defining my own class called menu item.
This is just a simple abstraction that we'll use to help us organize the code for each individual item in the menu.
Name represents the dotflr file that we have saved in the assets folder.
Color is just the color of the top border when this menu item is active, and then x is the alignment on the x axis.
Now going into the stateful widget will define a list of these menu items.
The important thing here is the x value which defines the alignment of that top border when the menu item is active.
We could do this programmatically, but since we have a fixed number of items this menu, I felt like this was the most clear way to do it for this demo.
An x value of negative one means that it will be aligned to the very far left of the screen, And an x value of positive one means that it would be to the very far right of the screen, and 0 would be directly in the middle.
We can go ahead and fill out the data for the rest of these menu items, And then we'll override a knit state to set one of the items to active when the app is first initialized.
In order to make this menu responsive, I'm going to first set A variable for w, which is a media query of the width of the viewport.
From there, I'm returning a container, which has a height of 80, which will define the actual height of the menu itself.
Then its child is a stack, and inside that stack, we have 2 elements.
The first one being that colored bar that moves across the screen when a menu item becomes active.
The great thing about Flutter is that we can easily animate the motion of that top bar by using an animated container.
We'll set the duration to 200 milliseconds, And then we'll set the alignment to the alignment of the active menu item.
This means Flutter will automatically animate the movement of that top bar whenever the active menu item changes.
We don't need any animation controllers or anything like that.
Flutter just does it for us automatically.
Now I want the color of the top bar to be animated as well, so I'm just going to nest another animated container directly inside out of this one.
I'm going to give this one a longer animation, set its height to 8, and then give it a width that's based on the number of menu items in the menu.
4 or 5 items, that means each item will take up 20% of the available width.
That's all it takes to build the animated indicator above the icons.
Now we're going to set up a row that will hold the icons themselves.
Bells.
The row is very straightforward.
For the main axis alignment, we'll use space around.
That will ensure that that top indicator is perfectly centered on top of the icon.
Then we'll set the cross axis alignment to end so the items sit at the bottom of the row.
Then to create the children, I'm looping over the items list And then mapping the list to a method called flare which will build the actual widgets for each individual item.
The flare method takes a menu item as its argument, and then the first widget it Turns is a gesture detector.
This is how we turn our animated icon into a button.
We can listen to the on tap event and then when that happens, we'll set this item to the active item on the Date full widget.
And in doing so, we will trigger all of the animated properties on this widget.
From there, I'm going to use the aspect ratio widget set to 1 just to keep this widget set as a perfect square.
Go ahead and give it some padding on the top and then we'll set the child as the Flare actor widget which comes from the Flare library.
The first argument is just the path to the FLR file, which in our case is in the assets directory.
We have the option to set the alignment, the fit, and a bunch of other things.
But in order to run an animation, we need to pass it an animation property.
The value should be the name of the animation that you define when creating this graphic in Flare.
In our case, we gave all of our animations the same name of go.
So we'll go ahead and use that animation name whenever this item is active.
Otherwise, we'll just pass it a string of idle which will do nothing.
And that's all there is to it.
By combining the powers of Flare and Flutter, we were able to take a navigation menu that seemed extremely complex on the surface, recreate it with minimal effort, and be able to run it on iOS and Android without sacrificing quality.
I'm gonna go ahead and wrap things up there.
If this video helped you, please like and subscribe.
And if you want access to even more content, consider becoming a pro member at Fireship IO.
Thanks for watching, and I will talk to you soon.

Speaker 0: I bet you folks don't have one of these. I want that. You see, this I think you're run of the mill crapperware. One of the coolest navigation menus I've seen in a long time comes from the Giphy mobile app. In today's video, you'll learn how to build this menu from Scratch using Flutter and an awesome 2 d animation tool called Flare.

By the end of this video, you'll understand the fundamentals of vector animation and how to turn your creations into interactive UI elements that render at 60 FPS. If you're new here like and subscribe and I recommend following along with the source code on Fireship IO. Let's take a closer look at the entire menu itself. Focus on the bar that hovers above the icons. You'll notice when an icon becomes active it slides to a new position and also animates the color.

We can achieve that effect very easily in Flutter natively by simply using a combination of a stateful widget and an animated container. But the icons themselves are obviously using much more advanced animation sequences here. Hypothetically, we could implement these using nothing but a custom painter and some Dart code. But fortunately, there's a design tool called Flare that makes it easy to create complex vector animations, which can then be exported and run natively in Flutter's engine at 60 FPS. Throughout this video, I want to teach you the fundamental concepts required to build animated UI elements.

You don't need to be a graphic designer or an artist. You just need to know a few key concepts about animation and you can start building your own interactive UI elements that look just as good as the Giphy mobile app. First thing you'll wanna do is sign up for a free Flare account and then go ahead and create a new file. You'll see the artboard here in the center of the screen, that's the canvas that we use to draw the graphics. When working in design mode, you'll notice that flare is very similar to other design tools like Figma or Adobe Illustrator.

On the left side of the screen, you'll see we have a hierarchy of shapes, So the artboard is at the top and then we can layer in additional shapes as needed. In the top menu, you'll see a handful of different tools for drawing shapes. I'm going to draw a star and then show you all the different techniques that we can use to animate it. In total, we'll look at 5 different ways to animate shapes, then you can use a combination of these techniques build every single icon in the Giphy native menu that I showed you earlier, and we'll look at each of those icons individually in just a few minutes. After you place a shape on the artboard, there's a few keys that you wanna remember to quickly access the tools to move it and resize it.

Hit t for translate, which allows you to move the object. Hit s for scale to resize the object and r for rotate to rotate it. When you have a shape selected, this menu on the right will appear which allows you to modify its properties. When it comes animated icons, you generally want them to be centered directly in the artboard and also take up as much of the y space as possible. When it comes to colors, shapes can have a fill color, and they can also have a Stroke, which is basically a border or an outline around the shape.

I'm going to remove the stroke for now, and the first animation that we'll build is just an interpolation from one color to another color. This is where we start to see the superpowers of flare. So currently, we're in design mode, but now we can switch over to animate mode, and this will bring up a timeline down at the bottom. You can create multiple animations in a single file and give those animations names. That's important because when we get to Flutter, we can run animations programmatically based on the In this demo, every icon just has one animation named go.

In animate mode, you'll notice that every property on the shape now has this little diamond symbol next to it. You can click it to create a keyframe on the timeline. A keyframe is just a representation of that property at a specific point in time. So if you have 2 key frames at different points in time, Flare will automatically animate between those 2 key frames. We can move to any frame in the animation by sliding the scrubber.

For this first animation, we'll just go ahead and slide all the way to the end, and then we'll change the fill color to yellow. If we start scrubbing the timeline, you'll notice that our star changes from gray to yellow. And that's basically how all animation works. You just start with one value and then change to a different value over time. And that brings me to the first actual technique, which is animating the transform of the shape.

And by transform, I'm referring to the position, the scale, or the rotation of the shape. Starting at the beginning of the timeline, I'll go ahead and set keyframes for the x and y values for Scale and also for the rotation. Then we'll move the timeline to the end and set a rotation value of 360 degrees. Now we also want the star to start invisible and then scale up as the animation progresses. We'll go back to the beginning and then set these scale values to 0.

We'll also make sure to set a keyframe at the end with the desired scale value. So this is starting to look pretty cool, but how can we make this look a little more lifelike? That brings me to concept number 2, timing. By default, Flair will calculate the values in between your key frames with a linear function. But when it comes to motion graphics, it's often better to have this function ease so it starts or ends a little bit Slower or a little bit faster.

We can do this easily in Flare by highlighting a set of keyframes and then clicking on the key interpolation menu. This will change the way the actual in between values are calculated. For example, we can make a curve that starts off really fast and then eases out very slowly. And that tends to be more appealing to human beings because that's the way motion works in the natural world. Now we're ready for technique 3, animating the vertices of the shape.

Vector graphics are made up of a series of points and we can modify those points to animate the underlying shape itself. Create a keyframe next to the edit vertices button and then click that button. You'll see a bunch of circles appear on the shape. These represent its vertices. Let's go ahead and do this animation in multiple steps.

Move a little bit forward on the timeline then adjust some of the points in the shape, move a little bit forward again and do the same thing and so on and so on. After you've done that a few times, it will create this animation that sort of looks like the star is waving its hands up and down. As you can imagine, changing the vertices can lead to some very cool looking and complex animation. But the next technique I wanna show you is how to animate the stroke of a shape. We can use the stroke to make it look like we're actually drawing the shape by hand in our animation.

Go back to design mode and then remove the fill and then add a stroke with whatever color you want, and a size of 50 looks pretty good for these Giphy animations. From there, I'm going to set the trim path to sequential. From there, we can change the ending value and you might be able to imagine how we can use this to animate the stroke in to make it look like it's drawing around the outline of shade. Go back to animate mode and set a key frame that starts the stroke with an ending point of 0% and then finishes with 100%. And now you have this cool hand drawn icon with almost no effort.

That brings me to the 5th and final animation technique, clipping. Clipping allows you to control the visibility of a shape when it's inside of another Hyper shape. Let's go back into design mode and we'll draw a circle and then remove the fill and the stroke from that circle. It's going to serve as an invisible mask for the star. From there, go ahead and select the star and then hit the clipping button.

It will ask you to select a parent which is the circle shape. Now the circle is basically a window and the star is only visible inside that window. As we move it around, you can see how it partially hides the star. If we go back to animate mode, we'll go ahead and set our first keyframe for the star all the way over to the left and then we'll translate the shape all the way to the right. And just a side note, if you grab the red arrow it will move it perfectly along the horizontal axis.

And now we have this animation where it looks like the star is sliding through some invisible window. Now that you know these five techniques, I want to show you how I combine them to recreate Giphy's navigation menu. We'll look at these in order of difficulties starting with the easiest one which is the heart. Because Flair is web based, you can basically open source your designs, so feel free to check those out on my Flair profile. I didn't actually draw the heart myself, but instead just imported it as an asset and then use Flare to handle the animation aspect of it.

To create a heartbeat effect, all you have to do is scale the shape up and down and that's about as easy as it gets. The next one we'll look at is the headless guy And you can see we actually have 3 shapes here. We have the head that's currently visible, we have an invisible head, and then the body. To make the head roll off, we just set a series keyframes that move it along the path of the body. And we do that until it falls completely off of the artboard.

The invisible head is sitting exactly where the original head was, And we can replace it by just increasing the opacity from 0 to 1, and that just fades in a new head in the old head's place. The next animation we'll look at is the planet. On this one, you'll notice we have 3 circles that are only visible when they're inside of the bigger planet, and that's possible because we're clipping these smaller shapes with the bigger planet. So to create this animation, we just move the 3 circles from left to right. And at the same time, we'll animate the rotation of the planet itself.

And now we have this effect where it looks like the smaller shapes are creating an eclipse shadow on the bigger planet. And hopefully, you're seeing how simple these animations actually are compared to how they look when you first see them. Next up, we have the plus sign that transforms into a camera and then flashes a picture. This one is a little more complex because we need to actually animate the vertices into a brand new shape. So in this case, you kind of need to plan ahead to make sure that your plus sign can actually transform into the shape that you want.

After we convert the plus sign into a camera, we then scale up a circle in the middle, and that gives us an effect that looks like the flash of a camera. By far, the most difficult animation is the house because it creates this 3 d rotating effect in a 2 d animation environment, Kind of like how they built the original Doom video game. To make this look decent, I first created a clipping box around the house, and then I created a bunch of shapes that outline the various walls in the house. Then I very tediously animated the vertices from one side to the other. I did that very carefully step by step and then I animated in a new door from the left side.

Now that we have all these awesome animations, it's time to export them to Flutter. Go ahead and click the export icon, and you want the binary of the file, which you can just save in the assets directory of your app. Flutter maintains a package that allows you to run your graphics in the Flutter engine. Go ahead and add it as a dependency to your project by adding it to the pubspec YAML file. And while we're in this file we can also register our assets directory as assets in the Flutter app.

If we jump into the main dot dart file you can see that I just have a material scaffold set up. Then I have our custom Navbar centered in the middle of the screen. I'm only doing that for presentation reasons for this video. All of the meaningful code will be implemented in this Navbar stateful widget. We're starting out here with just an empty stateful widget, and I'm also defining my own class called menu item.

This is just a simple abstraction that we'll use to help us organize the code for each individual item in the menu. Name represents the dotflr file that we have saved in the assets folder. Color is just the color of the top border when this menu item is active, and then x is the alignment on the x axis. Now going into the stateful widget will define a list of these menu items. The important thing here is the x value which defines the alignment of that top border when the menu item is active.

We could do this programmatically, but since we have a fixed number of items this menu, I felt like this was the most clear way to do it for this demo. An x value of negative one means that it will be aligned to the very far left of the screen, And an x value of positive one means that it would be to the very far right of the screen, and 0 would be directly in the middle. We can go ahead and fill out the data for the rest of these menu items, And then we'll override a knit state to set one of the items to active when the app is first initialized. In order to make this menu responsive, I'm going to first set A variable for w, which is a media query of the width of the viewport. From there, I'm returning a container, which has a height of 80, which will define the actual height of the menu itself.

Then its child is a stack, and inside that stack, we have 2 elements. The first one being that colored bar that moves across the screen when a menu item becomes active. The great thing about Flutter is that we can easily animate the motion of that top bar by using an animated container. We'll set the duration to 200 milliseconds, And then we'll set the alignment to the alignment of the active menu item. This means Flutter will automatically animate the movement of that top bar whenever the active menu item changes.

We don't need any animation controllers or anything like that. Flutter just does it for us automatically. Now I want the color of the top bar to be animated as well, so I'm just going to nest another animated container directly inside out of this one. I'm going to give this one a longer animation, set its height to 8, and then give it a width that's based on the number of menu items in the menu. 4 or 5 items, that means each item will take up 20% of the available width.

That's all it takes to build the animated indicator above the icons. Now we're going to set up a row that will hold the icons themselves. Bells. The row is very straightforward. For the main axis alignment, we'll use space around.

That will ensure that that top indicator is perfectly centered on top of the icon. Then we'll set the cross axis alignment to end so the items sit at the bottom of the row. Then to create the children, I'm looping over the items list And then mapping the list to a method called flare which will build the actual widgets for each individual item. The flare method takes a menu item as its argument, and then the first widget it Turns is a gesture detector. This is how we turn our animated icon into a button.

We can listen to the on tap event and then when that happens, we'll set this item to the active item on the Date full widget. And in doing so, we will trigger all of the animated properties on this widget. From there, I'm going to use the aspect ratio widget set to 1 just to keep this widget set as a perfect square. Go ahead and give it some padding on the top and then we'll set the child as the Flare actor widget which comes from the Flare library. The first argument is just the path to the FLR file, which in our case is in the assets directory.

We have the option to set the alignment, the fit, and a bunch of other things. But in order to run an animation, we need to pass it an animation property. The value should be the name of the animation that you define when creating this graphic in Flare. In our case, we gave all of our animations the same name of go. So we'll go ahead and use that animation name whenever this item is active.

Otherwise, we'll just pass it a string of idle which will do nothing. And that's all there is to it. By combining the powers of Flare and Flutter, we were able to take a navigation menu that seemed extremely complex on the surface, recreate it with minimal effort, and be able to run it on iOS and Android without sacrificing quality. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe.

And if you want access to even more content, consider becoming a pro member at Fireship IO. Thanks for watching, and I will talk to you soon.
I bet you folks don't have one of these. I want that. You see, this I think you're run of the mill crapperware. One of the coolest navigation menus I've seen in a long time comes from the Giphy mobile app. In today's video, you'll learn how to build this menu from Scratch using Flutter and an awesome 2 d animation tool called Flare. By the end of this video, you'll understand the fundamentals of vector animation and how to turn your creations into interactive UI elements that render at 60 FPS.
animation
toys
graphic design
If you're new here like and subscribe and I recommend following along with the source code on Fireship IO. Let's take a closer look at the entire menu itself.
Focus on the bar that hovers above the icons. You'll notice when an icon becomes active it slides to a new position and also animates the color. We can achieve that effect very easily in Flutter natively by simply using a combination of a stateful widget and an animated container. But the icons themselves are obviously using much more advanced animation sequences here. Hypothetically, we could implement these using nothing but a custom painter and some Dart code. But fortunately, there's a design tool called Flare that makes it easy to create complex vector animations, which can then be exported and run natively in Flutter's engine at 60 FPS. Throughout this video, I want to teach you the fundamental concepts required to build animated UI elements. You don't need to be a graphic designer or an artist. You just need to know a few key concepts about animation and you can start building your own interactive UI elements that look just as good as the Giphy mobile app. First thing you'll wanna do is sign up for a free Flare account and then go ahead and create a new file. You'll see the artboard here in the center of the screen, that's the canvas that we use to draw the graphics. When working in design mode, you'll notice that flare is very similar to other design tools like Figma or Adobe Illustrator. On the left side of the screen, you'll see we have a hierarchy of shapes, So the artboard is at the top and then we can layer in additional shapes as needed. In the top menu, you'll see a handful of different tools for drawing shapes. I'm going to draw a star and then show you all the different techniques that we can use to animate it. In total, we'll look at 5 different ways to animate shapes, then you can use a combination of these techniques build every single icon in the Giphy native menu that I showed you earlier, and we'll look at each of those icons individually in just a few minutes. After you place a shape on the artboard, there's a few keys that you wanna remember to quickly access the tools to move it and resize it. Hit t for translate, which allows you to move the object. Hit s for scale to resize the object and r for rotate to rotate it. When you have a shape selected, this menu on the right will appear which allows you to modify its properties. When it comes animated icons, you generally want them to be centered directly in the artboard and also take up as much of the y space as possible. When it comes to colors, shapes can have a fill color, and they can also have a Stroke, which is basically a border or an outline around the shape.
animation
graphic design
crafts
visualization
art
robotics
geometry
I'm going to remove the stroke for now, and the first animation that we'll build is just an interpolation from one color to another color. This is where we start to see the superpowers of flare. So currently, we're in design mode, but now we can switch over to animate mode, and this will bring up a timeline down at the bottom. You can create multiple animations in a single file and give those animations names. That's important because when we get to Flutter, we can run animations programmatically based on the In this demo, every icon just has one animation named go. In animate mode, you'll notice that every property on the shape now has this little diamond symbol next to it. You can click it to create a keyframe on the timeline. A keyframe is just a representation of that property at a specific point in time. So if you have 2 key frames at different points in time, Flare will automatically animate between those 2 key frames. We can move to any frame in the animation by sliding the scrubber. For this first animation, we'll just go ahead and slide all the way to the end, and then we'll change the fill color to yellow. If we start scrubbing the timeline, you'll notice that our star changes from gray to yellow. And that's basically how all animation works. You just start with one value and then change to a different value over time. And that brings me to the first actual technique, which is animating the transform of the shape. And by transform, I'm referring to the position, the scale, or the rotation of the shape. Starting at the beginning of the timeline, I'll go ahead and set keyframes for the x and y values for Scale and also for the rotation. Then we'll move the timeline to the end and set a rotation value of 360 degrees. Now we also want the star to start invisible and then scale up as the animation progresses. We'll go back to the beginning and then set these scale values to 0. We'll also make sure to set a keyframe at the end with the desired scale value. So this is starting to look pretty cool, but how can we make this look a little more lifelike? That brings me to concept number 2, timing. By default, Flair will calculate the values in between your key frames with a linear function. But when it comes to motion graphics, it's often better to have this function ease so it starts or ends a little bit Slower or a little bit faster. We can do this easily in Flare by highlighting a set of keyframes and then clicking on the key interpolation menu.
animation
geometry
modeling
graphic design
visualization
astronomy
This will change the way the actual in between values are calculated.
For example, we can make a curve that starts off really fast and then eases out very slowly. And that tends to be more appealing to human beings because that's the way motion works in the natural world. Now we're ready for technique 3, animating the vertices of the shape. Vector graphics are made up of a series of points and we can modify those points to animate the underlying shape itself. Create a keyframe next to the edit vertices button and then click that button. You'll see a bunch of circles appear on the shape. These represent its vertices. Let's go ahead and do this animation in multiple steps. Move a little bit forward on the timeline then adjust some of the points in the shape, move a little bit forward again and do the same thing and so on and so on. After you've done that a few times, it will create this animation that sort of looks like the star is waving its hands up and down. As you can imagine, changing the vertices can lead to some very cool looking and complex animation. But the next technique I wanna show you is how to animate the stroke of a shape. We can use the stroke to make it look like we're actually drawing the shape by hand in our animation. Go back to design mode and then remove the fill and then add a stroke with whatever color you want, and a size of 50 looks pretty good for these Giphy animations.
animation
visualization
graphic design
geometry
art
exercise
robotics
modeling
From there, I'm going to set the trim path to sequential. From there, we can change the ending value and you might be able to imagine how we can use this to animate the stroke in to make it look like it's drawing around the outline of shade.
Go back to animate mode and set a key frame that starts the stroke with an ending point of 0% and then finishes with 100%. And now you have this cool hand drawn icon with almost no effort. That brings me to the 5th and final animation technique, clipping. Clipping allows you to control the visibility of a shape when it's inside of another Hyper shape. Let's go back into design mode and we'll draw a circle and then remove the fill and the stroke from that circle.
animation
photography
It's going to serve as an invisible mask for the star. From there, go ahead and select the star and then hit the clipping button. It will ask you to select a parent which is the circle shape.
Now the circle is basically a window and the star is only visible inside that window. As we move it around, you can see how it partially hides the star. If we go back to animate mode, we'll go ahead and set our first keyframe for the star all the way over to the left and then we'll translate the shape all the way to the right. And just a side note, if you grab the red arrow it will move it perfectly along the horizontal axis. And now we have this animation where it looks like the star is sliding through some invisible window. Now that you know these five techniques, I want to show you how I combine them to recreate Giphy's navigation menu. We'll look at these in order of difficulties starting with the easiest one which is the heart. Because Flair is web based, you can basically open source your designs, so feel free to check those out on my Flair profile.
animation
geometry
astronomy
graphic design
visualization
I didn't actually draw the heart myself, but instead just imported it as an asset and then use Flare to handle the animation aspect of it. To create a heartbeat effect, all you have to do is scale the shape up and down and that's about as easy as it gets. The next one we'll look at is the headless guy And you can see we actually have 3 shapes here. We have the head that's currently visible, we have an invisible head, and then the body. To make the head roll off, we just set a series keyframes that move it along the path of the body. And we do that until it falls completely off of the artboard.
The invisible head is sitting exactly where the original head was, And we can replace it by just increasing the opacity from 0 to 1, and that just fades in a new head in the old head's place. The next animation we'll look at is the planet. On this one, you'll notice we have 3 circles that are only visible when they're inside of the bigger planet, and that's possible because we're clipping these smaller shapes with the bigger planet. So to create this animation, we just move the 3 circles from left to right. And at the same time, we'll animate the rotation of the planet itself. And now we have this effect where it looks like the smaller shapes are creating an eclipse shadow on the bigger planet. And hopefully, you're seeing how simple these animations actually are compared to how they look when you first see them. Next up, we have the plus sign that transforms into a camera and then flashes a picture. This one is a little more complex because we need to actually animate the vertices into a brand new shape. So in this case, you kind of need to plan ahead to make sure that your plus sign can actually transform into the shape that you want.
geometry
animation
earth
graphic design
astronomy
robotics
After we convert the plus sign into a camera, we then scale up a circle in the middle, and that gives us an effect that looks like the flash of a camera. By far, the most difficult animation is the house because it creates this 3 d rotating effect in a 2 d animation environment, Kind of like how they built the original Doom video game. To make this look decent, I first created a clipping box around the house, and then I created a bunch of shapes that outline the various walls in the house. Then I very tediously animated the vertices from one side to the other. I did that very carefully step by step and then I animated in a new door from the left side. Now that we have all these awesome animations, it's time to export them to Flutter. Go ahead and click the export icon, and you want the binary of the file, which you can just save in the assets directory of your app. Flutter maintains a package that allows you to run your graphics in the Flutter engine.
animation
geometry
graphic design
robotics
youtube
Go ahead and add it as a dependency to your project by adding it to the pubspec YAML file. And while we're in this file we can also register our assets directory as assets in the Flutter app. If we jump into the main dot dart file you can see that I just have a material scaffold set up.
Then I have our custom Navbar centered in the middle of the screen. I'm only doing that for presentation reasons for this video. All of the meaningful code will be implemented in this Navbar stateful widget. We're starting out here with just an empty stateful widget, and I'm also defining my own class called menu item.
visualization
graphic design
This is just a simple abstraction that we'll use to help us organize the code for each individual item in the menu. Name represents the dotflr file that we have saved in the assets folder. Color is just the color of the top border when this menu item is active, and then x is the alignment on the x axis. Now going into the stateful widget will define a list of these menu items. The important thing here is the x value which defines the alignment of that top border when the menu item is active. We could do this programmatically, but since we have a fixed number of items this menu, I felt like this was the most clear way to do it for this demo. An x value of negative one means that it will be aligned to the very far left of the screen, And an x value of positive one means that it would be to the very far right of the screen, and 0 would be directly in the middle. We can go ahead and fill out the data for the rest of these menu items, And then we'll override a knit state to set one of the items to active when the app is first initialized. In order to make this menu responsive, I'm going to first set A variable for w, which is a media query of the width of the viewport. From there, I'm returning a container, which has a height of 80, which will define the actual height of the menu itself. Then its child is a stack, and inside that stack, we have 2 elements.
The first one being that colored bar that moves across the screen when a menu item becomes active. The great thing about Flutter is that we can easily animate the motion of that top bar by using an animated container. We'll set the duration to 200 milliseconds, And then we'll set the alignment to the alignment of the active menu item. This means Flutter will automatically animate the movement of that top bar whenever the active menu item changes. We don't need any animation controllers or anything like that. Flutter just does it for us automatically. Now I want the color of the top bar to be animated as well, so I'm just going to nest another animated container directly inside out of this one. I'm going to give this one a longer animation, set its height to 8, and then give it a width that's based on the number of menu items in the menu. 4 or 5 items, that means each item will take up 20% of the available width. That's all it takes to build the animated indicator above the icons.
animation
graphic design
Now we're going to set up a row that will hold the icons themselves. Bells. The row is very straightforward. For the main axis alignment, we'll use space around. That will ensure that that top indicator is perfectly centered on top of the icon. Then we'll set the cross axis alignment to end so the items sit at the bottom of the row. Then to create the children, I'm looping over the items list And then mapping the list to a method called flare which will build the actual widgets for each individual item. The flare method takes a menu item as its argument, and then the first widget it Turns is a gesture detector. This is how we turn our animated icon into a button.
We can listen to the on tap event and then when that happens, we'll set this item to the active item on the Date full widget. And in doing so, we will trigger all of the animated properties on this widget. From there, I'm going to use the aspect ratio widget set to 1 just to keep this widget set as a perfect square. Go ahead and give it some padding on the top and then we'll set the child as the Flare actor widget which comes from the Flare library.
animation
The first argument is just the path to the FLR file, which in our case is in the assets directory. We have the option to set the alignment, the fit, and a bunch of other things. But in order to run an animation, we need to pass it an animation property. The value should be the name of the animation that you define when creating this graphic in Flare. In our case, we gave all of our animations the same name of go. So we'll go ahead and use that animation name whenever this item is active. Otherwise, we'll just pass it a string of idle which will do nothing. And that's all there is to it. By combining the powers of Flare and Flutter, we were able to take a navigation menu that seemed extremely complex on the surface, recreate it with minimal effort, and be able to run it on iOS and Android without sacrificing quality.
animation
I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to even more content, consider becoming a pro member at Fireship IO. Thanks for watching, and I will talk to you soon.
social media
youtube
media
streaming
I bet you folks don't have one of these. I want that. You see, this I think you're run of the mill crapperware. One of the coolest navigation menus I've seen in a long time comes from the Giphy mobile app. In today's video, you'll learn how to build this menu from Scratch using Flutter and an awesome 2 d animation tool called Flare. By the end of this video, you'll understand the fundamentals of vector animation and how to turn your creations into interactive UI elements that render at 60 FPS. If you're new here like and subscribe and I recommend following along with the source code on Fireship IO. Let's take a closer look at the entire menu itself. Focus on the bar that hovers above the icons. You'll notice when an icon becomes active it slides to a new position and also animates the color. We can achieve that effect very easily in Flutter natively by simply using a combination of a stateful widget and an animated container. But the icons themselves are obviously using much more advanced animation sequences here. Hypothetically, we could implement these using nothing but a custom painter and some Dart code. But fortunately, there's a design tool called Flare that makes it easy to create complex vector animations, which can then be exported and run natively in Flutter's engine at 60 FPS. Throughout this video, I want to teach you the fundamental concepts required to build animated UI elements. You don't need to be a graphic designer or an artist. You just need to know a few key concepts about animation and you can start building your own interactive UI elements that look just as good as the Giphy mobile app. First thing you'll wanna do is sign up for a free Flare account and then go ahead and create a new file. You'll see the artboard here in the center of the screen, that's the canvas that we use to draw the graphics. When working in design mode, you'll notice that flare is very similar to other design tools like Figma or Adobe Illustrator. On the left side of the screen, you'll see we have a hierarchy of shapes, So the artboard is at the top and then we can layer in additional shapes as needed. In the top menu, you'll see a handful of different tools for drawing shapes. I'm going to draw a star and then show you all the different techniques that we can use to animate it. In total, we'll look at 5 different ways to animate shapes, then you can use a combination of these techniques build every single icon in the Giphy native menu that I showed you earlier, and we'll look at each of those icons individually in just a few minutes. After you place a shape on the artboard, there's a few keys that you wanna remember to quickly access the tools to move it and resize it. Hit t for translate, which allows you to move the object. Hit s for scale to resize the object and r for rotate to rotate it. When you have a shape selected, this menu on the right will appear which allows you to modify its properties. When it comes animated icons, you generally want them to be centered directly in the artboard and also take up as much of the y space as possible. When it comes to colors, shapes can have a fill color, and they can also have a Stroke, which is basically a border or an outline around the shape. I'm going to remove the stroke for now, and the first animation that we'll build is just an interpolation from one color to another color. This is where we start to see the superpowers of flare. So currently, we're in design mode, but now we can switch over to animate mode, and this will bring up a timeline down at the bottom. You can create multiple animations in a single file and give those animations names. That's important because when we get to Flutter, we can run animations programmatically based on the In this demo, every icon just has one animation named go. In animate mode, you'll notice that every property on the shape now has this little diamond symbol next to it. You can click it to create a keyframe on the timeline. A keyframe is just a representation of that property at a specific point in time. So if you have 2 key frames at different points in time, Flare will automatically animate between those 2 key frames. We can move to any frame in the animation by sliding the scrubber. For this first animation, we'll just go ahead and slide all the way to the end, and then we'll change the fill color to yellow. If we start scrubbing the timeline, you'll notice that our star changes from gray to yellow. And that's basically how all animation works. You just start with one value and then change to a different value over time. And that brings me to the first actual technique, which is animating the transform of the shape. And by transform, I'm referring to the position, the scale, or the rotation of the shape. Starting at the beginning of the timeline, I'll go ahead and set keyframes for the x and y values for Scale and also for the rotation. Then we'll move the timeline to the end and set a rotation value of 360 degrees. Now we also want the star to start invisible and then scale up as the animation progresses. We'll go back to the beginning and then set these scale values to 0. We'll also make sure to set a keyframe at the end with the desired scale value. So this is starting to look pretty cool, but how can we make this look a little more lifelike? That brings me to concept number 2, timing. By default, Flair will calculate the values in between your key frames with a linear function. But when it comes to motion graphics, it's often better to have this function ease so it starts or ends a little bit Slower or a little bit faster. We can do this easily in Flare by highlighting a set of keyframes and then clicking on the key interpolation menu. This will change the way the actual in between values are calculated. For example, we can make a curve that starts off really fast and then eases out very slowly. And that tends to be more appealing to human beings because that's the way motion works in the natural world. Now we're ready for technique 3, animating the vertices of the shape. Vector graphics are made up of a series of points and we can modify those points to animate the underlying shape itself. Create a keyframe next to the edit vertices button and then click that button. You'll see a bunch of circles appear on the shape. These represent its vertices. Let's go ahead and do this animation in multiple steps. Move a little bit forward on the timeline then adjust some of the points in the shape, move a little bit forward again and do the same thing and so on and so on. After you've done that a few times, it will create this animation that sort of looks like the star is waving its hands up and down. As you can imagine, changing the vertices can lead to some very cool looking and complex animation. But the next technique I wanna show you is how to animate the stroke of a shape. We can use the stroke to make it look like we're actually drawing the shape by hand in our animation. Go back to design mode and then remove the fill and then add a stroke with whatever color you want, and a size of 50 looks pretty good for these Giphy animations. From there, I'm going to set the trim path to sequential. From there, we can change the ending value and you might be able to imagine how we can use this to animate the stroke in to make it look like it's drawing around the outline of shade. Go back to animate mode and set a key frame that starts the stroke with an ending point of 0% and then finishes with 100%. And now you have this cool hand drawn icon with almost no effort. That brings me to the 5th and final animation technique, clipping. Clipping allows you to control the visibility of a shape when it's inside of another Hyper shape. Let's go back into design mode and we'll draw a circle and then remove the fill and the stroke from that circle. It's going to serve as an invisible mask for the star. From there, go ahead and select the star and then hit the clipping button. It will ask you to select a parent which is the circle shape. Now the circle is basically a window and the star is only visible inside that window. As we move it around, you can see how it partially hides the star. If we go back to animate mode, we'll go ahead and set our first keyframe for the star all the way over to the left and then we'll translate the shape all the way to the right. And just a side note, if you grab the red arrow it will move it perfectly along the horizontal axis. And now we have this animation where it looks like the star is sliding through some invisible window. Now that you know these five techniques, I want to show you how I combine them to recreate Giphy's navigation menu. We'll look at these in order of difficulties starting with the easiest one which is the heart. Because Flair is web based, you can basically open source your designs, so feel free to check those out on my Flair profile. I didn't actually draw the heart myself, but instead just imported it as an asset and then use Flare to handle the animation aspect of it. To create a heartbeat effect, all you have to do is scale the shape up and down and that's about as easy as it gets. The next one we'll look at is the headless guy And you can see we actually have 3 shapes here. We have the head that's currently visible, we have an invisible head, and then the body. To make the head roll off, we just set a series keyframes that move it along the path of the body. And we do that until it falls completely off of the artboard. The invisible head is sitting exactly where the original head was, And we can replace it by just increasing the opacity from 0 to 1, and that just fades in a new head in the old head's place. The next animation we'll look at is the planet. On this one, you'll notice we have 3 circles that are only visible when they're inside of the bigger planet, and that's possible because we're clipping these smaller shapes with the bigger planet. So to create this animation, we just move the 3 circles from left to right. And at the same time, we'll animate the rotation of the planet itself. And now we have this effect where it looks like the smaller shapes are creating an eclipse shadow on the bigger planet. And hopefully, you're seeing how simple these animations actually are compared to how they look when you first see them. Next up, we have the plus sign that transforms into a camera and then flashes a picture. This one is a little more complex because we need to actually animate the vertices into a brand new shape. So in this case, you kind of need to plan ahead to make sure that your plus sign can actually transform into the shape that you want. After we convert the plus sign into a camera, we then scale up a circle in the middle, and that gives us an effect that looks like the flash of a camera. By far, the most difficult animation is the house because it creates this 3 d rotating effect in a 2 d animation environment, Kind of like how they built the original Doom video game. To make this look decent, I first created a clipping box around the house, and then I created a bunch of shapes that outline the various walls in the house. Then I very tediously animated the vertices from one side to the other. I did that very carefully step by step and then I animated in a new door from the left side. Now that we have all these awesome animations, it's time to export them to Flutter. Go ahead and click the export icon, and you want the binary of the file, which you can just save in the assets directory of your app. Flutter maintains a package that allows you to run your graphics in the Flutter engine. Go ahead and add it as a dependency to your project by adding it to the pubspec YAML file. And while we're in this file we can also register our assets directory as assets in the Flutter app. If we jump into the main dot dart file you can see that I just have a material scaffold set up. Then I have our custom Navbar centered in the middle of the screen. I'm only doing that for presentation reasons for this video. All of the meaningful code will be implemented in this Navbar stateful widget. We're starting out here with just an empty stateful widget, and I'm also defining my own class called menu item. This is just a simple abstraction that we'll use to help us organize the code for each individual item in the menu. Name represents the dotflr file that we have saved in the assets folder. Color is just the color of the top border when this menu item is active, and then x is the alignment on the x axis. Now going into the stateful widget will define a list of these menu items. The important thing here is the x value which defines the alignment of that top border when the menu item is active. We could do this programmatically, but since we have a fixed number of items this menu, I felt like this was the most clear way to do it for this demo. An x value of negative one means that it will be aligned to the very far left of the screen, And an x value of positive one means that it would be to the very far right of the screen, and 0 would be directly in the middle. We can go ahead and fill out the data for the rest of these menu items, And then we'll override a knit state to set one of the items to active when the app is first initialized. In order to make this menu responsive, I'm going to first set A variable for w, which is a media query of the width of the viewport. From there, I'm returning a container, which has a height of 80, which will define the actual height of the menu itself. Then its child is a stack, and inside that stack, we have 2 elements. The first one being that colored bar that moves across the screen when a menu item becomes active. The great thing about Flutter is that we can easily animate the motion of that top bar by using an animated container. We'll set the duration to 200 milliseconds, And then we'll set the alignment to the alignment of the active menu item. This means Flutter will automatically animate the movement of that top bar whenever the active menu item changes. We don't need any animation controllers or anything like that. Flutter just does it for us automatically. Now I want the color of the top bar to be animated as well, so I'm just going to nest another animated container directly inside out of this one. I'm going to give this one a longer animation, set its height to 8, and then give it a width that's based on the number of menu items in the menu. 4 or 5 items, that means each item will take up 20% of the available width. That's all it takes to build the animated indicator above the icons. Now we're going to set up a row that will hold the icons themselves. Bells. The row is very straightforward. For the main axis alignment, we'll use space around. That will ensure that that top indicator is perfectly centered on top of the icon. Then we'll set the cross axis alignment to end so the items sit at the bottom of the row. Then to create the children, I'm looping over the items list And then mapping the list to a method called flare which will build the actual widgets for each individual item. The flare method takes a menu item as its argument, and then the first widget it Turns is a gesture detector. This is how we turn our animated icon into a button. We can listen to the on tap event and then when that happens, we'll set this item to the active item on the Date full widget. And in doing so, we will trigger all of the animated properties on this widget. From there, I'm going to use the aspect ratio widget set to 1 just to keep this widget set as a perfect square. Go ahead and give it some padding on the top and then we'll set the child as the Flare actor widget which comes from the Flare library. The first argument is just the path to the FLR file, which in our case is in the assets directory. We have the option to set the alignment, the fit, and a bunch of other things. But in order to run an animation, we need to pass it an animation property. The value should be the name of the animation that you define when creating this graphic in Flare. In our case, we gave all of our animations the same name of go. So we'll go ahead and use that animation name whenever this item is active. Otherwise, we'll just pass it a string of idle which will do nothing. And that's all there is to it. By combining the powers of Flare and Flutter, we were able to take a navigation menu that seemed extremely complex on the surface, recreate it with minimal effort, and be able to run it on iOS and Android without sacrificing quality. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to even more content, consider becoming a pro member at Fireship IO. Thanks for watching, and I will talk to you soon.
I
i
bet
bet
you
you
folks
folks
don't
don't
have
have
one
one
of
of
these.
these
I
i
want
want
that.
that
You
you
see,
see
this
this
I
i
think
think
you're
you're
run
run
of
of
the
the
mill
mill
crapperware.
crapperware
One
one
of
of
the
the
coolest
coolest
navigation
navigation
menus
menus
I've
i've
seen
seen
in
in
a
a
long
long
time
time
comes
comes
from
from
the
the
Giphy
giphy
mobile
mobile
app.
app
In
in
today's
today's
video,
video
you'll
you'll
learn
learn
how
how
to
to
build
build
this
this
menu
menu
from
from
Scratch
scratch
using
using
Flutter
flutter
and
and
an
an
awesome
awesome
2
2
d
d
animation
animation
tool
tool
called
called
Flare.
flare
By
by
the
the
end
end
of
of
this
this
video,
video
you'll
you'll
understand
understand
the
the
fundamentals
fundamentals
of
of
vector
vector
animation
animation
and
and
how
how
to
to
turn
turn
your
your
creations
creations
into
into
interactive
interactive
UI
ui
elements
elements
that
that
render
render
at
at
60
60
FPS.
fps
If
if
you're
you're
new
new
here
here
like
like
and
and
subscribe
subscribe
and
and
I
i
recommend
recommend
following
following
along
along
with
with
the
the
source
source
code
code
on
on
Fireship
fireship
IO.
io
Let's
let's
take
take
a
a
closer
closer
look
look
at
at
the
the
entire
entire
menu
menu
itself.
itself
Focus
focus
on
on
the
the
bar
bar
that
that
hovers
hovers
above
above
the
the
icons.
icons
You'll
you'll
notice
notice
when
when
an
an
icon
icon
becomes
becomes
active
active
it
it
slides
slides
to
to
a
a
new
new
position
position
and
and
also
also
animates
animates
the
the
color.
color
We
we
can
can
achieve
achieve
that
that
effect
effect
very
very
easily
easily
in
in
Flutter
flutter
natively
natively
by
by
simply
simply
using
using
a
a
combination
combination
of
of
a
a
stateful
stateful
widget
widget
and
and
an
an
animated
animated
container.
container
But
but
the
the
icons
icons
themselves
themselves
are
are
obviously
obviously
using
using
much
much
more
more
advanced
advanced
animation
animation
sequences
sequences
here.
here
Hypothetically,
hypothetically
we
we
could
could
implement
implement
these
these
using
using
nothing
nothing
but
but
a
a
custom
custom
painter
painter
and
and
some
some
Dart
dart
code.
code
But
but
fortunately,
fortunately
there's
there's
a
a
design
design
tool
tool
called
called
Flare
flare
that
that
makes
makes
it
it
easy
easy
to
to
create
create
complex
complex
vector
vector
animations,
animations
which
which
can
can
then
then
be
be
exported
exported
and
and
run
run
natively
natively
in
in
Flutter's
flutter's
engine
engine
at
at
60
60
FPS.
fps
Throughout
throughout
this
this
video,
video
I
i
want
want
to
to
teach
teach
you
you
the
the
fundamental
fundamental
concepts
concepts
required
required
to
to
build
build
animated
animated
UI
ui
elements.
elements
You
you
don't
don't
need
need
to
to
be
be
a
a
graphic
graphic
designer
designer
or
or
an
an
artist.
artist
You
you
just
just
need
need
to
to
know
know
a
a
few
few
key
key
concepts
concepts
about
about
animation
animation
and
and
you
you
can
can
start
start
building
building
your
your
own
own
interactive
interactive
UI
ui
elements
elements
that
that
look
look
just
just
as
as
good
good
as
as
the
the
Giphy
giphy
mobile
mobile
app.
app
First
first
thing
thing
you'll
you'll
wanna
wanna
do
do
is
is
sign
sign
up
up
for
for
a
a
free
free
Flare
flare
account
account
and
and
then
then
go
go
ahead
ahead
and
and
create
create
a
a
new
new
file.
file
You'll
you'll
see
see
the
the
artboard
artboard
here
here
in
in
the
the
center
center
of
of
the
the
screen,
screen
that's
that's
the
the
canvas
canvas
that
that
we
we
use
use
to
to
draw
draw
the
the
graphics.
graphics
When
when
working
working
in
in
design
design
mode,
mode
you'll
you'll
notice
notice
that
that
flare
flare
is
is
very
very
similar
similar
to
to
other
other
design
design
tools
tools
like
like
Figma
figma
or
or
Adobe
adobe
Illustrator.
illustrator
On
on
the
the
left
left
side
side
of
of
the
the
screen,
screen
you'll
you'll
see
see
we
we
have
have
a
a
hierarchy
hierarchy
of
of
shapes,
shapes
So
so
the
the
artboard
artboard
is
is
at
at
the
the
top
top
and
and
then
then
we
we
can
can
layer
layer
in
in
additional
additional
shapes
shapes
as
as
needed.
needed
In
in
the
the
top
top
menu,
menu
you'll
you'll
see
see
a
a
handful
handful
of
of
different
different
tools
tools
for
for
drawing
drawing
shapes.
shapes
I'm
i'm
going
going
to
to
draw
draw
a
a
star
star
and
and
then
then
show
show
you
you
all
all
the
the
different
different
techniques
techniques
that
that
we
we
can
can
use
use
to
to
animate
animate
it.
it
In
in
total,
total
we'll
we'll
look
look
at
at
5
5
different
different
ways
ways
to
to
animate
animate
shapes,
shapes
then
then
you
you
can
can
use
use
a
a
combination
combination
of
of
these
these
techniques
techniques
build
build
every
every
single
single
icon
icon
in
in
the
the
Giphy
giphy
native
native
menu
menu
that
that
I
i
showed
showed
you
you
earlier,
earlier
and
and
we'll
we'll
look
look
at
at
each
each
of
of
those
those
icons
icons
individually
individually
in
in
just
just
a
a
few
few
minutes.
minutes
After
after
you
you
place
place
a
a
shape
shape
on
on
the
the
artboard,
artboard
there's
there's
a
a
few
few
keys
keys
that
that
you
you
wanna
wanna
remember
remember
to
to
quickly
quickly
access
access
the
the
tools
tools
to
to
move
move
it
it
and
and
resize
resize
it.
it
Hit
hit
t
t
for
for
translate,
translate
which
which
allows
allows
you
you
to
to
move
move
the
the
object.
object
Hit
hit
s
s
for
for
scale
scale
to
to
resize
resize
the
the
object
object
and
and
r
r
for
for
rotate
rotate
to
to
rotate
rotate
it.
it
When
when
you
you
have
have
a
a
shape
shape
selected,
selected
this
this
menu
menu
on
on
the
the
right
right
will
will
appear
appear
which
which
allows
allows
you
you
to
to
modify
modify
its
its
properties.
properties
When
when
it
it
comes
comes
animated
animated
icons,
icons
you
you
generally
generally
want
want
them
them
to
to
be
be
centered
centered
directly
directly
in
in
the
the
artboard
artboard
and
and
also
also
take
take
up
up
as
as
much
much
of
of
the
the
y
y
space
space
as
as
possible.
possible
When
when
it
it
comes
comes
to
to
colors,
colors
shapes
shapes
can
can
have
have
a
a
fill
fill
color,
color
and
and
they
they
can
can
also
also
have
have
a
a
Stroke,
stroke
which
which
is
is
basically
basically
a
a
border
border
or
or
an
an
outline
outline
around
around
the
the
shape.
shape
I'm
i'm
going
going
to
to
remove
remove
the
the
stroke
stroke
for
for
now,
now
and
and
the
the
first
first
animation
animation
that
that
we'll
we'll
build
build
is
is
just
just
an
an
interpolation
interpolation
from
from
one
one
color
color
to
to
another
another
color.
color
This
this
is
is
where
where
we
we
start
start
to
to
see
see
the
the
superpowers
superpowers
of
of
flare.
flare
So
so
currently,
currently
we're
we're
in
in
design
design
mode,
mode
but
but
now
now
we
we
can
can
switch
switch
over
over
to
to
animate
animate
mode,
mode
and
and
this
this
will
will
bring
bring
up
up
a
a
timeline
timeline
down
down
at
at
the
the
bottom.
bottom
You
you
can
can
create
create
multiple
multiple
animations
animations
in
in
a
a
single
single
file
file
and
and
give
give
those
those
animations
animations
names.
names
That's
that's
important
important
because
because
when
when
we
we
get
get
to
to
Flutter,
flutter
we
we
can
can
run
run
animations
animations
programmatically
programmatically
based
based
on
on
the
the
In
in
this
this
demo,
demo
every
every
icon
icon
just
just
has
has
one
one
animation
animation
named
named
go.
go
In
in
animate
animate
mode,
mode
you'll
you'll
notice
notice
that
that
every
every
property
property
on
on
the
the
shape
shape
now
now
has
has
this
this
little
little
diamond
diamond
symbol
symbol
next
next
to
to
it.
it
You
you
can
can
click
click
it
it
to
to
create
create
a
a
keyframe
keyframe
on
on
the
the
timeline.
timeline
A
a
keyframe
keyframe
is
is
just
just
a
a
representation
representation
of
of
that
that
property
property
at
at
a
a
specific
specific
point
point
in
in
time.
time
So
so
if
if
you
you
have
have
2
2
key
key
frames
frames
at
at
different
different
points
points
in
in
time,
time
Flare
flare
will
will
automatically
automatically
animate
animate
between
between
those
those
2
2
key
key
frames.
frames
We
we
can
can
move
move
to
to
any
any
frame
frame
in
in
the
the
animation
animation
by
by
sliding
sliding
the
the
scrubber.
scrubber
For
for
this
this
first
first
animation,
animation
we'll
we'll
just
just
go
go
ahead
ahead
and
and
slide
slide
all
all
the
the
way
way
to
to
the
the
end,
end
and
and
then
then
we'll
we'll
change
change
the
the
fill
fill
color
color
to
to
yellow.
yellow
If
if
we
we
start
start
scrubbing
scrubbing
the
the
timeline,
timeline
you'll
you'll
notice
notice
that
that
our
our
star
star
changes
changes
from
from
gray
gray
to
to
yellow.
yellow
And
and
that's
that's
basically
basically
how
how
all
all
animation
animation
works.
works
You
you
just
just
start
start
with
with
one
one
value
value
and
and
then
then
change
change
to
to
a
a
different
different
value
value
over
over
time.
time
And
and
that
that
brings
brings
me
me
to
to
the
the
first
first
actual
actual
technique,
technique
which
which
is
is
animating
animating
the
the
transform
transform
of
of
the
the
shape.
shape
And
and
by
by
transform,
transform
I'm
i'm
referring
referring
to
to
the
the
position,
position
the
the
scale,
scale
or
or
the
the
rotation
rotation
of
of
the
the
shape.
shape
Starting
starting
at
at
the
the
beginning
beginning
of
of
the
the
timeline,
timeline
I'll
i'll
go
go
ahead
ahead
and
and
set
set
keyframes
keyframes
for
for
the
the
x
x
and
and
y
y
values
values
for
for
Scale
scale
and
and
also
also
for
for
the
the
rotation.
rotation
Then
then
we'll
we'll
move
move
the
the
timeline
timeline
to
to
the
the
end
end
and
and
set
set
a
a
rotation
rotation
value
value
of
of
360
360
degrees.
degrees
Now
now
we
we
also
also
want
want
the
the
star
star
to
to
start
start
invisible
invisible
and
and
then
then
scale
scale
up
up
as
as
the
the
animation
animation
progresses.
progresses
We'll
we'll
go
go
back
back
to
to
the
the
beginning
beginning
and
and
then
then
set
set
these
these
scale
scale
values
values
to
to
0.
0
We'll
we'll
also
also
make
make
sure
sure
to
to
set
set
a
a
keyframe
keyframe
at
at
the
the
end
end
with
with
the
the
desired
desired
scale
scale
value.
value
So
so
this
this
is
is
starting
starting
to
to
look
look
pretty
pretty
cool,
cool
but
but
how
how
can
can
we
we
make
make
this
this
look
look
a
a
little
little
more
more
lifelike?
lifelike
That
that
brings
brings
me
me
to
to
concept
concept
number
number
2,
2
timing.
timing
By
by
default,
default
Flair
flair
will
will
calculate
calculate
the
the
values
values
in
in
between
between
your
your
key
key
frames
frames
with
with
a
a
linear
linear
function.
function
But
but
when
when
it
it
comes
comes
to
to
motion
motion
graphics,
graphics
it's
it's
often
often
better
better
to
to
have
have
this
this
function
function
ease
ease
so
so
it
it
starts
starts
or
or
ends
ends
a
a
little
little
bit
bit
Slower
slower
or
or
a
a
little
little
bit
bit
faster.
faster
We
we
can
can
do
do
this
this
easily
easily
in
in
Flare
flare
by
by
highlighting
highlighting
a
a
set
set
of
of
keyframes
keyframes
and
and
then
then
clicking
clicking
on
on
the
the
key
key
interpolation
interpolation
menu.
menu
This
this
will
will
change
change
the
the
way
way
the
the
actual
actual
in
in
between
between
values
values
are
are
calculated.
calculated
For
for
example,
example
we
we
can
can
make
make
a
a
curve
curve
that
that
starts
starts
off
off
really
really
fast
fast
and
and
then
then
eases
eases
out
out
very
very
slowly.
slowly
And
and
that
that
tends
tends
to
to
be
be
more
more
appealing
appealing
to
to
human
human
beings
beings
because
because
that's
that's
the
the
way
way
motion
motion
works
works
in
in
the
the
natural
natural
world.
world
Now
now
we're
we're
ready
ready
for
for
technique
technique
3,
3
animating
animating
the
the
vertices
vertices
of
of
the
the
shape.
shape
Vector
vector
graphics
graphics
are
are
made
made
up
up
of
of
a
a
series
series
of
of
points
points
and
and
we
we
can
can
modify
modify
those
those
points
points
to
to
animate
animate
the
the
underlying
underlying
shape
shape
itself.
itself
Create
create
a
a
keyframe
keyframe
next
next
to
to
the
the
edit
edit
vertices
vertices
button
button
and
and
then
then
click
click
that
that
button.
button
You'll
you'll
see
see
a
a
bunch
bunch
of
of
circles
circles
appear
appear
on
on
the
the
shape.
shape
These
these
represent
represent
its
its
vertices.
vertices
Let's
let's
go
go
ahead
ahead
and
and
do
do
this
this
animation
animation
in
in
multiple
multiple
steps.
steps
Move
move
a
a
little
little
bit
bit
forward
forward
on
on
the
the
timeline
timeline
then
then
adjust
adjust
some
some
of
of
the
the
points
points
in
in
the
the
shape,
shape
move
move
a
a
little
little
bit
bit
forward
forward
again
again
and
and
do
do
the
the
same
same
thing
thing
and
and
so
so
on
on
and
and
so
so
on.
on
After
after
you've
you've
done
done
that
that
a
a
few
few
times,
times
it
it
will
will
create
create
this
this
animation
animation
that
that
sort
sort
of
of
looks
looks
like
like
the
the
star
star
is
is
waving
waving
its
its
hands
hands
up
up
and
and
down.
down
As
as
you
you
can
can
imagine,
imagine
changing
changing
the
the
vertices
vertices
can
can
lead
lead
to
to
some
some
very
very
cool
cool
looking
looking
and
and
complex
complex
animation.
animation
But
but
the
the
next
next
technique
technique
I
i
wanna
wanna
show
show
you
you
is
is
how
how
to
to
animate
animate
the
the
stroke
stroke
of
of
a
a
shape.
shape
We
we
can
can
use
use
the
the
stroke
stroke
to
to
make
make
it
it
look
look
like
like
we're
we're
actually
actually
drawing
drawing
the
the
shape
shape
by
by
hand
hand
in
in
our
our
animation.
animation
Go
go
back
back
to
to
design
design
mode
mode
and
and
then
then
remove
remove
the
the
fill
fill
and
and
then
then
add
add
a
a
stroke
stroke
with
with
whatever
whatever
color
color
you
you
want,
want
and
and
a
a
size
size
of
of
50
50
looks
looks
pretty
pretty
good
good
for
for
these
these
Giphy
giphy
animations.
animations
From
from
there,
there
I'm
i'm
going
going
to
to
set
set
the
the
trim
trim
path
path
to
to
sequential.
sequential
From
from
there,
there
we
we
can
can
change
change
the
the
ending
ending
value
value
and
and
you
you
might
might
be
be
able
able
to
to
imagine
imagine
how
how
we
we
can
can
use
use
this
this
to
to
animate
animate
the
the
stroke
stroke
in
in
to
to
make
make
it
it
look
look
like
like
it's
it's
drawing
drawing
around
around
the
the
outline
outline
of
of
shade.
shade
Go
go
back
back
to
to
animate
animate
mode
mode
and
and
set
set
a
a
key
key
frame
frame
that
that
starts
starts
the
the
stroke
stroke
with
with
an
an
ending
ending
point
point
of
of
0%
0%
and
and
then
then
finishes
finishes
with
with
100%.
100%
And
and
now
now
you
you
have
have
this
this
cool
cool
hand
hand
drawn
drawn
icon
icon
with
with
almost
almost
no
no
effort.
effort
That
that
brings
brings
me
me
to
to
the
the
5th
5th
and
and
final
final
animation
animation
technique,
technique
clipping.
clipping
Clipping
clipping
allows
allows
you
you
to
to
control
control
the
the
visibility
visibility
of
of
a
a
shape
shape
when
when
it's
it's
inside
inside
of
of
another
another
Hyper
hyper
shape.
shape
Let's
let's
go
go
back
back
into
into
design
design
mode
mode
and
and
we'll
we'll
draw
draw
a
a
circle
circle
and
and
then
then
remove
remove
the
the
fill
fill
and
and
the
the
stroke
stroke
from
from
that
that
circle.
circle
It's
it's
going
going
to
to
serve
serve
as
as
an
an
invisible
invisible
mask
mask
for
for
the
the
star.
star
From
from
there,
there
go
go
ahead
ahead
and
and
select
select
the
the
star
star
and
and
then
then
hit
hit
the
the
clipping
clipping
button.
button
It
it
will
will
ask
ask
you
you
to
to
select
select
a
a
parent
parent
which
which
is
is
the
the
circle
circle
shape.
shape
Now
now
the
the
circle
circle
is
is
basically
basically
a
a
window
window
and
and
the
the
star
star
is
is
only
only
visible
visible
inside
inside
that
that
window.
window
As
as
we
we
move
move
it
it
around,
around
you
you
can
can
see
see
how
how
it
it
partially
partially
hides
hides
the
the
star.
star
If
if
we
we
go
go
back
back
to
to
animate
animate
mode,
mode
we'll
we'll
go
go
ahead
ahead
and
and
set
set
our
our
first
first
keyframe
keyframe
for
for
the
the
star
star
all
all
the
the
way
way
over
over
to
to
the
the
left
left
and
and
then
then
we'll
we'll
translate
translate
the
the
shape
shape
all
all
the
the
way
way
to
to
the
the
right.
right
And
and
just
just
a
a
side
side
note,
note
if
if
you
you
grab
grab
the
the
red
red
arrow
arrow
it
it
will
will
move
move
it
it
perfectly
perfectly
along
along
the
the
horizontal
horizontal
axis.
axis
And
and
now
now
we
we
have
have
this
this
animation
animation
where
where
it
it
looks
looks
like
like
the
the
star
star
is
is
sliding
sliding
through
through
some
some
invisible
invisible
window.
window
Now
now
that
that
you
you
know
know
these
these
five
five
techniques,
techniques
I
i
want
want
to
to
show
show
you
you
how
how
I
i
combine
combine
them
them
to
to
recreate
recreate
Giphy's
giphy's
navigation
navigation
menu.
menu
We'll
we'll
look
look
at
at
these
these
in
in
order
order
of
of
difficulties
difficulties
starting
starting
with
with
the
the
easiest
easiest
one
one
which
which
is
is
the
the
heart.
heart
Because
because
Flair
flair
is
is
web
web
based,
based
you
you
can
can
basically
basically
open
open
source
source
your
your
designs,
designs
so
so
feel
feel
free
free
to
to
check
check
those
those
out
out
on
on
my
my
Flair
flair
profile.
profile
I
i
didn't
didn't
actually
actually
draw
draw
the
the
heart
heart
myself,
myself
but
but
instead
instead
just
just
imported
imported
it
it
as
as
an
an
asset
asset
and
and
then
then
use
use
Flare
flare
to
to
handle
handle
the
the
animation
animation
aspect
aspect
of
of
it.
it
To
to
create
create
a
a
heartbeat
heartbeat
effect,
effect
all
all
you
you
have
have
to
to
do
do
is
is
scale
scale
the
the
shape
shape
up
up
and
and
down
down
and
and
that's
that's
about
about
as
as
easy
easy
as
as
it
it
gets.
gets
The
the
next
next
one
one
we'll
we'll
look
look
at
at
is
is
the
the
headless
headless
guy
guy
And
and
you
you
can
can
see
see
we
we
actually
actually
have
have
3
3
shapes
shapes
here.
here
We
we
have
have
the
the
head
head
that's
that's
currently
currently
visible,
visible
we
we
have
have
an
an
invisible
invisible
head,
head
and
and
then
then
the
the
body.
body
To
to
make
make
the
the
head
head
roll
roll
off,
off
we
we
just
just
set
set
a
a
series
series
keyframes
keyframes
that
that
move
move
it
it
along
along
the
the
path
path
of
of
the
the
body.
body
And
and
we
we
do
do
that
that
until
until
it
it
falls
falls
completely
completely
off
off
of
of
the
the
artboard.
artboard
The
the
invisible
invisible
head
head
is
is
sitting
sitting
exactly
exactly
where
where
the
the
original
original
head
head
was,
was
And
and
we
we
can
can
replace
replace
it
it
by
by
just
just
increasing
increasing
the
the
opacity
opacity
from
from
0
0
to
to
1,
1
and
and
that
that
just
just
fades
fades
in
in
a
a
new
new
head
head
in
in
the
the
old
old
head's
head's
place.
place
The
the
next
next
animation
animation
we'll
we'll
look
look
at
at
is
is
the
the
planet.
planet
On
on
this
this
one,
one
you'll
you'll
notice
notice
we
we
have
have
3
3
circles
circles
that
that
are
are
only
only
visible
visible
when
when
they're
they're
inside
inside
of
of
the
the
bigger
bigger
planet,
planet
and
and
that's
that's
possible
possible
because
because
we're
we're
clipping
clipping
these
these
smaller
smaller
shapes
shapes
with
with
the
the
bigger
bigger
planet.
planet
So
so
to
to
create
create
this
this
animation,
animation
we
we
just
just
move
move
the
the
3
3
circles
circles
from
from
left
left
to
to
right.
right
And
and
at
at
the
the
same
same
time,
time
we'll
we'll
animate
animate
the
the
rotation
rotation
of
of
the
the
planet
planet
itself.
itself
And
and
now
now
we
we
have
have
this
this
effect
effect
where
where
it
it
looks
looks
like
like
the
the
smaller
smaller
shapes
shapes
are
are
creating
creating
an
an
eclipse
eclipse
shadow
shadow
on
on
the
the
bigger
bigger
planet.
planet
And
and
hopefully,
hopefully
you're
you're
seeing
seeing
how
how
simple
simple
these
these
animations
animations
actually
actually
are
are
compared
compared
to
to
how
how
they
they
look
look
when
when
you
you
first
first
see
see
them.
them
Next
next
up,
up
we
we
have
have
the
the
plus
plus
sign
sign
that
that
transforms
transforms
into
into
a
a
camera
camera
and
and
then
then
flashes
flashes
a
a
picture.
picture
This
this
one
one
is
is
a
a
little
little
more
more
complex
complex
because
because
we
we
need
need
to
to
actually
actually
animate
animate
the
the
vertices
vertices
into
into
a
a
brand
brand
new
new
shape.
shape
So
so
in
in
this
this
case,
case
you
you
kind
kind
of
of
need
need
to
to
plan
plan
ahead
ahead
to
to
make
make
sure
sure
that
that
your
your
plus
plus
sign
sign
can
can
actually
actually
transform
transform
into
into
the
the
shape
shape
that
that
you
you
want.
want
After
after
we
we
convert
convert
the
the
plus
plus
sign
sign
into
into
a
a
camera,
camera
we
we
then
then
scale
scale
up
up
a
a
circle
circle
in
in
the
the
middle,
middle
and
and
that
that
gives
gives
us
us
an
an
effect
effect
that
that
looks
looks
like
like
the
the
flash
flash
of
of
a
a
camera.
camera
By
by
far,
far
the
the
most
most
difficult
difficult
animation
animation
is
is
the
the
house
house
because
because
it
it
creates
creates
this
this
3
3
d
d
rotating
rotating
effect
effect
in
in
a
a
2
2
d
d
animation
animation
environment,
environment
Kind
kind
of
of
like
like
how
how
they
they
built
built
the
the
original
original
Doom
doom
video
video
game.
game
To
to
make
make
this
this
look
look
decent,
decent
I
i
first
first
created
created
a
a
clipping
clipping
box
box
around
around
the
the
house,
house
and
and
then
then
I
i
created
created
a
a
bunch
bunch
of
of
shapes
shapes
that
that
outline
outline
the
the
various
various
walls
walls
in
in
the
the
house.
house
Then
then
I
i
very
very
tediously
tediously
animated
animated
the
the
vertices
vertices
from
from
one
one
side
side
to
to
the
the
other.
other
I
i
did
did
that
that
very
very
carefully
carefully
step
step
by
by
step
step
and
and
then
then
I
i
animated
animated
in
in
a
a
new
new
door
door
from
from
the
the
left
left
side.
side
Now
now
that
that
we
we
have
have
all
all
these
these
awesome
awesome
animations,
animations
it's
it's
time
time
to
to
export
export
them
them
to
to
Flutter.
flutter
Go
go
ahead
ahead
and
and
click
click
the
the
export
export
icon,
icon
and
and
you
you
want
want
the
the
binary
binary
of
of
the
the
file,
file
which
which
you
you
can
can
just
just
save
save
in
in
the
the
assets
assets
directory
directory
of
of
your
your
app.
app
Flutter
flutter
maintains
maintains
a
a
package
package
that
that
allows
allows
you
you
to
to
run
run
your
your
graphics
graphics
in
in
the
the
Flutter
flutter
engine.
engine
Go
go
ahead
ahead
and
and
add
add
it
it
as
as
a
a
dependency
dependency
to
to
your
your
project
project
by
by
adding
adding
it
it
to
to
the
the
pubspec
pubspec
YAML
yaml
file.
file
And
and
while
while
we're
we're
in
in
this
this
file
file
we
we
can
can
also
also
register
register
our
our
assets
assets
directory
directory
as
as
assets
assets
in
in
the
the
Flutter
flutter
app.
app
If
if
we
we
jump
jump
into
into
the
the
main
main
dot
dot
dart
dart
file
file
you
you
can
can
see
see
that
that
I
i
just
just
have
have
a
a
material
material
scaffold
scaffold
set
set
up.
up
Then
then
I
i
have
have
our
our
custom
custom
Navbar
navbar
centered
centered
in
in
the
the
middle
middle
of
of
the
the
screen.
screen
I'm
i'm
only
only
doing
doing
that
that
for
for
presentation
presentation
reasons
reasons
for
for
this
this
video.
video
All
all
of
of
the
the
meaningful
meaningful
code
code
will
will
be
be
implemented
implemented
in
in
this
this
Navbar
navbar
stateful
stateful
widget.
widget
We're
we're
starting
starting
out
out
here
here
with
with
just
just
an
an
empty
empty
stateful
stateful
widget,
widget
and
and
I'm
i'm
also
also
defining
defining
my
my
own
own
class
class
called
called
menu
menu
item.
item
This
this
is
is
just
just
a
a
simple
simple
abstraction
abstraction
that
that
we'll
we'll
use
use
to
to
help
help
us
us
organize
organize
the
the
code
code
for
for
each
each
individual
individual
item
item
in
in
the
the
menu.
menu
Name
name
represents
represents
the
the
dotflr
dotflr
file
file
that
that
we
we
have
have
saved
saved
in
in
the
the
assets
assets
folder.
folder
Color
color
is
is
just
just
the
the
color
color
of
of
the
the
top
top
border
border
when
when
this
this
menu
menu
item
item
is
is
active,
active
and
and
then
then
x
x
is
is
the
the
alignment
alignment
on
on
the
the
x
x
axis.
axis
Now
now
going
going
into
into
the
the
stateful
stateful
widget
widget
will
will
define
define
a
a
list
list
of
of
these
these
menu
menu
items.
items
The
the
important
important
thing
thing
here
here
is
is
the
the
x
x
value
value
which
which
defines
defines
the
the
alignment
alignment
of
of
that
that
top
top
border
border
when
when
the
the
menu
menu
item
item
is
is
active.
active
We
we
could
could
do
do
this
this
programmatically,
programmatically
but
but
since
since
we
we
have
have
a
a
fixed
fixed
number
number
of
of
items
items
this
this
menu,
menu
I
i
felt
felt
like
like
this
this
was
was
the
the
most
most
clear
clear
way
way
to
to
do
do
it
it
for
for
this
this
demo.
demo
An
an
x
x
value
value
of
of
negative
negative
one
one
means
means
that
that
it
it
will
will
be
be
aligned
aligned
to
to
the
the
very
very
far
far
left
left
of
of
the
the
screen,
screen
And
and
an
an
x
x
value
value
of
of
positive
positive
one
one
means
means
that
that
it
it
would
would
be
be
to
to
the
the
very
very
far
far
right
right
of
of
the
the
screen,
screen
and
and
0
0
would
would
be
be
directly
directly
in
in
the
the
middle.
middle
We
we
can
can
go
go
ahead
ahead
and
and
fill
fill
out
out
the
the
data
data
for
for
the
the
rest
rest
of
of
these
these
menu
menu
items,
items
And
and
then
then
we'll
we'll
override
override
a
a
knit
knit
state
state
to
to
set
set
one
one
of
of
the
the
items
items
to
to
active
active
when
when
the
the
app
app
is
is
first
first
initialized.
initialized
In
in
order
order
to
to
make
make
this
this
menu
menu
responsive,
responsive
I'm
i'm
going
going
to
to
first
first
set
set
A
a
variable
variable
for
for
w,
w
which
which
is
is
a
a
media
media
query
query
of
of
the
the
width
width
of
of
the
the
viewport.
viewport
From
from
there,
there
I'm
i'm
returning
returning
a
a
container,
container
which
which
has
has
a
a
height
height
of
of
80,
80
which
which
will
will
define
define
the
the
actual
actual
height
height
of
of
the
the
menu
menu
itself.
itself
Then
then
its
its
child
child
is
is
a
a
stack,
stack
and
and
inside
inside
that
that
stack,
stack
we
we
have
have
2
2
elements.
elements
The
the
first
first
one
one
being
being
that
that
colored
colored
bar
bar
that
that
moves
moves
across
across
the
the
screen
screen
when
when
a
a
menu
menu
item
item
becomes
becomes
active.
active
The
the
great
great
thing
thing
about
about
Flutter
flutter
is
is
that
that
we
we
can
can
easily
easily
animate
animate
the
the
motion
motion
of
of
that
that
top
top
bar
bar
by
by
using
using
an
an
animated
animated
container.
container
We'll
we'll
set
set
the
the
duration
duration
to
to
200
200
milliseconds,
milliseconds
And
and
then
then
we'll
we'll
set
set
the
the
alignment
alignment
to
to
the
the
alignment
alignment
of
of
the
the
active
active
menu
menu
item.
item
This
this
means
means
Flutter
flutter
will
will
automatically
automatically
animate
animate
the
the
movement
movement
of
of
that
that
top
top
bar
bar
whenever
whenever
the
the
active
active
menu
menu
item
item
changes.
changes
We
we
don't
don't
need
need
any
any
animation
animation
controllers
controllers
or
or
anything
anything
like
like
that.
that
Flutter
flutter
just
just
does
does
it
it
for
for
us
us
automatically.
automatically
Now
now
I
i
want
want
the
the
color
color
of
of
the
the
top
top
bar
bar
to
to
be
be
animated
animated
as
as
well,
well
so
so
I'm
i'm
just
just
going
going
to
to
nest
nest
another
another
animated
animated
container
container
directly
directly
inside
inside
out
out
of
of
this
this
one.
one
I'm
i'm
going
going
to
to
give
give
this
this
one
one
a
a
longer
longer
animation,
animation
set
set
its
its
height
height
to
to
8,
8
and
and
then
then
give
give
it
it
a
a
width
width
that's
that's
based
based
on
on
the
the
number
number
of
of
menu
menu
items
items
in
in
the
the
menu.
menu
4
4
or
or
5
5
items,
items
that
that
means
means
each
each
item
item
will
will
take
take
up
up
20%
20%
of
of
the
the
available
available
width.
width
That's
that's
all
all
it
it
takes
takes
to
to
build
build
the
the
animated
animated
indicator
indicator
above
above
the
the
icons.
icons
Now
now
we're
we're
going
going
to
to
set
set
up
up
a
a
row
row
that
that
will
will
hold
hold
the
the
icons
icons
themselves.
themselves
Bells.
bells
The
the
row
row
is
is
very
very
straightforward.
straightforward
For
for
the
the
main
main
axis
axis
alignment,
alignment
we'll
we'll
use
use
space
space
around.
around
That
that
will
will
ensure
ensure
that
that
that
that
top
top
indicator
indicator
is
is
perfectly
perfectly
centered
centered
on
on
top
top
of
of
the
the
icon.
icon
Then
then
we'll
we'll
set
set
the
the
cross
cross
axis
axis
alignment
alignment
to
to
end
end
so
so
the
the
items
items
sit
sit
at
at
the
the
bottom
bottom
of
of
the
the
row.
row
Then
then
to
to
create
create
the
the
children,
children
I'm
i'm
looping
looping
over
over
the
the
items
items
list
list
And
and
then
then
mapping
mapping
the
the
list
list
to
to
a
a
method
method
called
called
flare
flare
which
which
will
will
build
build
the
the
actual
actual
widgets
widgets
for
for
each
each
individual
individual
item.
item
The
the
flare
flare
method
method
takes
takes
a
a
menu
menu
item
item
as
as
its
its
argument,
argument
and
and
then
then
the
the
first
first
widget
widget
it
it
Turns
turns
is
is
a
a
gesture
gesture
detector.
detector
This
this
is
is
how
how
we
we
turn
turn
our
our
animated
animated
icon
icon
into
into
a
a
button.
button
We
we
can
can
listen
listen
to
to
the
the
on
on
tap
tap
event
event
and
and
then
then
when
when
that
that
happens,
happens
we'll
we'll
set
set
this
this
item
item
to
to
the
the
active
active
item
item
on
on
the
the
Date
date
full
full
widget.
widget
And
and
in
in
doing
doing
so,
so
we
we
will
will
trigger
trigger
all
all
of
of
the
the
animated
animated
properties
properties
on
on
this
this
widget.
widget
From
from
there,
there
I'm
i'm
going
going
to
to
use
use
the
the
aspect
aspect
ratio
ratio
widget
widget
set
set
to
to
1
1
just
just
to
to
keep
keep
this
this
widget
widget
set
set
as
as
a
a
perfect
perfect
square.
square
Go
go
ahead
ahead
and
and
give
give
it
it
some
some
padding
padding
on
on
the
the
top
top
and
and
then
then
we'll
we'll
set
set
the
the
child
child
as
as
the
the
Flare
flare
actor
actor
widget
widget
which
which
comes
comes
from
from
the
the
Flare
flare
library.
library
The
the
first
first
argument
argument
is
is
just
just
the
the
path
path
to
to
the
the
FLR
flr
file,
file
which
which
in
in
our
our
case
case
is
is
in
in
the
the
assets
assets
directory.
directory
We
we
have
have
the
the
option
option
to
to
set
set
the
the
alignment,
alignment
the
the
fit,
fit
and
and
a
a
bunch
bunch
of
of
other
other
things.
things
But
but
in
in
order
order
to
to
run
run
an
an
animation,
animation
we
we
need
need
to
to
pass
pass
it
it
an
an
animation
animation
property.
property
The
the
value
value
should
should
be
be
the
the
name
name
of
of
the
the
animation
animation
that
that
you
you
define
define
when
when
creating
creating
this
this
graphic
graphic
in
in
Flare.
flare
In
in
our
our
case,
case
we
we
gave
gave
all
all
of
of
our
our
animations
animations
the
the
same
same
name
name
of
of
go.
go
So
so
we'll
we'll
go
go
ahead
ahead
and
and
use
use
that
that
animation
animation
name
name
whenever
whenever
this
this
item
item
is
is
active.
active
Otherwise,
otherwise
we'll
we'll
just
just
pass
pass
it
it
a
a
string
string
of
of
idle
idle
which
which
will
will
do
do
nothing.
nothing
And
and
that's
that's
all
all
there
there
is
is
to
to
it.
it
By
by
combining
combining
the
the
powers
powers
of
of
Flare
flare
and
and
Flutter,
flutter
we
we
were
were
able
able
to
to
take
take
a
a
navigation
navigation
menu
menu
that
that
seemed
seemed
extremely
extremely
complex
complex
on
on
the
the
surface,
surface
recreate
recreate
it
it
with
with
minimal
minimal
effort,
effort
and
and
be
be
able
able
to
to
run
run
it
it
on
on
iOS
ios
and
and
Android
android
without
without
sacrificing
sacrificing
quality.
quality
I'm
i'm
gonna
gonna
go
go
ahead
ahead
and
and
wrap
wrap
things
things
up
up
there.
there
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you
you
want
want
access
access
to
to
even
even
more
more
content,
content
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
Fireship
fireship
IO.
io
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
talk
talk
to
to
you
you
soon.
soon
success
The Flutter app is designed to create flutter-activated flutter menus and create realistic-looking flutter-activated user experiences. The process includes manipulating the shape of Flutter by moving and adjusting keyframes, setting up a Flare account, and creating multiple flutter-activated animation elements. The importance of planning ahead is emphasized, and the use of Flutter for motion graphics and creating a 3-rise effect is also discussed. The app is used to organize code and create a flutter file, and users are encouraged to like and subscribe to their channel and receive free access to more content.
Flutter Flare Basics - Let's Build Giphy's Nav Menu
I bet you folks don't have one of these. I want that. You see, this I think you're run of the mill crapperware. One of the coolest navigation menus I've seen in a long time comes from the Giphy mobile app. In today's video, you'll learn how to build this menu from Scratch using Flutter and an awesome 2 d animation tool called Flare. By the end of this video, you'll understand the fundamentals of vector animation and how to turn your creations into interactive UI elements that render at 60 FPS. If you're new here like and subscribe and I recommend following along with the source code on Fireship IO. Let's take a closer look at the entire menu itself. Focus on the bar that hovers above the icons. You'll notice when an icon becomes active it slides to a new position and also animates the color. We can achieve that effect very easily in Flutter natively by simply using a combination of a stateful widget and an animated container. But the icons themselves are obviously using much more advanced animation sequences here. Hypothetically, we could implement these using nothing but a custom painter and some Dart code. But fortunately, there's a design tool called Flare that makes it easy to create complex vector animations, which can then be exported and run natively in Flutter's engine at 60 FPS. Throughout this video, I want to teach you the fundamental concepts required to build animated UI elements. You don't need to be a graphic designer or an artist. You just need to know a few key concepts about animation and you can start building your own interactive UI elements that look just as good as the Giphy mobile app. First thing you'll wanna do is sign up for a free Flare account and then go ahead and create a new file. You'll see the artboard here in the center of the screen, that's the canvas that we use to draw the graphics. When working in design mode, you'll notice that flare is very similar to other design tools like Figma or Adobe Illustrator. On the left side of the screen, you'll see we have a hierarchy of shapes, So the artboard is at the top and then we can layer in additional shapes as needed. In the top menu, you'll see a handful of different tools for drawing shapes. I'm going to draw a star and then show you all the different techniques that we can use to animate it. In total, we'll look at 5 different ways to animate shapes, then you can use a combination of these techniques build every single icon in the Giphy native menu that I showed you earlier, and we'll look at each of those icons individually in just a few minutes. After you place a shape on the artboard, there's a few keys that you wanna remember to quickly access the tools to move it and resize it. Hit t for translate, which allows you to move the object. Hit s for scale to resize the object and r for rotate to rotate it. When you have a shape selected, this menu on the right will appear which allows you to modify its properties. When it comes animated icons, you generally want them to be centered directly in the artboard and also take up as much of the y space as possible. When it comes to colors, shapes can have a fill color, and they can also have a Stroke, which is basically a border or an outline around the shape. I'm going to remove the stroke for now, and the first animation that we'll build is just an interpolation from one color to another color. This is where we start to see the superpowers of flare. So currently, we're in design mode, but now we can switch over to animate mode, and this will bring up a timeline down at the bottom. You can create multiple animations in a single file and give those animations names. That's important because when we get to Flutter, we can run animations programmatically based on the In this demo, every icon just has one animation named go. In animate mode, you'll notice that every property on the shape now has this little diamond symbol next to it. You can click it to create a keyframe on the timeline. A keyframe is just a representation of that property at a specific point in time. So if you have 2 key frames at different points in time, Flare will automatically animate between those 2 key frames. We can move to any frame in the animation by sliding the scrubber. For this first animation, we'll just go ahead and slide all the way to the end, and then we'll change the fill color to yellow. If we start scrubbing the timeline, you'll notice that our star changes from gray to yellow. And that's basically how all animation works. You just start with one value and then change to a different value over time. And that brings me to the first actual technique, which is animating the transform of the shape. And by transform, I'm referring to the position, the scale, or the rotation of the shape. Starting at the beginning of the timeline, I'll go ahead and set keyframes for the x and y values for Scale and also for the rotation. Then we'll move the timeline to the end and set a rotation value of 360 degrees. Now we also want the star to start invisible and then scale up as the animation progresses. We'll go back to the beginning and then set these scale values to 0. We'll also make sure to set a keyframe at the end with the desired scale value. So this is starting to look pretty cool, but how can we make this look a little more lifelike? That brings me to concept number 2, timing. By default, Flair will calculate the values in between your key frames with a linear function. But when it comes to motion graphics, it's often better to have this function ease so it starts or ends a little bit Slower or a little bit faster. We can do this easily in Flare by highlighting a set of keyframes and then clicking on the key interpolation menu. This will change the way the actual in between values are calculated. For example, we can make a curve that starts off really fast and then eases out very slowly. And that tends to be more appealing to human beings because that's the way motion works in the natural world. Now we're ready for technique 3, animating the vertices of the shape. Vector graphics are made up of a series of points and we can modify those points to animate the underlying shape itself. Create a keyframe next to the edit vertices button and then click that button. You'll see a bunch of circles appear on the shape. These represent its vertices. Let's go ahead and do this animation in multiple steps. Move a little bit forward on the timeline then adjust some of the points in the shape, move a little bit forward again and do the same thing and so on and so on. After you've done that a few times, it will create this animation that sort of looks like the star is waving its hands up and down. As you can imagine, changing the vertices can lead to some very cool looking and complex animation. But the next technique I wanna show you is how to animate the stroke of a shape. We can use the stroke to make it look like we're actually drawing the shape by hand in our animation. Go back to design mode and then remove the fill and then add a stroke with whatever color you want, and a size of 50 looks pretty good for these Giphy animations. From there, I'm going to set the trim path to sequential. From there, we can change the ending value and you might be able to imagine how we can use this to animate the stroke in to make it look like it's drawing around the outline of shade. Go back to animate mode and set a key frame that starts the stroke with an ending point of 0% and then finishes with 100%. And now you have this cool hand drawn icon with almost no effort. That brings me to the 5th and final animation technique, clipping. Clipping allows you to control the visibility of a shape when it's inside of another Hyper shape. Let's go back into design mode and we'll draw a circle and then remove the fill and the stroke from that circle. It's going to serve as an invisible mask for the star. From there, go ahead and select the star and then hit the clipping button. It will ask you to select a parent which is the circle shape. Now the circle is basically a window and the star is only visible inside that window. As we move it around, you can see how it partially hides the star. If we go back to animate mode, we'll go ahead and set our first keyframe for the star all the way over to the left and then we'll translate the shape all the way to the right. And just a side note, if you grab the red arrow it will move it perfectly along the horizontal axis. And now we have this animation where it looks like the star is sliding through some invisible window. Now that you know these five techniques, I want to show you how I combine them to recreate Giphy's navigation menu. We'll look at these in order of difficulties starting with the easiest one which is the heart. Because Flair is web based, you can basically open source your designs, so feel free to check those out on my Flair profile. I didn't actually draw the heart myself, but instead just imported it as an asset and then use Flare to handle the animation aspect of it. To create a heartbeat effect, all you have to do is scale the shape up and down and that's about as easy as it gets. The next one we'll look at is the headless guy And you can see we actually have 3 shapes here. We have the head that's currently visible, we have an invisible head, and then the body. To make the head roll off, we just set a series keyframes that move it along the path of the body. And we do that until it falls completely off of the artboard. The invisible head is sitting exactly where the original head was, And we can replace it by just increasing the opacity from 0 to 1, and that just fades in a new head in the old head's place. The next animation we'll look at is the planet. On this one, you'll notice we have 3 circles that are only visible when they're inside of the bigger planet, and that's possible because we're clipping these smaller shapes with the bigger planet. So to create this animation, we just move the 3 circles from left to right. And at the same time, we'll animate the rotation of the planet itself. And now we have this effect where it looks like the smaller shapes are creating an eclipse shadow on the bigger planet. And hopefully, you're seeing how simple these animations actually are compared to how they look when you first see them. Next up, we have the plus sign that transforms into a camera and then flashes a picture. This one is a little more complex because we need to actually animate the vertices into a brand new shape. So in this case, you kind of need to plan ahead to make sure that your plus sign can actually transform into the shape that you want. After we convert the plus sign into a camera, we then scale up a circle in the middle, and that gives us an effect that looks like the flash of a camera. By far, the most difficult animation is the house because it creates this 3 d rotating effect in a 2 d animation environment, Kind of like how they built the original Doom video game. To make this look decent, I first created a clipping box around the house, and then I created a bunch of shapes that outline the various walls in the house. Then I very tediously animated the vertices from one side to the other. I did that very carefully step by step and then I animated in a new door from the left side. Now that we have all these awesome animations, it's time to export them to Flutter. Go ahead and click the export icon, and you want the binary of the file, which you can just save in the assets directory of your app. Flutter maintains a package that allows you to run your graphics in the Flutter engine. Go ahead and add it as a dependency to your project by adding it to the pubspec YAML file. And while we're in this file we can also register our assets directory as assets in the Flutter app. If we jump into the main dot dart file you can see that I just have a material scaffold set up. Then I have our custom Navbar centered in the middle of the screen. I'm only doing that for presentation reasons for this video. All of the meaningful code will be implemented in this Navbar stateful widget. We're starting out here with just an empty stateful widget, and I'm also defining my own class called menu item. This is just a simple abstraction that we'll use to help us organize the code for each individual item in the menu. Name represents the dotflr file that we have saved in the assets folder. Color is just the color of the top border when this menu item is active, and then x is the alignment on the x axis. Now going into the stateful widget will define a list of these menu items. The important thing here is the x value which defines the alignment of that top border when the menu item is active. We could do this programmatically, but since we have a fixed number of items this menu, I felt like this was the most clear way to do it for this demo. An x value of negative one means that it will be aligned to the very far left of the screen, And an x value of positive one means that it would be to the very far right of the screen, and 0 would be directly in the middle. We can go ahead and fill out the data for the rest of these menu items, And then we'll override a knit state to set one of the items to active when the app is first initialized. In order to make this menu responsive, I'm going to first set A variable for w, which is a media query of the width of the viewport. From there, I'm returning a container, which has a height of 80, which will define the actual height of the menu itself. Then its child is a stack, and inside that stack, we have 2 elements. The first one being that colored bar that moves across the screen when a menu item becomes active. The great thing about Flutter is that we can easily animate the motion of that top bar by using an animated container. We'll set the duration to 200 milliseconds, And then we'll set the alignment to the alignment of the active menu item. This means Flutter will automatically animate the movement of that top bar whenever the active menu item changes. We don't need any animation controllers or anything like that. Flutter just does it for us automatically. Now I want the color of the top bar to be animated as well, so I'm just going to nest another animated container directly inside out of this one. I'm going to give this one a longer animation, set its height to 8, and then give it a width that's based on the number of menu items in the menu. 4 or 5 items, that means each item will take up 20% of the available width. That's all it takes to build the animated indicator above the icons. Now we're going to set up a row that will hold the icons themselves. Bells. The row is very straightforward. For the main axis alignment, we'll use space around. That will ensure that that top indicator is perfectly centered on top of the icon. Then we'll set the cross axis alignment to end so the items sit at the bottom of the row. Then to create the children, I'm looping over the items list And then mapping the list to a method called flare which will build the actual widgets for each individual item. The flare method takes a menu item as its argument, and then the first widget it Turns is a gesture detector. This is how we turn our animated icon into a button. We can listen to the on tap event and then when that happens, we'll set this item to the active item on the Date full widget. And in doing so, we will trigger all of the animated properties on this widget. From there, I'm going to use the aspect ratio widget set to 1 just to keep this widget set as a perfect square. Go ahead and give it some padding on the top and then we'll set the child as the Flare actor widget which comes from the Flare library. The first argument is just the path to the FLR file, which in our case is in the assets directory. We have the option to set the alignment, the fit, and a bunch of other things. But in order to run an animation, we need to pass it an animation property. The value should be the name of the animation that you define when creating this graphic in Flare. In our case, we gave all of our animations the same name of go. So we'll go ahead and use that animation name whenever this item is active. Otherwise, we'll just pass it a string of idle which will do nothing. And that's all there is to it. By combining the powers of Flare and Flutter, we were able to take a navigation menu that seemed extremely complex on the surface, recreate it with minimal effort, and be able to run it on iOS and Android without sacrificing quality. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to even more content, consider becoming a pro member at Fireship IO. Thanks for watching, and I will talk to you soon.
The Flutter app is designed to create flutter-activated flutter menus and create realistic-looking flutter-activated user experiences. The process includes manipulating the shape of Flutter by moving and adjusting keyframes, setting up a Flare account, and creating multiple flutter-activated animation elements. The importance of planning ahead is emphasized, and the use of Flutter for motion graphics and creating a 3-rise effect is also discussed. The app is used to organize code and create a flutter file, and users are encouraged to like and subscribe to their channel and receive free access to more content.

        [INST]
        You are youtuber called Fireship you make engaging high-intensity and entertaining coding tutorials and tech news. 
        you covers a wide range of topics relevant to programmers, aiming to help them learn and improve their skills quickly.
        
        Given the title of the video : Flutter Flare Basics - Let's Build Giphy's Nav Menu 
        and a small summary : The Flutter app is designed to create flutter-activated flutter menus and create realistic-looking flutter-activated user experiences. The process includes manipulating the shape of Flutter by moving and adjusting keyframes, setting up a Flare account, and creating multiple flutter-activated animation elements. The importance of planning ahead is emphasized, and the use of Flutter for motion graphics and creating a 3-rise effect is also discussed. The app is used to organize code and create a flutter file, and users are encouraged to like and subscribe to their channel and receive free access to more content.
        [/INST]
        
        Generate the video : I bet you folks don't have one of these. I want that. You see, this I think you're run of the mill crapperware. One of the coolest navigation menus I've seen in a long time comes from the Giphy mobile app. In today's video, you'll learn how to build this menu from Scratch using Flutter and an awesome 2 d animation tool called Flare. By the end of this video, you'll understand the fundamentals of vector animation and how to turn your creations into interactive UI elements that render at 60 FPS. If you're new here like and subscribe and I recommend following along with the source code on Fireship IO. Let's take a closer look at the entire menu itself. Focus on the bar that hovers above the icons. You'll notice when an icon becomes active it slides to a new position and also animates the color. We can achieve that effect very easily in Flutter natively by simply using a combination of a stateful widget and an animated container. But the icons themselves are obviously using much more advanced animation sequences here. Hypothetically, we could implement these using nothing but a custom painter and some Dart code. But fortunately, there's a design tool called Flare that makes it easy to create complex vector animations, which can then be exported and run natively in Flutter's engine at 60 FPS. Throughout this video, I want to teach you the fundamental concepts required to build animated UI elements. You don't need to be a graphic designer or an artist. You just need to know a few key concepts about animation and you can start building your own interactive UI elements that look just as good as the Giphy mobile app. First thing you'll wanna do is sign up for a free Flare account and then go ahead and create a new file. You'll see the artboard here in the center of the screen, that's the canvas that we use to draw the graphics. When working in design mode, you'll notice that flare is very similar to other design tools like Figma or Adobe Illustrator. On the left side of the screen, you'll see we have a hierarchy of shapes, So the artboard is at the top and then we can layer in additional shapes as needed. In the top menu, you'll see a handful of different tools for drawing shapes. I'm going to draw a star and then show you all the different techniques that we can use to animate it. In total, we'll look at 5 different ways to animate shapes, then you can use a combination of these techniques build every single icon in the Giphy native menu that I showed you earlier, and we'll look at each of those icons individually in just a few minutes. After you place a shape on the artboard, there's a few keys that you wanna remember to quickly access the tools to move it and resize it. Hit t for translate, which allows you to move the object. Hit s for scale to resize the object and r for rotate to rotate it. When you have a shape selected, this menu on the right will appear which allows you to modify its properties. When it comes animated icons, you generally want them to be centered directly in the artboard and also take up as much of the y space as possible. When it comes to colors, shapes can have a fill color, and they can also have a Stroke, which is basically a border or an outline around the shape. I'm going to remove the stroke for now, and the first animation that we'll build is just an interpolation from one color to another color. This is where we start to see the superpowers of flare. So currently, we're in design mode, but now we can switch over to animate mode, and this will bring up a timeline down at the bottom. You can create multiple animations in a single file and give those animations names. That's important because when we get to Flutter, we can run animations programmatically based on the In this demo, every icon just has one animation named go. In animate mode, you'll notice that every property on the shape now has this little diamond symbol next to it. You can click it to create a keyframe on the timeline. A keyframe is just a representation of that property at a specific point in time. So if you have 2 key frames at different points in time, Flare will automatically animate between those 2 key frames. We can move to any frame in the animation by sliding the scrubber. For this first animation, we'll just go ahead and slide all the way to the end, and then we'll change the fill color to yellow. If we start scrubbing the timeline, you'll notice that our star changes from gray to yellow. And that's basically how all animation works. You just start with one value and then change to a different value over time. And that brings me to the first actual technique, which is animating the transform of the shape. And by transform, I'm referring to the position, the scale, or the rotation of the shape. Starting at the beginning of the timeline, I'll go ahead and set keyframes for the x and y values for Scale and also for the rotation. Then we'll move the timeline to the end and set a rotation value of 360 degrees. Now we also want the star to start invisible and then scale up as the animation progresses. We'll go back to the beginning and then set these scale values to 0. We'll also make sure to set a keyframe at the end with the desired scale value. So this is starting to look pretty cool, but how can we make this look a little more lifelike? That brings me to concept number 2, timing. By default, Flair will calculate the values in between your key frames with a linear function. But when it comes to motion graphics, it's often better to have this function ease so it starts or ends a little bit Slower or a little bit faster. We can do this easily in Flare by highlighting a set of keyframes and then clicking on the key interpolation menu. This will change the way the actual in between values are calculated. For example, we can make a curve that starts off really fast and then eases out very slowly. And that tends to be more appealing to human beings because that's the way motion works in the natural world. Now we're ready for technique 3, animating the vertices of the shape. Vector graphics are made up of a series of points and we can modify those points to animate the underlying shape itself. Create a keyframe next to the edit vertices button and then click that button. You'll see a bunch of circles appear on the shape. These represent its vertices. Let's go ahead and do this animation in multiple steps. Move a little bit forward on the timeline then adjust some of the points in the shape, move a little bit forward again and do the same thing and so on and so on. After you've done that a few times, it will create this animation that sort of looks like the star is waving its hands up and down. As you can imagine, changing the vertices can lead to some very cool looking and complex animation. But the next technique I wanna show you is how to animate the stroke of a shape. We can use the stroke to make it look like we're actually drawing the shape by hand in our animation. Go back to design mode and then remove the fill and then add a stroke with whatever color you want, and a size of 50 looks pretty good for these Giphy animations. From there, I'm going to set the trim path to sequential. From there, we can change the ending value and you might be able to imagine how we can use this to animate the stroke in to make it look like it's drawing around the outline of shade. Go back to animate mode and set a key frame that starts the stroke with an ending point of 0% and then finishes with 100%. And now you have this cool hand drawn icon with almost no effort. That brings me to the 5th and final animation technique, clipping. Clipping allows you to control the visibility of a shape when it's inside of another Hyper shape. Let's go back into design mode and we'll draw a circle and then remove the fill and the stroke from that circle. It's going to serve as an invisible mask for the star. From there, go ahead and select the star and then hit the clipping button. It will ask you to select a parent which is the circle shape. Now the circle is basically a window and the star is only visible inside that window. As we move it around, you can see how it partially hides the star. If we go back to animate mode, we'll go ahead and set our first keyframe for the star all the way over to the left and then we'll translate the shape all the way to the right. And just a side note, if you grab the red arrow it will move it perfectly along the horizontal axis. And now we have this animation where it looks like the star is sliding through some invisible window. Now that you know these five techniques, I want to show you how I combine them to recreate Giphy's navigation menu. We'll look at these in order of difficulties starting with the easiest one which is the heart. Because Flair is web based, you can basically open source your designs, so feel free to check those out on my Flair profile. I didn't actually draw the heart myself, but instead just imported it as an asset and then use Flare to handle the animation aspect of it. To create a heartbeat effect, all you have to do is scale the shape up and down and that's about as easy as it gets. The next one we'll look at is the headless guy And you can see we actually have 3 shapes here. We have the head that's currently visible, we have an invisible head, and then the body. To make the head roll off, we just set a series keyframes that move it along the path of the body. And we do that until it falls completely off of the artboard. The invisible head is sitting exactly where the original head was, And we can replace it by just increasing the opacity from 0 to 1, and that just fades in a new head in the old head's place. The next animation we'll look at is the planet. On this one, you'll notice we have 3 circles that are only visible when they're inside of the bigger planet, and that's possible because we're clipping these smaller shapes with the bigger planet. So to create this animation, we just move the 3 circles from left to right. And at the same time, we'll animate the rotation of the planet itself. And now we have this effect where it looks like the smaller shapes are creating an eclipse shadow on the bigger planet. And hopefully, you're seeing how simple these animations actually are compared to how they look when you first see them. Next up, we have the plus sign that transforms into a camera and then flashes a picture. This one is a little more complex because we need to actually animate the vertices into a brand new shape. So in this case, you kind of need to plan ahead to make sure that your plus sign can actually transform into the shape that you want. After we convert the plus sign into a camera, we then scale up a circle in the middle, and that gives us an effect that looks like the flash of a camera. By far, the most difficult animation is the house because it creates this 3 d rotating effect in a 2 d animation environment, Kind of like how they built the original Doom video game. To make this look decent, I first created a clipping box around the house, and then I created a bunch of shapes that outline the various walls in the house. Then I very tediously animated the vertices from one side to the other. I did that very carefully step by step and then I animated in a new door from the left side. Now that we have all these awesome animations, it's time to export them to Flutter. Go ahead and click the export icon, and you want the binary of the file, which you can just save in the assets directory of your app. Flutter maintains a package that allows you to run your graphics in the Flutter engine. Go ahead and add it as a dependency to your project by adding it to the pubspec YAML file. And while we're in this file we can also register our assets directory as assets in the Flutter app. If we jump into the main dot dart file you can see that I just have a material scaffold set up. Then I have our custom Navbar centered in the middle of the screen. I'm only doing that for presentation reasons for this video. All of the meaningful code will be implemented in this Navbar stateful widget. We're starting out here with just an empty stateful widget, and I'm also defining my own class called menu item. This is just a simple abstraction that we'll use to help us organize the code for each individual item in the menu. Name represents the dotflr file that we have saved in the assets folder. Color is just the color of the top border when this menu item is active, and then x is the alignment on the x axis. Now going into the stateful widget will define a list of these menu items. The important thing here is the x value which defines the alignment of that top border when the menu item is active. We could do this programmatically, but since we have a fixed number of items this menu, I felt like this was the most clear way to do it for this demo. An x value of negative one means that it will be aligned to the very far left of the screen, And an x value of positive one means that it would be to the very far right of the screen, and 0 would be directly in the middle. We can go ahead and fill out the data for the rest of these menu items, And then we'll override a knit state to set one of the items to active when the app is first initialized. In order to make this menu responsive, I'm going to first set A variable for w, which is a media query of the width of the viewport. From there, I'm returning a container, which has a height of 80, which will define the actual height of the menu itself. Then its child is a stack, and inside that stack, we have 2 elements. The first one being that colored bar that moves across the screen when a menu item becomes active. The great thing about Flutter is that we can easily animate the motion of that top bar by using an animated container. We'll set the duration to 200 milliseconds, And then we'll set the alignment to the alignment of the active menu item. This means Flutter will automatically animate the movement of that top bar whenever the active menu item changes. We don't need any animation controllers or anything like that. Flutter just does it for us automatically. Now I want the color of the top bar to be animated as well, so I'm just going to nest another animated container directly inside out of this one. I'm going to give this one a longer animation, set its height to 8, and then give it a width that's based on the number of menu items in the menu. 4 or 5 items, that means each item will take up 20% of the available width. That's all it takes to build the animated indicator above the icons. Now we're going to set up a row that will hold the icons themselves. Bells. The row is very straightforward. For the main axis alignment, we'll use space around. That will ensure that that top indicator is perfectly centered on top of the icon. Then we'll set the cross axis alignment to end so the items sit at the bottom of the row. Then to create the children, I'm looping over the items list And then mapping the list to a method called flare which will build the actual widgets for each individual item. The flare method takes a menu item as its argument, and then the first widget it Turns is a gesture detector. This is how we turn our animated icon into a button. We can listen to the on tap event and then when that happens, we'll set this item to the active item on the Date full widget. And in doing so, we will trigger all of the animated properties on this widget. From there, I'm going to use the aspect ratio widget set to 1 just to keep this widget set as a perfect square. Go ahead and give it some padding on the top and then we'll set the child as the Flare actor widget which comes from the Flare library. The first argument is just the path to the FLR file, which in our case is in the assets directory. We have the option to set the alignment, the fit, and a bunch of other things. But in order to run an animation, we need to pass it an animation property. The value should be the name of the animation that you define when creating this graphic in Flare. In our case, we gave all of our animations the same name of go. So we'll go ahead and use that animation name whenever this item is active. Otherwise, we'll just pass it a string of idle which will do nothing. And that's all there is to it. By combining the powers of Flare and Flutter, we were able to take a navigation menu that seemed extremely complex on the surface, recreate it with minimal effort, and be able to run it on iOS and Android without sacrificing quality. I'm gonna go ahead and wrap things up there. If this video helped you, please like and subscribe. And if you want access to even more content, consider becoming a pro member at Fireship IO. Thanks for watching, and I will talk to you soon.
        