aos-animations

Some nice animations to use with AOS.

Usage no npm install needed!

<script type="module">
  import aosAnimations from 'https://cdn.skypack.dev/aos-animations';
</script>

README

AOS-Animations 🦄

Some nice animations to use with AOS.

How to use

  1. Install AOS following their instructions (https://github.com/michalsnik/aos).

  2. Install our package with:

yarn add aos-animations or npm i --save aos-animations

  1. Add css and js files to your html file:

<link rel="stylesheet" href="node_modules/aos-animations/dist/animations.min.css">

...

<script src="node_modules/aos-animations/dist/animations.min.js"></script>

or import to your js file:


import 'aos-animations/dist/animations.min.css';
import 'aos-animations/dist/animations.min.js';
  1. Start using!

Example usage:

You will need to add the data-aos attribute to the element you want to animate and then specify the animation you would like to use. Our animations support all the configurations you can do with AOS such as changing delay, easing and duration (more here).

Example:


<div data-aos="tr-lr">Revealing text from left to right!</div>

Example with some tweekings:


<div 
  data-aos="tr-lr"
  data-aos-offset="200"
  data-aos-delay="50"
  data-aos-duration="1000"
  data-aos-easing="ease-in-out"
>Revealing text from left to right!</div>

Animations:

Animation data-aos
Text reveal from left to right tr-lr
Text reveal from bottom to top tr-bt
Text reveal from top to bottom tr-tb
Fade in fi
Fade in up fi-u
Fade in down fi-d
Fade in left fi-l
Fade in right fi-r