How to Create Interactive Design in Sketch, and Export HTML
Timeline for Sketch — Tutorial & Freebie
Timeline for Sketch is an interaction design tool, right inside Sketch. After crafting your interaction, you can actually share it as a live HTML, embed it in your site, or handoff to development team.
On this tutorial we’ll start from this basic interaction.
To enter the Timeline editor, select the Artboard, and click the Interaction Design button in the plugin panel.
Once in Timeline, 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.