Show Me!
You know feeling when you just need a simple animation for your awesome concept and you realize that it's a huge process to move all assets into some other application? That’s a lot of hassle! Like this example.
That's why I created AnimateMate in order to produce and export simple animations straight out of Sketch. It's not exactly rocket science, but it can lighten your workflow in some cases.
So let the game begin!
AnimateMate is based on keyframes. So you'll create the main keyframes while AnimateMate takes care of the keyframes in between.
AnimateMate uses Robert Penner's great easing functions. So you can get many different easing styles to your animations. Here you can see them in visually.
You can edit keyframes through organized text view where you can see all of the selected layer keyframes. It looks like JSON. You can also use it for importing and/or exporting animations.
Tip: Here you can set negative values, like to rotations because Sketch doesn't allow that.
If you don't like your animation, get rid of it! You can delete selected layer animation or the entire animation in artboard if you don’t have anything selected.
AnimateMate supports grouped layers in some cases. It's recommemded to avoid complex nested structures because nested layers change parent group size and lead wierd animations.
Tip: Use empty "bounds" layer to retain the size.
Offsetting animations is handy when you need to apply alterable or overlapping values to each other layer animations. You can offset animated values in keyframe numbers or animated values.
This is my favourite feature: random animation data. It's like a little playground for getting different results each time and it's fun to see what you get!
Forgot where an item was on a certain keyframe. No problem- you can reset keyframe values to the item. This also is a handy tool for saving different states of your design.
Tip: You can reset multiple items at the same time.
GIF is recommended only for short animations because it takes a long time to convert. Instead I recommend exporting a PNG sequence and saving them to an animated GIF in Photoshop in order to get more control over the quality and size of the file.
Even though AnimateMate is just a prototype version, I've found it very useful in my workflow. It would really warm my heart to see what you’ve done with it, or just spread the word!
Creatide
Creatide
Creatide
Creatide
Creatide
Creatide
Creatide
Creatide
Creatide
It would be more than great to see what you've done using with AnimateMate.
Maybe I can show it here (of course with your permission).