Using Sketch to Design Animations
Animations in Sketch with Anima — The Basics
Anima Animations Editor (was Timeline) is a tool for animation design, right inside Sketch. On this post we’ll explore the key components of Anima animation editor.
Update: Timeline is now part of Anima Toolkit — Allowing designers to create Responsive and Interactive High-Fidelity Prototypes, all inside Sketch.
Anima Animation Editor
Selecting a Group or an Artboard and clicking Anima Panel > Prototype > Animation > `Create` will present the full interface of Anima Animation Editor.
Keyframes
Inspired by Keynote and the “Magic Move”, keyframes allow you to control the animation transitions like a storyboard.
Simply drag & drop or play with layer’s properties to animate it. All layers appear on all keyframes and you may show or hide them using opacity to make them fade in or out. You can add as many keyframes as you like.
Transitions & Timeline
An arrow above each 2 keyframes defines a transition between them. Selecting an arrow will reveal its corresponding Timeline panel at the bottom.
And this is where lays the true power of this tool — the Timeline.
It allows you to set exact timing and curving in order to refine your animation into a beautiful and precise one.
The Toolbar
Once you’re in Anima Animation Editor, you’ll see a set of Anima Editor actions in the top toolbar.
Here are the 2 play methods explained:
Play One — Play a single transition between 2 keyframes.
Play All — Plays all of the keyframes transitions in a loop.
Export
When you’re done crafting, click Export GIF or Export Video, in order to save your design.
These were the basics of Anima Animations. On Anima 3 we’ve enabled to add animations and interactions to High-Fidelity Prototypes. So you can create amazing experiences, right in Sketch. Thanks for your amazing support and ideas, keep it coming!