Home / animate / api / animation-options-as-methods

Animation Options & CSS Properties as Methods

All options & properties except target, targets, autoplay, extend, onfinish, and options can be represented by a method with the arguments (index: number, total: number, element: HTMLElement).

Note: the keyframes animation option can be a method.

/**
 * @param {number} [index] - index of each element
 * @param {number} [total] - total number of elements
 * @param {HTMLElement} [element] - the target element
 * @returns any
 */

// For example
animate(ASTRO_ESCAPED_LEFT_CURLY_BRACKET
    target: ".div",
    opacity(index, total, element) ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        console.log(element);
        return [0, (index + 1) / total];
    },
    duration(index, total) ASTRO_ESCAPED_LEFT_CURLY_BRACKET
        return 200 + (500 * (index + 1) / total);
    }
});