Anima allows designers to create high-fidelity prototypes inside Sketch, Adobe XD, and Figma and export HTML & 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.
How Does It Work?
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.
Resize Machu Picchu image
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 elements to their end position
Step 4. Modify the elements’ properties
- 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.
Modify the elements’ properties
Step 5. Link Artboards
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 6. Change link type to Auto-Animate
Change link type to Auto-Animate
Step 7. Select animation curve and duration
Select animation curve and duration
Step 8. Click Preview in Browser
Click Preview in Browser