PandaCSS Animate is a preset for Panda CSS designed to facilitate the creation of elegant animations within your projects.

Install PandaCSS Animate via npm:

npm install -D pandacss-animate

Then, integrate the preset into your panda.config.ts file as follows:

import { defineConfig } from "@pandacss/dev";
import pandaAnimate from "pandacss-animate";

export default defineConfig({
  theme: {
    extend: {},
  },
  presets: [pandaAnimate],
});

The preset offers utilities to enter and exit animations.

Avaible utilities fadeIn, slideInY, slideInX, spinIn, zoomIn, to enter animations to elements.

Avaible utilities fadeOut, slideOutY, slideOutX, spinOut, zoomOut, to exit animations to elements.

The fade animations include fadeIn and fadeOut, utilizing opacity tokens.

import { css } from "../styled-system/css";

<button
  className={css({
    fadeIn: "10",
  })}
>
  A fade transition
</button>;

Slide animations include slideInX, slideOutX, slideInY, and slideOutY, using spacing tokens to determine direction and distance.

import { css } from "../styled-system/css";

<button
  className={css({
    // slide from bottom
    slideInY: "10",

    // slide from top
    slideInY: "-10",

    // slide from right
    slideInX: "10",

    // slide from left
    slideInX: "-10",
  })}
>
  A slide transition
</button>;

Spin animations include spinIn and spinOut, utilizing various degree values.

import { css } from "../styled-system/css";

<button
  className={css({
    spinIn: "45",
  })}
>
  A spin in transition
</button>;

Zoom animations consist of zoomIn and zoomOut, allowing for scaling effects.

import { css } from "../styled-system/css";

<button
  className={css({
    zoomIn: "45",
  })}
>
  A zoom in transition
</button>;

Modify the duration of animations using the duration utility.

import { css } from "../styled-system/css";

<button
  className={css({
    fadeIn: "10",
    duration: "500",
  })}
>
  A fade transition
</button>;

For custom values, consider utilizing strict tokes provided by Panda CSS.

This preset was inspired by tailwind-animate 🚀