Anima Brings Auto-Animate to Sketch!

Create Automatic Transitions Between Sketch Artboards.

Anima App
Anima App
Jul 1, 2020 · 3 min read
See it live | Download the Sketch file

Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Start Free button
Start Free button
Design to code, automated.

Introducing: Auto-Animate for Sketch

If you are not familiar with Anima, two years ago, we introduced an advanced Animations and Interactions editor directly inside Sketch.

Today, we launched Auto-Animate for Sketch. Anima Auto-Animate enables you to connect two similar artboards and get a fluid animation between them as if you animated it yourself.

Auto-Animate is also available with Anima for Adobe XD and Anima for Figma.

See it live: https://wndr.animaapp.io
Try it out yourself! Download Sketch File

How Does It Work?

Step 1: Select the artboard and press Command + D.

Important: Layers must keep the same names in both artboards in order to auto- animate correctly.

Step 2: Resize Machu Picchu image
  • Move the text box to the lower-left corner
  • Slide down the Social symbol and Slider Ovals. (Make sure they do not slide outside the artboard).
  • Slide Facts (hidden) in from the right
Step 3. Move elements to their end position
  • Change the white Rectangle opacity to 0%
  • Change the text color to white
  • Change the Social symbol and Slider Ovals opacity to 0%
  • Change Facts group opacity to 100%

Anima will calculate the position, color, and opacity changes and generate a fluid transition between the two artboards.

Step 4. Modify the elements’ properties

Select the Read More button in the original artboard, then go to Anima Plugin>Prototype> Flow> Links and point the purple arrow towards destination artboard and click it.

Step 5. Link Artboards
Step 6. Change link type to Auto-Animate
Step 7. Select animation curve and duration
Step 8. Click Preview in Browser

Violà!

See it live: https://wndr.animaapp.io
Try it out yourself! Download Sketch File

What is Anima?

Anima allows designers to create high-fidelity prototypes right inside Sketch, Adobe XD, and Figma and export HTML & CSS in a single click.

Start Free button
Design to code, automated.

As always, we’re excited to hear your feedback!

Join the discussion or show off your designs on Facebook, Twitter, Slack, Instagram, and vote for new features at UserVoice.

Stay creative!
❤️ Anima team

Design + Sketch

The best collection of articles, tips, tutorials, and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store