Tween

An easy to use tweening class. Any number can be tweened from one value to another over a set period of time. The class will handle the tweening, you do the rest!

Installation

npm i @meteora-digital/tween
yarn add @meteora-digital/tween

Usage

HTML

<section class="banner">
  <div class="banner__image" style="background-image: url('path/to/your/image.jpg');"></div>
</section>

JavaScript

import Tween from '@meteora-digital/tween';

const banner = document.querySelector('.banner');
const image = document.querySelector('.banner__image');

Create a controller!

const Controller = new Tween({
  fps: 60,
});

| Option | Type | Description | Default | |--------|------|-------------|---------| | fps | number | the frame rate for the tween | 60 |

Tweening - smoothly animate a number from one value to another.

Controller.tween({ from: 0, to: 100 }, (value) => image.style.opacity = value / 100, 300);

The tween method will load the controller with a new task, it can currently only have one task at a time. the tween() method takes 3 arguments:

| Type | Description | Defaults | |------|-------------|----------| | object | Two keys - "from" and "to" | from: 0, to: 100 | | function | A function that returns the current value | (value) => console.log(value); | | duration | A length of time in milliseconds | 300 |

Note this function uses rounding to stop the function from looping continuously without any visual changes, therefore is is best to use whole numbers for situations like the example above.

Stopping the tween

Controller.stop();

If we ever need to stop the animation we can use the stop() method

Restarting the tween

Controller.start();

If we have stopped the animation we can restart it using the start() method

Callbacks

The available callbacks are 'start', 'stop' and 'end'.

| Event | Description | |------|-------------| | start | Triggered when the animation starts | | stop | Triggered when the animation is stopped via the .stop() method | | end | Triggered when the animation has come to it's end naturally |

Controller.on('start', () => console.log('Animation has started!'));

If we have stopped the animation we can restart it using the start() method

License

MIT