Animation with Sketch was a tricky one for me. While I use tools like Invision and Marvel to create click-through prototypes easily. However, I found it difficult to find an easy way to create high-quality, simple transitions to demonstrate micro interactions.
I have recently had the opportunity to play around with AnimateMate, a free animation plugin for Sketch. While I initially found it tricky – mainly due to the lack of visible timeline, I eventually got
Animation with AnimateMate
The biggest issue with AnimateMate is it’s lack of timeline – which I feel a lot of people will find confusing at first. One of the cool features is the ability to edit the animation – which brings up a code editor (which reminds me more of Macromedia Director and Lingo)
If you want to download the free plugin for yourself to try it out – it’s available from the AnimateMate website.
Advantages of AnimateMate
One of the best things about AnimateMate is it’s ability to render high-quality animations. It’s annoying when pixel-perfect designs are rendered out as poor quality animated gifs. It completely defeats the purpose of what we are trying to do.
First Animation
My first animation is below. I created two kinds of loading screens that anyone can use in a prototype for an app or website. As you can see, the quality is very high and they didn’t take long to make. The ‘dots’ one uses “Offset Animation” and the circle one is just a rotation. I uploaded it to my Dribbble profile along with the Sketch file, so you can download them and give it a try yourself.
I’m really looking forward to using AnimateMate in future projects, to bring designs to life. I’ll be working on a new side project soon, and this will be the perfect way to create something high-quality in a short time.
If you have had a chance to work with the AnimateMate plugin, I would love to hear what you think. As always, I hang out on Twitter most of the time, and you can reach me through my contact form.
Have a great Easter weekend everyone!
