Animation Styles

Overview

Animation styles allow you to define reusable animation properties. The goal is to reduce the amount of code needed to animate components.

The supported animation styles are:

• Animation: animation composition, delay, direction, duration, fill mode, iteration count, name, play state, timing function

• Animation range: animation range, start, end, timeline

• Transform origin: transform origin

Defining animation styles

Animation styles are defined using the defineAnimationStyles function.

Here's an example of an animation style:

import { defineAnimationStyles } from "@pandacss/dev"

const animationStyles = defineAnimationStyles({
  bounceFadeIn: {
    value: {
      animationName: "bounce, fade-in",
      animationDuration: "1s",
      animationTimingFunction: "ease-in-out",
      animationIterationCount: "infinite",
    },
  },
})

Built-in animation styles

Cerberus provides a set of built-in animation styles that you can use.

Update the theme

To use the animation styles, update the theme object with the animationStyles property.

import {
  createCerberusConfig,
  createCerberusPreset,
} from '@cerberus/panda-preset'
import { animationStyles } from "./animation-styles"

export default createCerberusConfig({
  presets: [createCerberusPreset()],

  include: ['./app/**/*.{ts,tsx}'],
  exclude: [],

  theme: {
    extend: {
      animationStyles,
    },
  }
})

Using animation styles

Now you can use animationStyle property in your components.

<Box
  data-state="open"
  animationDuration="slow"
  animationStyle={{ _open: "slide-fade-in", _closed: "slide-fade-out" }}
>
  This content will fade in
</Box>

JSX Patterns

To make using animations even easier, Cerberus provides JSX patterns for all built-in animation styles. You can use these patterns to quickly apply animations to your components.

import { Box, EmphasizedSlideIn } from "styled-system/jsx"

<EmphasizedSlideIn>
  <Box>This content will slide in with emphasis</Box>
</EmphasizedSlideIn>