Animation

Setup custom animations for your app.

Modify animations

You can modify the current animations by changing the animations property or by using the keyframes property.

module.exports = {
    ...,
    content: [
        "./node_modules/@andore-ui/**/*.{js,ts,jsx,tsx}",
    ],
    plugins: [
        require('@andore-ui/theme')({
            theme: {
                animations: {
                    "accordion-open": `accordion-open 0.3s ease-in-out`,
                }
                keyframes: {
                    "accordion-open": {
                        from: {height: "0"},
                        to: {height: "var(--radix-accordion-content-height)"},
                    },
                }
            }
        }),
    ],
};

How does it work?

The animations property is used to define the animation name and the duration of the animation. The keyframes property is used to define the animation keyframes.

For example, let's modify the animation of this component:

Animation tokens

The following table lists the available animation tokens:

Animation timing tokens

The timing of the animations described above are controlled by the transitionTimingFunction property. The following table lists the available timing tokens:

Note: All the timing described above are the default values defined in Material Design system.

Animation duration tokens

The theme also provides a set of predefined duration tokens that can be used to define the duration of the animations. The following table lists the available duration tokens defined in the transitionDuration property: