Animate Vanilla JS
A tiny promise based animation function implemented in vanilla JavaScript.
- 👻 3kb (1kb gzipped)
- 📦 No dependencies
- 🌚 TypeScript support
- 🕺 Multiple built-in easings
- 🤝 Promise based
- ⚙ Uses requestAnimationFrame
- 🙅♂️ Cancelable
Demo
Installation
Module bundler (e.g. Webpack)
yarn add animate-vanilla-js
Script tag
Download animate-vanilla-js-browser.js
from the latest release here: https://github.com/phegman/animate-vanilla-js/releases
The animation function will then be usable via the global function animateVanillaJs()
Usage
Parameters
Parameter | Type | Description | Options |
---|---|---|---|
from |
number |
Starting animation value | N/A |
to |
number |
Ending animation value | N/A |
duration |
number |
Animation duration | N/A |
easing |
string || EasingFunction |
Easing | linear , easeInQuad , easeOutQuad , easeInOutQuad , easeInCubic , easeOutCubic , easeInOutCubic , easeInQuart , easeOutQuart , easeInOutQuart , easeInQuint , easeOutQuint , easeInOutQuint |
update |
Function |
Function with animation value passed as parameter | N/A |
Basic Usage
animate 0, // from 100, // to 500, // duration 'easeInOutQuad', // easing .then
Canceling animations
document.addEventListener'keydown', promise.then
Custom easing
animate 0, // from 100, // to 500, // durationc * t / d + b, // easing function .then
Custom Easing Function
Parameter | Type | Description |
---|---|---|
t |
number |
Current time |
b |
number |
Beginning value |
c |
number |
Change in value |
d |
number |
Duration |
Examples
height: auto
Animate to toggleButton.addEventListener'click',
Smooth Scroll
button.addEventListener'click',
Browser Support
IE / Edge |
Firefox |
Chrome |
Safari |
iOS Safari |
---|---|---|---|---|
IE11, > Edge 12 | > 23 | > 24 | > 6.1 | > 7.1 |
Development
Start development server with hot module reloading
yarn serve
Build project for production
yarn build