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