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.
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.
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
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.
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
Step 7. Select animation curve and duration
Step 8. Click Preview in Browser
What is Anima?
As always, we’re excited to hear your feedback!
❤️ Anima team