Anima

<a href="https://wndr.animaapp.io" rel="nofollow noopener noreferrer" target="_blank">See it live</a> | <a href="https://www.dropbox.com/s/wz2kdgh0lxtslmn/WNDER.%20%E2%80%93%20Anima%20Auto-Animate%20for%20Sketch.sketch?dl=1" rel="nofollow noopener noreferrer" target="_blank">Download the Sketch file</a>

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

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

See it live: <a href="https://wndr.animaapp.io" rel="nofollow noopener noreferrer" target="_blank">https://wndr.animaapp.io</a> ​Try it out yourself! <a href="https://www.dropbox.com/s/wz2kdgh0lxtslmn/WNDER.%20%E2%80%93%20Anima%20Auto-Animate%20for%20Sketch.sketch?dl=1" rel="nofollow noopener noreferrer" target="_blank">Download Sketch File</a>

Step 1. Create a design and duplicate the artboard.

Select the artboard and press Command + D.

Step 2. On the duplicated artboard, resize the Machu Picchu image to fit the entire artboard.

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

Step 3. Move elements to their end position

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

- 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 4. Modify the elements’ properties

Change the Social symbol and Slider Ovals opacity to 0%

- 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.

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

Step 7. Select animation curve and duration

See it live: <a href="https://wndr.animaapp.io" rel="nofollow noopener noreferrer" target="_blank">https://wndr.animaapp.io</a> ​Try it out yourself! <a href="https://www.dropbox.com/s/wz2kdgh0lxtslmn/WNDER.%20%E2%80%93%20Anima%20Auto-Animate%20for%20Sketch.sketch?dl=1" rel="nofollow noopener noreferrer" target="_blank">Download Sketch File</a> ​❗️Please note:

Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.

- Due to the shift towards Figma in the UX/UI market, we have decided to remove official support for our Sketch plugin. However, users can still use the plugin as-is. We recommend using Anima with previous Sketch versions.

___________________________________________________________

<a href="https://blog.animaapp.com/announcing-anima-for-adobe-xd-6db773468f4f" rel="nofollow noopener noreferrer" target="_blank">Announcing Anima for Adobe XD</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>

<a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>

<a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</a>

- <a href="https://blog.animaapp.com/announcing-anima-for-adobe-xd-6db773468f4f" rel="nofollow noopener noreferrer" target="_blank">Announcing Anima for Adobe XD</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-publish-a-website-and-host-it-with-anima">How to Publish a Website and Host it With Anima</a>
- <a href="https://support.animaapp.com/designer-s-guide-to-anima/how-to-export-sketch-to-html">How to Export Sketch to HTML</a>
- <a href="https://support.animaapp.com/en/articles/2627097-anima-for-sketch-how-to-create-a-high-fidelity-prototype">Creating a High-Fidelity Prototyping in Sketch</a>

Create Automatic Transitions Between Artboards, on Sketch, XD, and Figma

Auto-Animate for Sketch, Adobe XD and Figma

Sign in to Anima

Submit Bug Report

Back to Anima

Log in to Anima

Find answers and get help from Intercom Support and Community Experts

This site employs cookies and other technologies that we and our third party vendors use to monitor and record personal information about you and your interactions with the site (including content viewed, cursor movements, screen recordings, and chat contents) for the purposes described in our Cookie Policy. By continuing to visit our site, you agree to our {websiteTermsLink}, {privacyPolicyLink} and {cookiePolicyLink}.

This site uses cookies and similar technologies ("cookies") as strictly necessary for site operation. We and our partners also would like to set additional cookies to enable site performance analytics, functionality, advertising and social media features. See our {cookiePolicyLink} for details. You can change your cookie preferences in our Cookie Settings.

We use cookies to make our site work and also for analytics and advertising purposes. You can enable or disable optional cookies as desired. See our {cookiePolicyLink} for more details.

Advertising cookies are set by our advertising partners to collect information about your use of the site, our communications, and other online services over time and with different browsers and devices. They use this information to show you ads online that they think will interest you and measure the ads' performance. Social media cookies are set by social media platforms to enable you to share content on those platforms, and are capable of tracking information about your activity across other online services for use as described in their privacy policies.

These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.

These cookies are necessary for the website to function and cannot be switched off in our systems.

These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

You have the right to opt out of the sale of your personal information. See our {cookiePolicyLink} for more details about how we use your data.

Your Privacy Choices

We use cookies to enhance your experience. You can customize your cookie preferences below. See our {cookiePolicyLink} for more details.

Cookie Settings

Link, Press control-option-right-arrow to exit

Empty Help Center

Uh oh. That page doesn’t exist.

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

Tickets submitted through the messenger or by a support agent in your conversation will appear here.

Auto-Animate for Sketch, Adobe XD and Figma

Introducing Auto-Animate

How Does It Work?

Step 1. Create a design and duplicate the artboard.

Step 2. On the duplicated artboard, resize the Machu Picchu image to fit the entire artboard.

Step 3. Move elements to their end position

Step 4. Modify the elements’ properties

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à!

Learn More