aoejs

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

Usage no npm install needed!

<script type="module">
  import aoejs from 'https://cdn.skypack.dev/aoejs';
</script>

README

Overview

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.

Table of Contents

View the demo

Install

Make sure to include aoe.css

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

As npm package

npm i aoejs

import Aoe from 'aoejs';

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

Standalone

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

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

Options

You can set options during initialization:

aoe.init({
    speed: 1000,
    delay: 100,
    once: false,
    shift: '20px'
});
Property Type Description Default
speed Int Defines animation speed on all elements. eg. 1s null
delay Int Defines animation delay on all elements. eg. 200ms null
timing String Defines css timing function on all elements eg. ease-in null
shift String Shifs when element is going to be triggered. eg. 200px 0px
once Boolean Defines if element should be animated every time it enters viewport. true

Usage

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>

Animations

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:

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

License

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