# vanilla-animation.js #
[](https://opensource.org/licenses/MIT)
[](http://www.typescriptlang.org/)
[](https://socket.dev/npm/package/vanilla-animation)
[](https://www.jsdelivr.com/package/npm/vanilla-animation)
[](https://www.npmjs.com/package/vanilla-animation)
[](https://www.npmjs.com/package/vanilla-animation)
[](https://yarnpkg.com/package?name=vanilla-animation)
[Demo](#demo) - [Features](#features) - [Install](#install) - [Usage](#usage) - [Options](#options) - [Data API](#data-api) - [Changelog](#changelog) - [License](#license)
## *Inspired by:* AOS and WOW
> *Vanilla Animation:* super light lib for reveal CSS animation as you scroll down a page.
### Demo
See the [vanilla-animation.js demo](https://codepen.io/mitera/pen/azOdmrv).
### Features
- reveal CSS animation as you scroll down a page
- by default, you can use it to trigger [animate.css](https://animate.style) animations. But you can easily change the settings to your favorite animation library.
- anywhere on the page and anywhere in the DOM
- tested in Edge, Chrome, Firefox
### Install
CDN via jsDelivr
Download [vanilla-animation.js](https://github.com/mitera/vanilla-animation/blob/master/vanilla-animation.js) and include the script in your HTML file:
You can also install using the package managers [NPM](https://www.npmjs.com/package/vanilla-animation).
npm install vanilla-animation
modular code
import VanillaAnimation from 'vanilla-animation'
### Usage
Add styles in ``:
Add script right before closing `` tag, and initialize it:
Set css animation on `data-vanimation` or directly on `class` attribute:
test1
For compatibility with `wow`, add `vanimation` on `class` attribute and you can use `animate__` animation directly on classes:
test2
And adjust behaviour by using `data-vanimation-*` attributes:
test3
### Options
The default `options` are:
{
boxClass: '.vanimation, [data-vanimation]',
animatePrefix: 'animate__',
animateClass: 'animate__animated',
offset: 0,
mobile: true,
live: true,
scrollContainer: null,
callback: null
}
Where:
- `boxClass` is a string that containing the selector classes. This string must be a valid CSS selector string
- `animatePrefix` is a string that indicated the prefix of animation if not using data-animation attribute.
- `animateClass` is a string that indicated the end of animation.
- `offset` is the offset in pixels from the bottom of the viewport when the animation should start
- `mobile` is `true` or `false` to enable mobile detection
- `live` is `true` or `false` to enable live detection
- `scrollContainer` is an optional element to use instead of the window
- `callback` is a callback function that is called when the animation is completed
```
new VanillaAnimation({
callback: function(el) {
el.classList.add("vanimation-active");
}
});
```
### Data API
- `data-vanimation="animate__fadeIn"` is the animation class name
- `data-vanimation-offset="200"` is the offset in pixels from the bottom of the viewport when the animation should start
- `data-vanimation-delay="0.5s"` is animation delay time is seconds or milliseconds
- `data-vanimation-duration="500ms"` is animation duration time is seconds or milliseconds
- `data-vanimation-iteration="5"` is the animation iteration count
- `data-vanimation-reload="true"` set to true to reload the animation on scroll
### Known limitations
#### CSS transitions and animations on mobile device
Chrome on Android requires that you set "minimum-scale=1" in the "viewport" meta of your page.
Not doing so causes the scrollY value to start increasing only after a good portion of the page is already scrolled
### Changelog
To see what's new or changed in the latest version, see the [changelog](https://github.com/mitera/vanilla-animation/blob/master/CHANGELOG.md)
### License
vanilla-animation.js is licensed under [The MIT License (MIT)](http://opensource.org/licenses/MIT)
Copyright (c) 2025 Simone Miterangelis
This license is also supplied with the release and source code.
As stated in the license, absolutely no warranty is provided.