How to Use Animate.css in Sage

I end up using Animate.css a lot more often than I ever thought I would, so here’s how to include it in your Sage 9-based project. This is really simple, but I want to start writing more of these, and this was an easy starting point.


yarn add animate.css

Autoload in Sage

Create a new file at resources/assets/styles/autoload/_animate.scss with the following content:

@import "~animate.css/animate.css";

Add animate.css classes to your markup!

Here’s an example making Page h1s fade in while sliding up:

<div class="page-header">
  <h1 class="animated fadeInUp">{!! App::title() !!}</h1>

Join the discussion on Roots Discourse

Help support our open-source development efforts

Help us grow

Join over 7,800+ subscribers on our newsletter to get the latest Roots updates, along with occasional tips on building better WordPress sites.

Looking for WordPress plugin recommendations, the newest modern WordPress projects, and general web development tips and articles?

“Easily the best WordPress email I get.” Colin OBrien

Follow us on Twitter @rootswp

Ready to checkout?