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

<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" rel="nofollow noopener noreferrer" target="_blank">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" rel="nofollow noopener noreferrer" target="_blank">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>

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