Animate.scss

I find myself in many situations where writing CSS animations becomes a major pain in the ass. The syntax is long, the math is confusing, and browser support is all over the map.

That’s why I was super excited to find Dan Eden’s Animate.css a couple of years ago. It packages up a metric ton of animations and simplifies what is traditionally a complicated process.

But Animate.css has its limitations. For one, it’s a massive library that will add another 56kb to your stylesheets. Sure, you can download a custom build to bring that down, but then it’s a pain to go back in and add back animations later if you want them. Secondly, it’s vanilla CSS. I’ve made the full transition to SASS and having to maintain both feels like a burden.

Introducing Animate.scss

That’s why I created Animate.scss. This is the exact same library of animations included in Animate.css but ported for SASS.

Download on Github →

Yes, there are other SASS ports of Animate out there. A simple search on Google will bring up at least a dozen. I just couldn’t find one that was as easy or flexible as I wanted it to be. In other words, I wanted something that could give me as few or as many as the animations as needed for my projects while allowing me to apply my animations with a simple mixin.

Installing Animate.scss

There are no dependencies to use Animate.scss. If you are already set up to use SASS on your project, then this will fit right in.

The simplest way to get started is to drop the Animate directory into your project where your other SASS files are located. Then, @import the library in your master stylesheet.

@import "animate.scss";

That will give you the full library of animations. If you want to pick and choose the animations that get imported into your project, then comment out the ones you don’t need in the animate.scss file.

// Import the animations
@import 
  // "_attention/attention.scss", // This will not import
  "_bouncing-entrances/bouncing-entrances.scss",
  "_bouncing-exits/bouncing-exits.scss",
  "_fading-entrances/fading-entrances.scss",
  "_fading-exits/fading-exits.scss",
  "_flippers/flippers.scss",
  "_lightspeed/lightspeed.scss",
  "_rotating-entrances/rotating-entrances.scss",
  "_rotating-exits/rotating-exits.scss",
  "_specials/specials.scss";

Want to import specific animations rather than full sets? Comment out everything in animate.scss and use @import to pull in the exact ones you need.

// Import specific animations
@import "_attention/bounce.scss";

Using Animations

Now that Animate.scss is all hooked up into your project, let’s start using some animations. Each animation is a SASS mixin, so you can apply them directly to your own class names.

.your-class-name {
  @include bounceIn();
}

Furthermore, the mixin offers some variables you can use to customize the animation.

.your-class-name {
  @include bounceIn(
    $duration: 1s,
    $delay: .2s,
    $function: ease, 
    $fill-mode: both
  );
}

Get Animate.scss

Animate.scss is available on Github. It’s not something I plan on actively maintaining, but am definitely open to contributions. Please submit a pull request if you have ideas to make this a better resource.

Download on Github →