useDynamicAnimation

useDynamicAnimation is a custom hook used to switch animations.

Box

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

If you use this code, you need to add "use client" to the top of the file.

Usage

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

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

import { useDynamicAnimation } from "@workspaces/ui"

const [animation, setAnimation] = useDynamicAnimation()

Use Theme Tokens

To use theme animations, set the keys as the animation names.

Box

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

If you use this code, you need to add "use client" to the top of the file.

By default, no animation tokens are defined.

Use Multiple Animations

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

Box

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

If you use this code, you need to add "use client" to the top of the file.