0.2.2 • Published 6 months ago
bewegung v0.2.2
Bewegung
An animation experiment of how far you can go with the FLIP technique to become an actual library.
API
Syntax
const callback = () => {
// change the dom however you like
};
const options = {
duration: 1000,
easing: "ease-in",
};
const animation = bewegung([callback, options]);
animation.play();
Parameters
[your change function here]
Single Callback: If you only need to provide a single animation callback with no specific options, you can simply pass the callback function as the props argument. Callback with Options: If you have specific options for your animation, you can either pass in a duration or an object containing. Callback Object: If you have specific options for your animation, you can either pass in a duration or an object containing.
The option
object can include these optional fields:
- duration: The animation runtime in ms. Defaults to
400
. - delay: The animation runtime in ms. Defaults to
0
. - endDelay: The animation runtime in ms. Defaults to
0
. - root: Defines the upper most parent element for the calculations, so the animation does not affect outside elements. Great for improving performance. Defaults to
body
. - easing: The animation curve / timing function of the animation. Defaults to
ease
. - at: An indication when the corresponding function should be called. Can be relative to the previous function or absolute in time
For full controll you can use a Callback Object
which allows you to set a from
and/or a to
callback. One of them is required.
- from: A callback which is executed before the first dom element change is recorded.
- to: This is the callback that is used in the other argument variants.
bewegung(callback);
bewegung(callback, 1000);
bewegung(callback, options);
bewegung(callbackObject);
bewegung([[callback1, options1], [callback2, options2], config]);
bewegung([callback1, 1000], callback2, callback3);
Config
This argument is an optional configuration object.
- defaultOptions with the default options you can specify options that will be true for all inputs (with still less specificity than the options object for each callback)
Methods
- play(): Starts the animation.
- pause(): Pauses the animation.
- seek(progress: number, done?: boolean): This method moves the animation to a specific point, which needs to be a number between 0-1. With the optional done boolean one can indicate whether the seeking action is finished. Can be used to make an animation scrollable
- cancel(): This method cancels the animation.
- finish(): This method finishes the animation.
- forceUpdate(index?: number | number[]): If you know the dom changed from another source (like a browser resize) this function will update either specific entries based on the index. If you dont provide an index, all entries will be recalculated
Properties
- finished: This is a promise that resolves when the animation has finished playing.
- playState: This is the current play state of the animation.