Feb 22, 2020
How-to Create and Export Animations with Anima in Sketch
I have been using Sketch for MacOS for multiple years now already, though so far I only created static designs, which would be either for iOS or web applications. The problem with still designs though, is that the idea behind some of the components would not be reflected like I intended them to be, as they were not animated.
Lately, I found out that there is a way (and most-probably multiple more exist) to bring your designed elements to life within Sketch. In this tutorial, I would like you to show how you are able to simply animate a loading bar with the Anima plugin in Sketch.
For this you will need both Sketch and Anima, which you can both download and use for free for a certain period before you will have to pay for their services.
First, create a regular rectangle in your favourite color, which for me is #77F0BB for today. Then you will have to select your entire artboard, which is the iPhone 8 frame in my case, and click the create button in the Anima plugin tool, which you should normally find on your right.
Once you are in the Anima tool, it is very easy to create and adjust your animations. The screen is showing all states (starting with two) it will loop over for your animation. As both states will look the same when you start, you will have to change either one of the two in order to see a change in your animation.
In this example, I will only change the width of the rectangle in the first state to ten pixels, so the animation will change between ten and the original used number (257) of pixels.
When you would select an element, a lightning icon will appear, which will give you the possibility to choose when to play your animation. This could be either be when clicked, hovered or a time preference. Below the states you create, there is a timeline in which you can set the number of seconds the animation will take to get from the first to second state. In case you would create more than two states, you would also be able to set a delay in this part of the plugin.
Once everything is set to your liking, you could see your animation, by pressing the ‘run component’ button at the top of the application.
The great thing about Anima is that you are able to export this animation in code, video or GIF (like I used at the top of this article). Like this, it it extremely easy to export your code to CodePen and share this with the people who actually will be coding your application.
