Keyframe
A simple tiny keyframe utility for custom animation.
Install
npm install --save keyframe
or
yarn add keyframe
Usage
Pass an object witch every key is the keyframe from 0
to 100
.
Each keyframe is a function that will be called during the keyframe interval. Each passed function is cached and runs only once when the value is the same.
And will return a function to run through the keyframes progress.
const run = ; ; // 0; // 0.5; // 1; // 0.5; // 1
Example
; ... const moveTo = { divstyletransform = `translate(px, px)`;}; // From (0% -> 50%) move the div left 150px// then from (50% -> 100%) move the div up 50px.const onSliderUpdate = ; // Return range between 0 and 1.DOMslider;
Check the examples/
folder to see full examples.
Or check out the DEMO page
Development
yarn install
yarn run dev
Test
yarn test