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.

First, if you don’t have Timeline plugin download it here👈
Then, you can download the Sketch file here👈


Open Timeline

To enter the Timeline editor, select the Artboard, and click the Interaction Design button in the plugin panel.

Timeline’s 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.

Click the lightning icon to add action

When the Event menu appears, choose the event On Click.

Choose action: 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.

Here’s how it should look after you edit `state2`

Run it

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.

Hit `Run Component` to try it

Export Code

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.
Require login or make it public

After clicking Open, you can play with the live component in your browser, share it or even download the code.

After Timeline’s `Code Export` — link

That’s all for today! 
More tutorials are coming soon.

Hope you’re enjoying Timeline, let us know on Facebook or Twitter, or just show off if you’ve made something cool.
❤️ Anima team