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 h1
s 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