Sketch2React
Published in

Sketch2React

How to add CSS animations with CSS Writer

Since the release of our new Sketch plugin for Marcode, App Builder, it has never ever been easier to build real code prototypes, or simple apps, straight from inside Sketch app.

Let me show you how easy it is to add a custom CSS animation using our CSS Writer plugin for Sketch combined with App Builder.

Let’s go!

AnimatiSS is nice! 😊
  1. Find a nice animation library, we’re going to use this one today.
  2. Find a enjoyable animation, I’m really fond of the Blur animations.
  1. Try out the animations by pressing the Play button on each one. You can also change the duration. When you found one you like, just copy the code to clipboard.
Easy peasy ✅
  1. Open Sketch and our CSS Writer plugin.
  2. Select the artboard you want to add your animation, we choose Start.
  3. Paste the animation into CSS Writer and make sure to Save inside the plugin, that big blue button needs to be pressed or nothing will get added.
CSS Writer is an excellent addition for Marcode
  1. Select the component you would like to add your CSS animation into. Open App Builder plugin and add blur-in to the CSS Classnames field.
  1. Open up Marcode and link to the very same Sketch file you are building with. A rapid way of reloading the animations is to switch between the Design and HTML view icons up in the top-right corner of Marcode.
  2. Voilà, you are done!

Marcode for Mac bundle

Now that you have learned how easy it is to use our new plugins for Marcode and Sketch, we have a very nice bundle where you get CSS Writer 100% for free.

Neato.

--

--

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