@ryanmorr/fx
v1.0.0
Published
JavaScript animation library
Downloads
3
Maintainers
Readme
fx
JavaScript animation library
Install
Download the CJS, ESM, UMD versions or install via NPM:
npm install @ryanmorr/fx
Usage
Provide an element, nodelist, or selector string and an object that maps CSS properties to a value that the property will be animated to. It returns a promise that is resolved when the animation is complete:
import fx from '@ryanmorr/fx';
await fx('#foo', {
width: 100,
height: 200
});
Optionally specify the duration in milliseconds (defaults to 1000):
fx(element, {
width: 100,
duration: 500
});
Optionally provide an easing method as a string, supporting "linear", "ease-in", "ease-out", and the default "ease-in-out":
fx(element, {
opacity: 0,
easing: 'ease-in'
});
Define a starting value for the animation by using an array, with the start value at the first index and the end value at the last index:
fx(element, {
width: [100, 500]
});
Add units to the value to override the default "px" used by most properties:
fx(element, {
height: '5em'
});
Supports 2D transforms:
fx(element, {
translateX: 100,
translateY: 100,
scaleX: 2,
scaleY: 2,
rotate: 45
});
Supports colors as hex or RGB:
fx(element, {
color: '#0000FF',
backgroundColor: 'rgb(255, 0, 0)'
});
Supports custom properties:
fx(element, {
'--value': 100
});
Supports scrolling:
fx(element, {
scrollTop: 100,
scrollLeft: 100
});
Supports motion path:
fx(element, {
offsetDistance: '100%'
});
Supports a custom easing function:
function bounceIn(t) {
if (t < 1 / 2.75) {
return 7.5625 * t * t;
} else if (t < 2 / 2.75) {
return 7.5625 * (t -= 1.5 / 2.75) * t + 0.75;
} else if (t < 2.5 / 2.75) {
return 7.5625 * (t -= 2.25 / 2.75) * t + 0.9375;
} else {
return 7.5625 * (t -= 2.625 / 2.75) * t + 0.984375;
}
}
fx(element, {
translateX: 500,
easing: bounceIn
});
License
This project is dedicated to the public domain as described by the Unlicense.