cudeAnimations.js
cudeAnimations is a lightweight simple JavaScript library that can be used to create custom animations.
The minified library weights 8kb before gzip. It relies on a promise polyfill, so if your project doesn't include that beforehand, you can use cudeAnimations.withpoly.min.js instead of cudeAnimations.min.js.
When using the polyfied version, cudeAnimations.js supports all browsers.
Try the demos
Installation
Simply include the cudeAnimations.min.js
file from the dist folder in your project or install via npm using the package name cude-animations
.
After including the file the classes are available through the global variable cudeAnimations
.
If using ES6 modules, the library exports the following modules:
ScrollAnimator
(Class) - not documented yetAnimate
(Class)
Animate usage:
When instantiating a new animation, an options paramter is expected. The options parameter is an object containing the following parameters:
start
= {number} The value to start the animation from.end
= {number} The value to end the animation at.duration
= {number} (optional) duration of the animation in ms. Default: 250.reverse
= {boolean} (optional) If true animates from end to start value. Default: false.customEasing
= {(t:number, b:number, c:number, d:number)=>void} (option). Default: easings.easeInOutExpo. See section below about custom easing functions.target
= {string} query of html elements. Needs to be specified if the manipulator is not specified. When used, the library will replace the inneHTML of the elements with the value (rounded to 0 decimals).manipulator
= {(value:number, end:boolean)=>void} Is called once for each keyframe, needs to be specified if the target is not specified. The manipulator is the recommended way of controlling animation. Keep this function as efficient as possible, as it may be called often.
Example using target:
var options = target: ".animate-this-element" start: 0 end: 100 duration: 1000var animation = optionsanimationstart
Same example using manipulator:
// Find the element manually. // Don't do this inside the manipulator functionvar element = document // Keep this function as efficient as possible, as it may be called many times{ elementinnerHTML = val} var options = manipulator: manipulator start: 0 end: 100 duration: 1000 var animation = optionsanimationstart
The start() method returns a Promise that is resolved once the animation is finished. This can be used to easily create chained animations.
Example of chained animation:
var options = target: ".animate-this-element" start: 0 end: 100 duration: 1000 var options2 = target: ".animate-this-element-after" start: 0 end: 100 duration: 1000 var animation = optionsvar animation2 = options2 animation start
Custom easing:
You can optionally apply your custom easing function, which will receive 4 parameters necessary to calculate a Bezier curve:
t
(the current time);b
(the beginning value);c
(the difference between the beginning and destination value);d
(the total time of the tween).
You could use any of Robert Penner's easing functions.
If you don't specify a custom easing function, the default is easeInOutExpo
.
Example:
const linear = { return c * t / d + b;} const options = target: ".mySelector" customEasing: linear start: 0 end: 100 duration: 1000 optionsstart
Scroll Animation:
This library also contains methods for controlling the animatino using scroll, instead of a duration.
Still needs to be documented. See scrollAnimation
for example.