aeon.js

js animation engine | aeonjs.dev

aeon.js is a lightweight, performance-oriented JavaScript animation library following the Anime.js API. It works with CSS properties, SVG, DOM attributes and JavaScript Objects.

Getting started | Documentation | Demos and examples | Browser support | What's Change

Getting started

Download

Via npm

$ npm install aeonjs --save

Usage

import { aeon } from 'aeonjs';

Hello world

aeon({
  targets: 'div',
  translateX: 250,
  rotate: '1turn',
  backgroundColor: '#FFF',
  duration: 800
});

Documentation

• Targets
• Properties
• Property parameters
• Animation parameters
• Values
• Keyframes
• Staggering
• Timeline
• Controls
• Callbacks and promises
• SVG Animations
• Easing functions
• Helpers

Demos and examples

• aeonjs.dev
• weareimmutable.com
• anime: CodePen demos and examples
• anime: Moving letters by @tobiasahlin
• anime: Gradient topography animation by @crnacura
• anime: Organic shape animations by @crnacura
• anime: Pieces slider by @lmgonzalves
• anime: Staggering animations
• anime: Easings animations
• anime: Sphere animation
• anime: Layered animations
• anime: anime.js logo animation

Browser support

| Chrome | Safari | Edge | Firefox | Opera | | --- | --- | --- | --- | --- | | 107+ | 16+ | 107+ | 106+ | 92+ |

Changes

This library was created to address specific issues with anime.js:

• rewritten in typescript
• incompatibilty with Server Side Rendering
• seek to 0 or to initial state did not set initial state or fire updates, causing desync issues
• the requestAnimationFrame loop wasn't exposable to sync with other calls
• object mutations were deoptimizing several key processes in Safari, causing slowdowns and hiccups
• reduce loops were causing general deoptimizing in all browsers, seemingly randomly. these reduces were to perform array flattening (now replaced with .flat()) and sorting and have been replaced or removed
• functional loops (e.g. forEach), though nice, were creating deep functions-in-loops. these have been addressed where possible to avoid function creation and reduce spikes in memory/garbage collection
• initialization of many animations was very slow. the central anime call and other encapsulations have been turned into pure functions and/or classes
• substituted Map & Set where possible to reduce loop work-arounds/indexOf/includes checks
• heavier parts of the library can now be tree shaked when not imported/used

Website | Documentation | MIT License | © 2022 Immutable.