Package Exports

aoejs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (aoejs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.

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

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.

aoejs