Home / animate / api / options / delay

delay

DefaultType
0Number | TypeCallback

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.

// First element starts fading out after 1s, second element after 2s, etc.
animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    target: ".div",
    easing: "linear",
    delay: 5,
    // or
    delay: (index) => (index + 1) * 1000,
    opacity: [1, 0],
});