1.0.4 • Published 2 months ago
@meteora-digital/tween v1.0.4
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/tweenUsage
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