brunnolou / keyframe

A simple keyframe utility for custom animation

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 = keyframe({
  50: (d) => update(d),
  100: (d) => update(d),
});

run(0);    // 0
run(0.25); // 0.5
run(0.5);  // 1
run(0.75); // 0.5
run(1);    // 1

Example

import keyframe from 'keyframe';

...

const moveTo = (x, y) => {
  div.style.transform = `translate(${x}px, ${y}px)`;
};

// From (0% -> 50%) move the div left 150px
// then from (50% -> 100%) move the div up 50px.
const onSliderUpdate = keyframe({
  // d is the duration between 0% -> 50%.
  50: d => moveTo(d * 150, 0),

  // d is the duration between 50% -> 100%.
  100: d => moveTo(150, d * -50),
});

// Return range between 0 and 1.
DOMslider.addEventListener('input', () => onSliderUpdate(slider.value / 100), true);

Check the examples/ folder to see full examples.

Or check out the DEMO page

Development

yarn install

yarn run dev

Test

yarn test