Customizing Animate.CSS

Don't get me wrong, I love animate.css. This library makes it so simple to add animation to just about everything. But as I'm a performance concerned developer, I did not want to load the whole stylesheet.

Sometimes I wonder if I'm a regular front-end developer. I always end up focusing on performance and reducing page load time.

I know that the minified animate.css stylesheet weights only 52kb at the time of this writing. But for a project, I only needed 4 fading animations. And I don't know about you, but I feel bad about including a library while I'll only a fraction of this library.

SASS to the rescue!

As the website is built using SASS, I checked if someone ported the library to SASS. There's quite a few repositories on Github. I picked the one the one from Geoff Graham which seemed pretty well maintained. Let's get started and build our own custom animate.css.

First install or download the library. I much prefer using Bower:

bower install animatewithsass

Once bower has downloaded the dependency, open your SASS stylesheet. I'm going to import only the animations that I need for this project:

// Import the animations
@import
	// Properties is always required
	"bower_components/animatewithsass/_properties",

	// Import only the 4 animations we need
	"bower_components/animatewithsass/_fading-entrances/_fadeIn",
	"bower_components/animatewithsass/_fading-entrances/_fadeInLeft",
	"bower_components/animatewithsass/_fading-entrances/_fadeInRight",
	"bower_components/animatewithsass/_fading-entrances/_fadeInDown";

	// Now let's create the actual classes
	.fadeIn {
		@include fadeIn();
	}
	.fadeInLeft {
		@include fadeInLeft();
	}
	.fadeInRight {
		@include fadeInRight();
	}
	.fadeInDown {
		@include fadeInDown();
	}

That's it.

Now I can use those animations by simply adding animated fadeIn (or animated fadeInLeft) to any DOM element. In this specific project, I'm using WOW.js to reveal CSS animation as the user scrolls down the website.