CSS Animations inside of Sketch with Sketch2React

Since the release of our Code App you now have the possibility to add custom CSS plugins that are stored locally on your computer.

This is, without doubt, the single most powerful addition (yet) to our framework since the very beginning. Why? Let me explain.

With your own custom made CSS plugins you expand your Sketch design files with things that

1. We haven’t added yet or
2. Are not even possible to do within our framework without thousands of hours of more work — and who needs more work? Not us ?

Like CSS animations for example. Or CSS effects.

Simple Demo

Click above to check out the power of using CSS plugins straight from inside of Sketch.

Create transitions between everything really

With very simple code you can create really neat transitions between pages, animate elements, fade in whole blocks of content, create mock-up side menus, mega menus, modals. Sky is the limit.

Or CSS is the limit actually but you can do a lot of cool stuff that is well supported nowadays. Just check Can I Use from time to time to be sure.

Combine our method for Quick Responsive Prototyping with this and you have yourself a very powerful (free) framework for HTML5 prototyping directly inside of Sketch. ????

Add, not subtract to your hand-off workflow

We see our framework as a compliment to all the excellent tools that are already out there. Keep using them, they are superb and we will never ever be able to compete with them. Heck we don’t even want that!

There is no number one solution to the “tool problem”. You as a designer, need an arsenal of tools and frameworks to do your job.

With Sketch2React you actually work with code that your developers can just copy+paste onto their own. Got that transition juuuuuust right after some tweaking in the CSS with things like timing, delays etc? No worries, just send them your custom.css file together with your Sketch2React prototype, in code or just send them your .sketchfile, it’s really up to you.

Boom! ? ?‍?

That is why we are soooo excited about this.

Preparations before we start

Consider using a more visual code editor like for example Espresso. I love the gentle UI it has, it really is very visual and helpful. It’s included in the amazing service Setapp.

Who loves visuals more than anyone? Designers of course! Another great editor for Mac is also Coda.

Both apps have CSS overriding which is really great for users of Sketch2React since we don’t support all of Bootstrap 4’s components yet. Probably never will actually.

Get some basic code knowledge

If you have a basic understanding of HTML and CSS, you will feel right at home. If not there are plenty of great free resources out there. If you happen to have a Pluralsight account they have several great ones about all these topics. One course I really like is called HTML5 Animations made Easy with Animate.css by Jeff Batt.

Let’s look at a very short video first!

A very simple tutorial

Okey, let’s explain this with as few words as possible, remember we are designers here, visual people ? Explaining things easily is actually really hard so bear with me.

Step 1 — Create your custom CSS plugin

Create your custom CSS file in Espresso, Coda, Sublime Text or the totally free Visual Studio Code.

1. Open preferred code/text editor
2. Create new file
3. Start Googling for things like ”cool CSS effects” or/and ”easy CSS animations”. Anything with the word easy in it is usually great.
4. Copy+paste things that you want to play with
5. Save to HD & remember where you saved it ?

Here’s the same code that we used in our example video, we just changed the color to use one of our brand colors.

.blinky {
 border: 2px dashed #065EDF;
}

What this code does, is it adds a 2px dashed border to every component that we add the word .blinky in it’s [classname], an example is:

{col} xs:12 lg:6 [hcenter mt40 mb20 blinky]

Couple of things to notice

• When adding the word blinky we are adding to the code part, that’s why nothing happens inside of Sketch. To keep things 1:1 between what you see in code and in Sketch, you will need to manually draw a dashed border of 2px. Or not. It’s pretty cool to add these types of effects post design, directly in code.
• Notice that we take away the dot when writing it inside of Sketch. That is a general rule with all class names.

Yes we are coding! Great feel!

Okey just save this to your HD, we called it custom.css , you can call it whatever. Make sure to include .css in the filename.

Note: you can of course have several CSS rules in one .css file. This is obvious for a developer but it took me a few moments studying the code that Fredrik had written for this demo to understand this.

Adding another thingie to our custom.css

.blinky {
 border: 2px dashed #065EDF;
}

.y-offset-20 {
  margin: -80px;  
}

Here we added another css snippet, one that we called .y-offset-20.

Also, you can name these rules whatever you want. Also not super obvious for people who are not code-savvy.

This snippet offsets the margin with a negative of 80 pixels on whatever component we add it to.

Step 2 — Getting the correct file path

Now we are going to do something that really is going to make you feel like a proper hacker — open the Terminal! You know that weird app that you go into when things go south in OS X and you’re desperate? ?

There’s nothing that makes me feel like being inside an episode of then firing up the good old OS X Terminal app.

1. Take your custom.css file
2. Open up the Terminal App
3. Drag + drop the .css file onto it’s opened window
4. Copy the file path that starts with Users/yourname/etcetc and ends with .css
5. In Sketch — create a new text node (T)
6. Rename the text layer from Type Something to {externalasset.css} Important, the text layer not the text inside the text layer.

In the text file that now is on your artboard, write this: file:/// and copy+paste from your Terminal window the rest of the file path, ours ends with .css In my case the whole file path is: file:///Users/juanmaguid/Dropbox/Sketch2React/Assets/Sketch/CSS/custom.css

Step 3 — Let’s add some CSS animations!

I love animation and it’s actually thanks to learning apps like Keyshape and Haiku that I’ve moved much faster towards actually learning code. You can read more here if you’re interested in my personal journey.

I found this great article from 2016 just googling around, and from it, with a little help from Fredrik, I managed to come up with this code:

.bouncein {
    animation: bounceIn 1s;
  }
  @keyframes bounceIn {
    0% {
      transform: scale(0.1);
      opacity: 0;
    }
    60% {
      transform: scale(1.1);
      opacity: 1;
    }
    100% {
      transform: scale(1);
    }
  }

Inside Sketch, make sure to apply your class name (in our case it’s bouncein) to the object/element you want to animate. In our case, I’m applying it to the whole {container} that contains all of the text.

{container} [bouncein]

Let’s check it out our code app

If nothing has gone wrong you should see your animation work!

That’s it! Wow that was a lot to digest, I totally understand if your wasted by now. So take another cup of hot ☕ let this sink in before you dive right in again.

Say hello to Advanced Export ?

As of version 0.6.2 of our code app you now have something really really sweet called Advanced Export. Basically you add things to export and press the Download button and you get everything exported, custom CSS files included. One really big step from before is that you also get all of your images exported. If you have been using our framework since the start you know how it was before. Now you get all your files in a neat little zip automagically.

Also new is full support for CSS classnames that use both Uppercase and Lowercase characters, so go totally bananas with our new favorite animation library Animate.css ???

To celebrate we created a very simple demo Animate.css Sketch file, just go here and download it. It will show you how to set things up inside Sketch.

https://sketch2react.io/resources.php

---

Have a great one!

Juan from Team Sketch2React