https://github.com/pitpik/animate
JS library converting extended css syntax to JS animations
https://github.com/pitpik/animate
Last synced: 2 months ago
JSON representation
JS library converting extended css syntax to JS animations
- Host: GitHub
- URL: https://github.com/pitpik/animate
- Owner: PitPik
- Created: 2018-08-28T12:31:08.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2020-05-02T10:22:25.000Z (about 6 years ago)
- Last Synced: 2025-03-22T03:14:21.026Z (about 1 year ago)
- Language: JavaScript
- Size: 5.86 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# What is animate
Animate is a little library that enables high performance animations/transitions in JS using a slightly modified CSS syntax. "slightly modified" means that you can use the known syntax that you would use in a CSS file with a little modification that enables transitions from start to end like' "height: 0px => 100px".
The values for the style are extended by an arrow followed by the desired end value. The arrow can be a fat arrow "=>" if the values should be rounded to an integer while rendering, or a regular arrow "->" if the values can be of type float.
Animation length, easing and various callbacks, together with the style settings, can be set when calling one of the animate methods "queue" or "animate".
## Example
```HTML
Click me!
const anim = new Animate({ speed: 1 });
const elm = document.querySelector('.animate');
elm.addEventListener('click', e => anim.animate(elm,
'position: absolute;' +
'left: 0px => 100px;' +
'top: 0px => 200px;' +
'opacity: .3 -> 1;' +
'transform: rotate(0deg => 360deg)'
));
```