Video
Create dynamic, cross-platform UIs using design tools, code, or both.
Design assets with Sketch, animate them with Animator, and include them in any web app—then keep iterating.
Blog post
Learn the basics of motion design and get started with Animator.
How to integrate and use Figma projects
Export Sketch Animations to native iOS & Android Code!
By: Maex
Help doc
How to bring assets designed in Sketch into Animator and troubleshooting common issues.
How to bring assets designed in Figma into Animator and troubleshooting common issues.
How to bring assets designed in Illustrator into Animator and troubleshooting common issues.
What if I don't use Sketch / Figma / Illustrator?
Understand the terms and naming conventions used in the Animator app.
Different ways to create a new Animator project.
Forks are a unique copy of a project, which doesn't affect the original project.
When you create a Animator project, you can decide if you want it to be public or private.
You can add keyframes to the timeline in three ways.
In the animation world, transitions are known as tweens.
How can I select an object in the canvas?
Maintain the original position of your slices with Ungroup.
How can I align elements in Animator?
How can I change the order of my layers / slices / elements / shapes?
You have a couple of options to Zoom in and out of both the timeline and the stage.
How can I change the origin point for scaling or rotating an element?
A quick tutorial on how to change the point of rotation (origin) in Animator.
How can I adjust the size of the stage in Animator?
Can I switch from frames to milliseconds in the timeline?
How can I rotate my slice / element?
Work with different sized elements easier.
Can I change the stage's background color or an asset's color?
Steps to add the stroke property to an element.
A quick tutorial on using sub-components within Animator.
Find the “playback” property on the timeline where you instantiated the component.
How to preview each component individually and all components together.
Learn how to create, edit, use and make the most out of States in Animator.
How to use the built-in Code Editor or any custom editor.
Vertical curved path with flow effect.
Horizontal curved path with bounce effect.
Animator Tour/walkthrough + Spinning the record.
By: Anjan Shrestha
Can Animator do motion blurs?
Learn how to path morph using Animator.
Advanced follow-along tutorial on path morphing.
Learn how to animate a line's stroke using Animator.
Blog post and Video
Understand the two different typestyles of Actions available in Animator, Frame and Element Actions.
Actions are small snippets of code (JavaScript) with a lot of power.
Learn how to add interactivity to your designs for the Web using Actions, States & Expressions in Animator.
Using states and events to create the stop/play interactions of a media player.
Quick tutorial on how to make a simple toggle component using Animator.
Export to React, after designing in Sketch, and tweaking keyframes in Animator.
By: Kyle Gill
Using states and actions to create instances of an element depending on where the user clicks.
Learn how to use the send() api to communicate between components.
Bring your Figma designs to life by easily animating and publishing as React components.
Helpers allow you to define a function that can be later used in an Expression or an Action.
Summonables are a collection of built-in pieces of dynamic data that you can summon.
This will allow you to create pieces of UI that react to both touch and mouse interactions.
Docs
Embed a component in a web app, binding it with application logic.
Reference and technical documentation on Animator by Haiku and Haiku Core API's.
Advice and answers on common issues, frequently asked questions, and tips and tricks.
