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:

importfxfrom'@ryanmorr/fx';awaitfx('#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:

functionbounceIn(t){if(t<1/2.75){return7.5625*t*t;}elseif(t<2/2.75){return7.5625*(t-=1.5/2.75)*t+0.75;}elseif(t<2.5/2.75){return7.5625*(t-=2.25/2.75)*t+0.9375;}else{return7.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.