Creates a value chase incorporating an ease and friction.
This module creates a chase between a provided value and target value. For example, if you had a dot follow every mouse click on a page, animating against the output of this module allows us to have the dot move to our current location gradually rather than immediately jumping to it. And if we move the mouse while it's traveling to its target, it will correct course smoothly.
User-defined friction, ease, and specificity (tolerance) requirements allow you to control how quickly and aggressively a value chases its target.
This module is a trait more than a class, and is meant to be augmented by other
modules such as
scroll-chase. It extends EventEmitter, and
broadcasts progress towards reaching its target.
Install via npm:
$ npm i value-chase
const ValueChase = ;const valueChase = ;valueChase;valueChasestart;window;
Methods that accept parameters always expect numeric values.
||Stops the module, removes all listeners, destroys its internal
||Starts the internal
||Stops the internal
||Whether or not the instance is currently stopped.|
||Immediately jump to the provided value and force a render.|
||This is how we pass a target value to the motion curve calculator. This is often what needs to be overwritten if you have coordinate or vector values to update.|
||Set friction used by calculator.|
||Set the specificity requirements necessary to indicate when value has reached target.|
This module emits
render events. All calculations and
measurements should occur on update, and the actual rendering of those
measurements within the DOM should occur on render.
For example, if we want to have an object slide horizontally as we scroll vertically, determining the x-axis transform based on a value should be done on update. Actually applying the transform via a style tag is done on render.
||Apply DOM transformations / animations|
||Calculate any necessary animation values|
Tests, Coverage, and Documentation
Tests, coverage reports, and documentation can be run / generated by calling
their appropriate npm script. See the
package.json for script names.