Design + Sketch
Published in

Design + Sketch

How to Export Sketch to CSS Animations Code

Or how to communicate animations without waving your hands

Trying to explain animations …
Export Code
Here is how to prepare your animations
  1. Click the rightmost tab of our plugin to reveal Timeline.
  2. Click “Tutorial”.
  3. Expand “Practice 2” and select “Cup
  4. In our plugin panel, click “Animate Selection
  5. In “Keyframe1” drag the coffee content upwards
  6. This will create an animation timeline (blue band), extend its duration
  7. Play with the Cubic Bezier easing function graph
  8. Click “Export Code”
This is how to export code to HTML/JS/CSS
Design to code, automated.

As always, we’re excited to hear your feedback!



A collection of articles, tips, tutorials, and stories on UI, UX and web design and prototyping with Sketch and beyond

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store