Skip to content
A minimal, super lightweight (3KB minimized and gzipped), zero dependency, JavaScript animation library.
JavaScript Vue
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
docs
src
.eslintrc.js
.gitignore
babel.config.js
package-lock.json
package.json
readme.md
webpack.config.js

readme.md

A minimal, super lightweight (3KB minimized and gzipped), zero dependency, JavaScript animation library.

Installation

npm install animol --save

Basic usage

import * as animol from 'animol';

const myElement = document.getElementById('my-element');

animol.css(
  myElement, // DOM element
  2000, // Duration
  { marginLeft: '0px', backgroundColor: '#FF0000' }, // From
  { marginLeft: '200px', backgroundColor: '#00FF00' }, // To
  animol.Easing.easeInOutCubic, // Easing function
  1000 // Delay
);

Documentation

Go to Documentation

Motivation

Animol is intended to be super lightweight, ease to use and performant. It abstracts the repetitive logic for calling requestAnimationFrame, easing, and parsing CSS strings.

It's ideal for small projects where you want to do some JavaScript animations without reinventing the wheel, and you don't want to import a large library.

For advanced use cases involving timelines, svg, etc. check out Greensock or Anime.js.

Browser Compatibility

Compatible with all modern browsers and IE 10+.

You can’t perform that action at this time.