How to Create Interactive Design in Sketch, and Export HTML
Anima (was Timeline) is a tool for interaction design, right inside Sketch.
After crafting your interaction, you can actually share it as a live HTML, embed it in your site, or handoff to the development team.
Update: Timeline is now part of Anima Toolkit — Allowing designers to create Responsive and Interactive High-Fidelity Prototypes, all inside Sketch
On this tutorial, we’ll start from this basic interaction.
Open Interaction Editor
To enter the Interactions editor, select the Artboard, and click Prototype Tab > Interaction > ‘Create’ button in the plugin panel.
Once in Interaction Editor, you can see that a second State was already created for you. States start from your original artboard or group design, but allow you to change the properties of the layers you wish to animate. In other words, you can override the original state of the artboard.
Create an Action
In order to add an Action, choose the layer you want to add action from, and then click the little lightning icon. In our example, choose the purple round button.
When the Event menu appears, choose the event On Click.
Design the Second State
In the next step, edit the second state: turn the arrow into the Checkmark sign by rotating the arrows head by 135°, and the arrows line by 45°.
Using the bottom animation panel, set both animations duration to 3 sec by selecting the corresponding blue bands.
Next, hide the ‘Subscribe’ layer, and set the animation duration to 2 seconds. Add a delay of 3 seconds by dragging the corresponding blue band or by selecting it and entering the value in the right panel.
Reveal the ‘Thank You!’ layer and set the animation duration to 4 seconds. Add a delay of 4 seconds by dragging the corresponding blue band or by selecting it and entering the value in the right panel.
Once you’ve set everything up, you can preview the component by clicking Run Component. While running a component, you can click or hover it to see how the component behaves right inside Sketch.
Now that the design part is done, click on Export Code.
After a few seconds of upload, a popup with a link to share will appear.
This is the link for our example: http://bit.ly/SubscribeSample
Tip: If you want your link to be password protected, you can leave the Require Login checkbox checked. Otherwise, if you want you link public, uncheck it.
After clicking Open, you can play with the live component in your browser, share it or even download the code.
That’s all for today!
More tutorials are coming soon.
What is Anima?
As always, we’re excited to hear your feedback!
❤️ Anima team