Animation options control how an animation is produced, it shouldn’t be too different for those who have used
jquery’s animate method.
An animation option is an object with keys and values that are computed and passed to the
Animate class to create animations that match the specified options.
The default options are:
export const DefaultAnimationOptions: AnimationOptions = ASTRO_ESCAPED_LEFT_CURLY_BRACKET keyframes: , loop: 1, // iterations: number, delay: 0, speed: 1, endDelay: 0, easing: "ease", autoplay: true, duration: 1000, persist: true, fillMode: "none", direction: "normal", padEndDelay: true, extend: ASTRO_ESCAPED_LEFT_CURLY_BRACKET} };
The options themselves are,
Determines the DOM elements to animate. You can pass it a CSS selector, DOM elements, or an Array of DOM Elements and/or CSS Selectors.
Determines the acceleration curve of your animation. Based on the easings of easings.net.
Determines the duration of your animation in milliseconds. By passing it a callback, you can define a different duration for each element. The callback takes the index of each element, the target dom element, and the total number of target elements as its argument and returns a number.
Determines the delay of your animation in milliseconds. By passing it a callback, you can define a different delay for each element. The callback takes the index of each element, the target dom element, and the total number of target elements as its argument and returns a number.
Adds an offset ammount to the
delay, for creating a timeline similar to
Similar to delay but it indicates the number of milliseconds to delay after the full animation has played not before.
This ensures all
animations match up to the total duration, and don’t finish too early, if animations finish too early when the
.play() method is called specific animations that are finished will restart while the rest of the animations will continue playing.
Determines if the animation should repeat, and how many times it should repeat.
Occurs when the animation for one of the targets completes, meaning when animating many targets that finish at different times this will run multiple times. The arguments it takes is slightly different from the rest of the animation options.
Occurs when the animation for one of the targets is cancelled, meaning when animating many targets that are cancelled at different times this will run multiple times. The arguments it takes is slightly different from the rest of the animation options.
Determines if the animation should automatically play immediately after being instantiated.
Determines the direction of the animation.
Determines the animation playback rate. Useful in the authoring process to speed up some parts of a long sequence (value above 1) or slow down a specific animation to observe it (value between 0 to 1).
Defines how an element should look after the animation.
Persists animation state, so, when an animation is complete it keeps said finished animation state. Think of it more like a less strict version of fillMode, it was inspired by motion one.
Another way to input options for an animation, it’s also used to chain animations.
Contols the starting point of certain parts of an animation.
Represents the timeline of animation. It exists to pass timeline features to Animations (default is DocumentTimeline).
Allows you to manually set keyframes using a
composite property of a
KeyframeEffect resolves how an element’s animation impacts its underlying property values.
The properties of the
extend animation option are not interperted or computed, they are given directly to the
Web Animation API, as way to access features that haven’t been implemented in
@okikio/animate, for example,