Timeline by Anima: Web Design Animation & Export Code from Sketch

Articles, Blog

Timeline by Anima: Web Design Animation & Export Code from Sketch

Timeline by Anima: Web Design Animation & Export Code from Sketch


Design, animate, and export as code all
within Sketch. I’m Hunter from Skillthrive and I’m
going to show you how this is possible with Anima Plugin. Here I’ve designed a
check out page for a new e-commerce store. With Timeline, I can take this
purchase button, which was once just a static design, and making a web-ready,
interactive element. First, I’ll head to my symbols page and select the check out
button artboard. Then I’ll head to the Anima panel and click on this icon to
view the options for Timeline. With the artboard selected, I can click on
‘Interaction Design’ to begin animating. On the first state, I’ll set an action that
triggers a transition when a user clicks the elements. Then on state 2, I’ll move
over the ‘darken’ layer to the right until it fills the artboard. I’ll
increase the duration of the transition to 1 second and change the curve type to
linear–that way the transition is one, constant speed throughout. I can preview
this transition by clicking on ‘Play Transition’ at the top. Next, I’ll add the
third and final state and create an action connecting state 2 to state 3,
this time selecting ‘Set a Timer’ as my event. Right now the event is set to 0,
which means the next transition will start as soon as the state before it
finishes. Now I’ll edit state 3, I’ll turn off the visibility for the check out
text, the yellow background, and the darken background, and turn on the
visibility for the green background and success text. I’ll extend the animation
duration for both text layers to 0.4 seconds. I also want this text layer to
fade in when this text layer finishes fading out, so I’ll move the beginning of
this one to the spot where this one finishes. Now let’s export this
interactive design as code. To do that, all you have to do is click on ‘Export
Code’ and Timeline will create this link. From the link I can interact with the
element, hand it off to a developer, or even host the code on JS Fiddle or CodePen.
And that’s it! In just a couple minutes I used Timeline to create an interactive
design and export the code all without ever leaving Sketch! If you’re ready to
give Anima Plugin a shot, they’re giving Skillthrive members 15% off their first
three months. Check out the link in the description to learn more. I’ll see you
in the next one!

One thought on Timeline by Anima: Web Design Animation & Export Code from Sketch

Leave a Reply

Your email address will not be published. Required fields are marked *