Animate On entrance (AOE) is a lightweight, dependency free, insanely fast scroll animation library built on top of Intersection Observer API.

Combined with many Included CSS3 animations AOE aims to provice the fastest possible solution for animating elements as they appear in users viewport.

• Overview
  • Table of Contents
  • View the demo
• Install - As npm package - Standalone
• Options
• Usage
• Animations
• License

Make sure to include aoe.css

<link rel="stylesheet" href="dist/aoe.css">

npm i aoejs

import Aoe from 'aoejs';

const aoe = new Aoe();
aoe.init();

<script src="dist/aoe-standalone.js"></script>

const aoe = new Aoe();
aoe.init();

You can set options during initialization:

aoe.init({
    speed: 1000,
    delay: 100,
	once: false,
	shift: '20px'
});

Add data-aoe attribute to your desired HTML elements.

<div data-aoe="popIn"></div>

With AOE you can easily affect animation speed and delay on individual items. Simply set proper data attribute:

<div data-aoe-delay="300" data-aoe-speed="100"></div>

AOE ships with many fancy CSS3 animations

• swoopInTop
• swoopInBottom
• swoopInLeft
• swoopInRight
• popIn
• popInTop
• popInBottom
• popInLeft
• popInRight
• hitLeft
• hitRight
• fadeIn
• fadeInTop
• fadeInBottom
• fadeInLeft
• fadeInRight
• jumpInLeft
• jumpInRight
• driveInTop
• driveInBottom
• driveInLeft
• driveInRight
• ball
• pull
• pullLeft
• pullRight
• unfold
• spinIn
• flipInX
• flipInY
• rollIn

With AOE you can easily add your own, custom animations.

<div data-aoe="CustomAnimation"></div>

.CustomAnimation {
    animation-name: animation;
}

@keyframes animation {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

Note: You probably gonna need overflow-x: hidden on body / main

Note: Intersection Observer API does not work on older browsers! Make sure to:

• check browser compatibility table
• and use a polyfill if you need one

Aoe should fallback to simple fadeIn animation if browser doesn't support it.

Created by Michał Gwóźdź. Released under the ISC License.