Home / animate / api / options / extend

extend

DefaultType
ASTRO_ESCAPED_LEFT_CURLY_BRACKET}KeyframeEffectOptions

The properties of the extend animation option are computed and can use TypeCallback, they are a way to access features that haven’t been implemented in @okikio/animate, for example, iterationStart.

extend is supposed to future proof the library if new features are added to the Web Animation API that you want to use, but that has not been implemented yet.

Note: it doesn’t allow for declaring actual animation keyframes; it’s just for animation timing options, and it overrides all other animation timing options that accomplish the same goal, e.g. loop & iterations, if iterations is a property of extend then iterations will override loop.

Warning: extend itself cannont be computed, so, it doesn’t support TypeCallback.

animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    target: ".div",
    opacity: [0, 1],
    loop: 5,
    extend: ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        iterationStart: 0.5,
        // etc...
        fill: "both", // This overrides fillMode
        iteration: 2, // This overrides loop
        composite: "add"
    }
});