How To: Using animate.css in Sage

sage
1

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>
9 Likes
2

Thanks for this, @MWDelaney! Question for you: autoloading like that is new to me - are there pros/cons to doing it that way vs putting the import line into main.scss?

3

Nah, I just know that I’ll never need to look at that line again, so I keep it out of main.scss which I actually edit on occasion.

1 Like
4

I suggest to put this in the documentation as the hamburger tutorial :wink:

5

9 posts were split to a new topic: Build debugging

6

The Animate.css syntax in this article is deprecated. Ever since Animate.css v4.0.0 you must include the prefix animate__ with your Animate.css classes.

So the correct example would be:

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

Cheers!

1 Like