• Sage

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.

Install

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:
resources/views/partials/page-header.blade.php

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

Join the discussion on Roots Discourse

Join over 5,600 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

Ready to checkout?