Choosing The Best Animation Tool for Sketch
The Ultimate Guide to UI Animation Tools for Sketch Users in 2019
It’s an exciting time for animation. Never before has there been such a cornucopia of tools available for UI designers and animators. So, which one should you use? Surprise, surprise: we have some thoughts.
But first, let’s agree on what constitutes the “right tool”.
Thinning The Herd
If we simply ask: “Can this software animate interfaces?”, the number of tools available gets out of hand pretty quick. Here’s how we whittled it down to 5 options.
Producing vs. Prototyping
The first thing you need to ask yourself is if you want to be “producing” or “prototyping”. There is quite a big difference, and the answer often lies in the current stage of a project. At an early stage, you’re probably experimenting with high-level concepts like the the general flow, look, feel and style of an app or site. If that’s the case, then any tool that empowers you to quickly ground the concept is ideal. But as you get further along with a project, being able to craft the fine details of your work becomes critical. So does being able to directly contribute to production.
Prototyping tools like Invision, Marvel, Figma, et. all, have their place but the problem is, they don’t directly contribute to production. Designers and animators hand-off these carefully crafted prototypes and developers are left to wrestle with recreating it all in code. It’s wasteful, frustrating and inefficient.
Designers and animators should be producing, *as well as* prototyping. Enough of this nonsense.
To be fair, unless you possess a very broad set of design / animation / programming skills — you probably haven’t had much opportuinity to truly contribute to the production process. This is swiftly changing with a range of new tools that allow designers to animate their work and export it directly to code.
This is huge. This is the future.
Our Criteria
That brings us to our criteria for choosing the 5 apps we will cover:
- It should have powerful, full fidelity animation tools.
- It should integrate with some industry standard file formats (eg. Sketch, Adobe, etc).
- It should, on some level, integrate with and directly contribute to production/development: it should export code (both Mobile and Web, ideally).
- Exported code should allow for dynamic interaction and easy integration for developers.
So… let’s get to the apps already!
The Right Stuff
Based on our criteria above, we’ll be looking at the following 5 tools. (In alphabetical order.):
Yes, we know, there’s five of ’em. So, which one should you choose? Well, depends on what you want to do. We’ve broken down the Good, Bad and Ugly for each of these apps, as well as what each of them is good for. Read on to find out which app is right for you.
Overview
Let’s start with a high level look at the strengths and weaknesses of each of these tools. Then we’ll dig into each one in detail.
Adobe After Effects + Lottie
Price:
$20.99 per month for After Effects (with a 30 day free trial) and Lottie is open-source (free).
You probably already know this, but just in case: Adobe After Effects is the industry-standard motion graphics and visual effects software. It’s an absolute beast. Animators, designers, and compositors use it to create motion graphics and visual effects for film, TV, video, and the web. There is little you can’t do with After Effects, but if you are new to it, there is a lot to learn.
Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. It was birthed by the talented folks at Airbnb. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web.
Who’s it for?
If you already know and use After Effects, this is pretty appealing. This is a good solution for a high-end team (like Airbnb) that wants to be doing many different kinds of animations and already has motion design talent fluent in After Effects. If “most creative freedom possible” is your priority, you are working with experienced developers, and married to After Effects, then this is probably a good choice for you.
The Good
- After Effects is incredibly powerful and there are countless of resources out there to help you learn it.
- Lottie’s library allows for a variety of different kinds of animations, including basic line art, character-based animations, and dynamic logo animations with multiple angles and cuts.
- Supports loading JSON files over the network, which is useful for A/B testing.
- Optional caching mechanism for frequently used animation.
- Animations can be driven by gestures using the animated progress feature.
The Bad
- If you are new to it, After Effects can be a lot to take in.
- After Effects is not geared for UI animation.
- No special integration for Sketch files – though there is a 3rd party plugin Sketch2AE… but it’s website literally says “fully broken in Sketch 52!”
- Monthly fee for After Effects.
The Ugly
- It’s Adobe. Ugh.
- Learning curve is steep.
- After Effects is bloated and requires a fast machine to run it fast enough to work super efficiently.
- Questionable continued development of Lottie and Bodymovin, and a setup / pipeline that would make Rube Goldberg proud.
- Lottie is a beast of a codebase, and (for iOS at least) it is written in Objective-C… Where’s the Swift?
Flow
Price:
$15 per month or $150 per year (with a 30 day free trial). MacOS only.
Full disclosure, MovingUI is sponsored by Flow. But, we promise our reviews are as objective as possible — we only have our readers’ best interest at heart.
Flow is a powerful tool for creating animations, interactive transitions and layout code for iOS and HTML projects. It’s tight Sketch integration let’s you import your designs 1:1 and have complete control over their animations, or you can import 2 artboards and have Flow generate transitions for you. Built as a production tool, Flow exports elegant Swift (iOS) and HTML5 – including SVG – code using industry standard approaches (i.e. AppKit / Core Animation for iOS or JS using the Web-Animations api). You can also export GIFs, Animated PNG, or compressed movies as well. You can think of it like this: Flow is to Adobe After Effects as Sketch is to Adobe Illustrator.
Who’s it for?
If getting your work 1:1 into a production-ready product is your priority then Flow is for you. It’s code-generation feature makes it incredibly easy to hand off the unique, and often complex, timing subtlety of great animations. If you work in a team geared towards producing high fidelity user experiences for web or iOS, then Flow is definitely for you. It’s also great for anyone wanting to quickly sketch out motion, or taking a peek behind the scenes to learn how to build animations in code from scratch.
The Good
- Powerful timeline: with its design-focused approach, editing anything on the stage creates timelines for any properties that change. You can accurately edit timing, change easing curves, and even copy/paste values and animations between layers.
- Powerful code: Flow’s code export system consistently exports the most modern syntax for iOS and web development and exports light-weight, industry-standard code for either platform. Also, code is not dependent on the integration of any 3rd-party software.
- Simplified interface: If you’ve ever edited a keyframe in your life then Flow’s interface will make sense to you.
- Drivers: The latest release generates drivers as part of its code export. That means you can use gestures, triggers, or dynamic input (e.g. progress updates) to drive your animations.
- Copy / Paste from anywhere: Despite only being able to import Sketch files, you can copy and paste content into a Flow document from almost any other application.
The Bad
- Mac only: but since they’re targeting Sketch users as a primary audience this isn’t totally bad.
- Imports only Sketch files, currently.
- Interaction is a few steps away: it currently isn’t a prototyping tool where you can lay out a screen and animate the “flow” of a user’s experience. You can experiment with drivers after exporting code, you just can’t do it from within Flow itself.
The Ugly
- Young product: learning and support resources are available, but the team needs to focus on producing more.
- Reliance on Sketch: advanced editing tools for paths and typography are missing from the product. For example, if you want to create a custom shape or edit its curves you’ll have to do these in Sketch and import them into Flow.
Haiku
Price
Free or $19 per month for Haiku Pro. MacOS only.
Haiku is a slick tool for creating animated, interactive user interfaces. It works with files from Sketch, Figma, Adobe Illustrator, or SVG, and it’s backed by git version control. Haiku components (haiku) are built for production. A developer can drop a haiku into her codebase with a single line of code. From there, designers can continue to design, animate, and iterate.
Who’s it for?
If you are working with a highly iterative team on projects that need to be delivered across a wide variety of platforms, then Haiku is a solid choice. It’s git-backed version history is great and if your devs don’t mind a few 3rd party libraries, then they have to think about very little once they add a line of code to their projects. Designs can be updated without much hassle.
The Good
- Powerful timeline: sequence and animate elements using the built-in tween and easing curve library.
- Publishing, sharing and embedding your interactive animations is easy.
- Supports Sketch, Figma, Adobe Illustrator and SVG files.
- You can use expressions to add dynamic behaviour to components – this is pretty badass.
- Publishes encapsulated components that can be rendered across a multitude of web and mobile platforms.
- HaikuCore – handles everything for you.
The Bad
- Almost everything you can imagine can be animated using web-standards, so reliance on this 3rd party library is questionable.
- The timeline is pretty heavy, can be complicated to learn unless you’re experienced with After Effects.
- You need to learn scripting for interactivity.
- Can’t design anything from scratch in Haiku.
The Ugly
- To really get power out of the api, you need to have a developer who’s experienced with HaikuCore.
- Getting your animations into iOS & Android = Haiku > Bodymovin’ > Lottie > Programmer… Rube Goldberg would be in heaven. It’s a bit of a house of cards.
- The desktop app can really get your laptop’s fan singing.
Kite Compositor
Price
$99 ( 30 day free trial. ) MacOS & iOS only.
Kite is a native animation and prototyping design tool for the Mac. It features a timeline editor, WYSIWYG canvas, and a robust scripting interface. The iOS companion app, Kite Compositor for iOS, allows you to interact with your Kite designs on your iPhone or iPad.
Who’s it for?
If you’re designing iOS or macOS apps and want to bring animations into your UI, then Kite might do ya just fine. The interface for Kite exposes the power of Apple’s native animation APIs and feels like a visual translation of Core Animation, so if you’re experienced with CA then you’ll probably ❤︎ this one.
The Good
- POWER. There’s an interface that lets you essentially animate everything possible in iOS / Mac native animation APIs (i.e. Core Animation).
- Export to native Swift or Objective-C code on iOS or Mac
- Interactive Realtime Rendering
- Sketch Import
- Video and GIF export
- Companion iOS App
- Bezier path, and MOTION path editing
- Component and effects libraries
The Bad
- There is a nice KiteKit Framework for embedding Kite documents in apps, which looked like it had potential. Unfortunately it is out of date and won’t compile with the latest version of Swift.
- You need to be a developer to get your animations running cleanly in the iOS simulator (e.g. Kite exports an iOS simulator image as a TIFF file that the latest version of Xcode disagrees with… better if it were png).
- Design-Code pipeline is limited to only iOS or Mac.
The Ugly
- The interface is not intuitive… Unless you’re an expert in Core Animation, and you understand things like byValue, or how raw values like 200, 10, 7 and 0.4 can translate into motion and feeling.
- The code export, while precise, is limited in terms of flexibility and software design — it would be hard to effectively integrate an animation or prototype into components other than the SceneView that Kite exports.
Sketch + Timeline Plug-in
Price
$39 per month if you want to export code. Free if you don’t. (14 day free trial.) Sketch app plugin only.
Timeline is a Sketch plugin. It allows you to work end-to-end inside Sketch.
All your creations, from animations to interactions are saved into your Sketch file. This simple and powerful tool lets you animate within Sketch for your websites, mobile apps, newsletters, banners, ads and more. On top of that, it has a nice sharing function that will upload your timelines to the web so you can play around, download them, or easily share them.
Who’s it for?
Timeline is fantastic for building simple prototypes that animate between various static states. If you want to quickly sketch out concepts for an app, a button, or any other kind of simple component, and send them to colleagues or clients, then this is a great tool for you to use. Plus, never having to leave Sketch is a bonus.
The Good
- There’s a lot of really great features such as being able to record a demo of your interaction, in-app help, feedback, etc. We were really impressed with how well this tool integrates into Sketch.
- Sharing feature and the handoff.animapp.com is smooth as hell.
- Lightweight and allows you to work end-to-end in Sketch.
- State transitions – animating between your static designs is dead easy.
- You can add click, hover or a timer to trigger state transitions.
- Nested components. Symbols, artboards & groups can all turn into interactive components.
- Exports are pure HTML / JS / CSS, no dependencies.
The Bad
- No iOS or Android code export – you’re really limited to only the web.
- Animation tool fidelity is moderate. Its state-animation model makes it cumbersome to smoothly add intermediate values and positions – i.e. you don’t have the ability to create key frames.
- Limited interactions – you can choose between mouse events, a click and a timer, but nothing else.
- Code is not clearly encapsulated – it’s packed into a single file. If you’re intending to add your prototypes into a larger project this adds a bit of difficulty to the process.
The Ugly
- Just because interactions work in the app, that doesn’t mean they will work in the web export.
- Most expensive monthly fee.
Conclusion
If you are anything like me, you’ve scrolled past all this nonsense so you could get to the end and see which one we recommend. Silly goose — if you’d read the article you’d know that one size does not fit all. Try this TLDR version:
AE+Lottie
If animation fidelity is your main priority and you’re married to After Effects, then this is probably a good choice for you.
Flow
If getting high fidelity animations 1:1 into a production-ready product is your priority then Flow is for you. Its code-generation features and quality are unmatched.
Haiku
If you are working with a highly iterative team on projects that need to be delivered across a wide variety of platforms, then Haiku is a solid choice.
Kite
If you’re designing iOS or macOS apps and are looking for a tool that exposes the power of Apple’s native animation APIs — this is like a visual interface for Core Animation.
Sketch+Timeline
If you want to quickly sketch out concepts for an app or any kind of simple component and share them, without ever leaving Sketch, Timeline is great. (Limited to web exports.)
Good luck and happy animating!
Related Articles
Embracing Your Animated Future
A UX Designer’s guide to learning UI Animation and animating Sketch designs.
About MovingUI
MovingUI is a publication for UX Designers learning UI Animation. It is brought to you by Flow, a tool for animating Sketch files for iOS.
