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 ๐