---
title: useDynamicAnimation
description: "`useDynamicAnimation` is a custom hook used to switch animations."
links:
  - source: https://github.com/yamada-ui/yamada-ui/tree/main/packages/react/src/hooks/use-dynamic-animation
  - storybook: https://yamada-ui.github.io/yamada-ui?path=/story/hooks-usedynamicanimation--basic
---

```tsx
const [animation, setAnimation] = useDynamicAnimation({
  moveLeft: {
    duration: "moderate",
    fillMode: "forwards",
    keyframes: {
      "0%": { transform: "translateX(100%)" },
      "100%": { transform: "translateX(0%)" },
    },
    timingFunction: "ease-in-out",
  },
  moveRight: {
    duration: "moderate",
    fillMode: "forwards",
    keyframes: {
      "0%": { transform: "translateX(0%)" },
      "100%": { transform: "translateX(100%)" },
    },
    timingFunction: "ease-in-out",
  },
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((key) => (key === "moveRight" ? "moveLeft" : "moveRight"))
      }
    >
      Please Click
    </Button>

    <Box animation={animation} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  </VStack>
)
```

## Usage

```tsx
import { useDynamicAnimation } from "@yamada-ui/react"
```

```tsx
import { useDynamicAnimation } from "@/components/ui"
```

```tsx
import { useDynamicAnimation } from "@workspaces/ui"
```

```tsx
const [animation, setAnimation] = useDynamicAnimation()
```

### Use Theme Tokens

To use [theme](https://yamada-ui.com/docs/theming.md) [animations](https://yamada-ui.com/docs/theming/tokens/animations.md), set the keys as the animation names.

```tsx
const [animation, setAnimation] = useDynamicAnimation({
  slideToLeft: "slide-to-right-full-reverse",
  slideToRight: "slide-to-right-full",
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((key) =>
          key === "slideToRight" ? "slideToLeft" : "slideToRight",
        )
      }
    >
      Please Click
    </Button>

    <Box animation={animation} bg="bg.contrast" color="fg.contrast" p="md">
      Box
    </Box>
  </VStack>
)
```

:::warning
By default, no animation tokens are defined.
:::

### Use Multiple Animations

To use multiple animations, pass an object with the keys as the animation names.

```tsx
const [animation, setAnimation] = useDynamicAnimation({
  moveLeft: [
    {
      duration: "moderate",
      fillMode: "forwards",
      keyframes: {
        "0%": { transform: "translateX(100%)" },
        "100%": { transform: "translateX(0%)" },
      },
      timingFunction: "ease-in-out",
    },
    {
      duration: "moderate",
      fillMode: "forwards",
      keyframes: {
        "0%": { bg: "green" },
        "100%": { bg: "orange" },
      },
      timingFunction: "ease-in-out",
    },
  ],
  moveRight: [
    {
      duration: "moderate",
      fillMode: "forwards",
      keyframes: {
        "0%": { transform: "translateX(0%)" },
        "100%": { transform: "translateX(100%)" },
      },
      timingFunction: "ease-in-out",
    },
    {
      duration: "moderate",
      fillMode: "forwards",
      keyframes: {
        "0%": { bg: "orange" },
        "100%": { bg: "green" },
      },
      timingFunction: "ease-in-out",
    },
  ],
})

return (
  <VStack alignItems="flex-start">
    <Button
      onClick={() =>
        setAnimation((key) => (key === "moveRight" ? "moveLeft" : "moveRight"))
      }
    >
      Please Click
    </Button>

    <Box animation={animation} bg="orange" color="white" p="md">
      Box
    </Box>
  </VStack>
)
```