---
title: useDynamicAnimation
description: "`useDynamicAnimation`は、アニメーションを切り替えるために使用するカスタムフックです。"
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({
  slideToLeft: {
    duration: "moderate",
    fillMode: "forwards",
    keyframes: {
      "0%": { transform: "translateX(100%)" },
      "100%": { transform: "translateX(0%)" },
    },
    timingFunction: "ease-in-out",
  },
  slideToRight: {
    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 === "slideToRight" ? "slideToLeft" : "slideToRight",
        )
      }
    >
      Please Click
    </Button>

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

## 使い方

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

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

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

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

### テーマのトークンを使う

[テーマ](https://yamada-ui.com/docs/theming.md)の[アニメーション](https://yamada-ui.com/docs/theming/tokens/animations.md)を使用する場合は、キーに値を設定します。

```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
デフォルトでは、アニメーションのトークンは定義されていません。
:::

### 複数のアニメーションを使う

複数のアニメーションを使うには、キーに配列を設定します。

```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>
)
```