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:

1
import { defineAnimationStyles } from "@pandacss/dev"
2

3
const animationStyles = defineAnimationStyles({
4
  bounceFadeIn: {
5
    value: {
6
      animationName: "bounce, fade-in",
7
      animationDuration: "1s",
8
      animationTimingFunction: "ease-in-out",
9
      animationIterationCount: "infinite",
10
    },
11
  },
12
})

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.

1
import {
2
  createCerberusConfig,
3
  createCerberusPreset,
4
} from '@cerberus/panda-preset'
5
import { animationStyles } from "./animation-styles"
6

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

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

13
  theme: {
14
    extend: {
15
      animationStyles,
16
    },
17
  }
18
})

Using animation styles

Now you can use animationStyle property in your components.

1
<Box
2
  data-state="open"
3
  animationDuration="slow"
4
  animationStyle={{ _open: "slide-fade-in", _closed: "slide-fade-out" }}
5
>
6
  This content will fade in
7
</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.

1
import { Box, EmphasizedFadeIn } from "styled-system/jsx"
2

3
<EmphasizedFadeIn duration="slow" asChild>
4
  <Box>This content will fade in with emphasis</Box>
5
</EmphasizedFadeIn>