Global

Methods

paprika-tween/sweet(options) → {Promise}

The function sweet() creates a tween animation that will run for the given duration, interpolating the given properties from start to end by using an easing function.
sweet() returns a thenable object which can be chained with the method then() or awaited with the keyword await to create animations.
Since:
  • 1.0.0
Source:
Parameters:
Name Type Description
options Object
Name Type Attributes Description
duration number The duration of the interpolation. The time scale should be the same as the starting time and the frame() time.
delay number <optional>
 The delay time to start the interpolation.
from Object An object with key/value pairs of numeric properties to interpolate from.
to Object An object with the numeric properties to interpolate to.
easing function <optional>
 The easing function with which calculate the value of the property at a given time. You can use your custom function or a function available at paprika-tween/easing. Default is Linear.None.
render function A callback function that will be called after each render. It receives two arguments: the first being the amount of interpolation applied from 0 to 1, and the second an object with the properties interpolated for the given time.
onEnd function <optional>
 Function called when the interpolation reaches the end. It receive an argument as an object with the properties interpolated to its end values.
Returns:
Type:
Promise
- A Promise that is resolved with two arguments: a sweetie() function to continue with animation, and the Sweetie instance which properties are interpolated.
Example
import { sweet } from 'paprika-tween';
const { sweetie, spice } = await sweet({
    duration: 500,
    from: { size: 0 },
    to:   { size: 10 }
    render: ({ size }) => {
        obj.style.borderWidth = `${size}px`;
    }
});
await sweetie({
    duration: 1000,
    to:   { size: 20 }
});
await sweetie({
    to: { size: 1 }
});
await sweetie({
    delay: 50,
    to: { size: 100 }
});