Let's be honest here animation software is hard to learn, and it is so overwhelming to do simple animation. There's a lot to learn, like organizing your assets, importing them to the software, and getting familiar with the user interface that has dozens of panels you don't know or even use.
While animating, I focus more on the layers, timeline, and tweaking easing to achieve the desired animation I want. I just wanted a simple tool that does the job. Gladly, the Figmotion plugin in Figma does this job.
Organize and name your layers
When you run the Figmotion plugin, it reads all the layers and lists them all in the timeline. Navigating to a specific layer will be hard if you don't. For example, if it's a button, name it a button. Not layer42069.
The fewer the layers, the better. Rasterize a group of components into one layer. For example, it will be better to treat it as one layer if you plan to animate the entire header at once instead of having multiple layers such as logo and navigation links.
How-To Animate the Element?
You need to have an initial and end state to animate an element. For example, if you want to move a box from left to right, you need to animate the x property.
- Initial state: Add a keyframe to x and set the position to 0
- End state: Add another keyframe to 300ms on the timeline and set the x position to 100.
The element will move 100px from the left in .3 seconds when you play the animation.
How-To Control the Speed?
Controlling the animation speed will depend on how much time you set on the timeline, and the shorter the time, the faster it moves. You can further manipulate the animation by applying Easing. Think of easing as acceleration or deceleration. By default, all keyframe in Figmotion is linear. This easing type is boring, and I would suggest using the other type, such as easeIn, easOut. You can also do custom easing and mess around with the graph editor.
Animation Choreography
It is more about creativity, timing, and how you plan to move things around. Just remember, Less is More.
In this example, I'll show you how I did my animation.
1. I want users to read the headline, description, and call to action first. I want to animate this staggeringly.
Initial State: I will set the y property 40px down and 0 opacity
End State: Reset it back to its original position and opacity.
To achieve stagger animation, you need to offset each keyframe by xxxms.
Tip: If you move the elements, make sure to set easy to remember value such as 40px. So, you can easily subtract or add from its original position.
2. Followed by a swiping image from left to right
Initial State: A white rectangle above the original image. Set the x property to the default position.
End State: Change the x value that will fully reveal the image.
3. Lastly, I want to show the header starting off-screen and reveal just when the swiping image end.
Initial State: Set the y property to a -88px (height of the header) and set 0 opacity.
End State: Reset it back to its original position and opacity.
Video Walkthrough
If you are happy with your animation, go ahead and render it. You can choose .mp4 or .gif format.
That's it! That's how I created my animation in Figmotion. I hope you learn something from this tutorial. Happy Animating.