useAnimation

useAnimation is a custom hook that implements animations similar to CSS keyframes.

Import

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

Copied!

Usage

useAnimation sets arguments such as keyframes, and passes the generated animation to props.

keyframes: Set the style of keyframes (or intermediate points) along the flow of the animation. The values of each style can use tokens from the Yamada UI style system and theme.
duration: Set the length of time required for one animation cycle.
timingFunction: Set how the animation progresses. This defines the acceleration curve, setting how the animation progresses between keyframes.
delay: Set the delay time from when the element is loaded until the animation begins.
iterationCount: Set the number of times the animation repeats. To repeat the animation indefinitely, specify infinite.
direction: Set whether to animate in the reverse direction and repeat when the animation sequence is complete, or to reset to the initial state and repeat the animation.
fillMode: Set whether to apply the specified style before and after the execution of the animation.
playState: Set whether to pause or resume the animation.

The animation settings are based on @keyframes and Using CSS animations.

Editable example

const animation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box w="full" h="xs" animation={animation} />

Copied!

If you want to learn more about animation, please check here.

Using Multiple Animations

Editable example

const animation = useAnimation([
  {
    keyframes: {
      "0%": {
        bg: "red.500",
      },
      "20%": {
        bg: "green.500",
      },
      "40%": {
        bg: "purple.500",
      },
      "60%": {
        bg: "yellow.500",
      },
      "80%": {
        bg: "blue.500",
      },
      "100%": {
        bg: "red.500",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        h: "xs",
      },
      "50%": {
        h: "md",
      },
      "100%": {
        h: "xs",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
  {
    keyframes: {
      "0%": {
        w: "full",
      },
      "50%": {
        w: "50%",
      },
      "100%": {
        w: "full",
      },
    },
    duration: "10s",
    iterationCount: "infinite",
    timingFunction: "linear",
  },
])

return (
  <Box h="md">
    <Box w="full" h="xs" animation={animation} />
  </Box>
)

Copied!

Responsive Style

Editable example

const desktopAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

const tabletAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "cyan.500",
    },
    "20%": {
      bg: "emerald.500",
    },
    "40%": {
      bg: "pink.500",
    },
    "60%": {
      bg: "amber.500",
    },
    "80%": {
      bg: "sky.500",
    },
    "100%": {
      bg: "cyan.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return (
  <Box
    w="full"
    h="xs"
    animation={{ base: desktopAnimation, md: tabletAnimation }}
  />
)

Copied!

Color Mode

Editable example

const lightAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.500",
    },
    "20%": {
      bg: "green.500",
    },
    "40%": {
      bg: "purple.500",
    },
    "60%": {
      bg: "yellow.500",
    },
    "80%": {
      bg: "blue.500",
    },
    "100%": {
      bg: "red.500",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

const darkAnimation = useAnimation({
  keyframes: {
    "0%": {
      bg: "red.800",
    },
    "20%": {
      bg: "green.800",
    },
    "40%": {
      bg: "purple.800",
    },
    "60%": {
      bg: "yellow.800",
    },
    "80%": {
      bg: "blue.800",
    },
    "100%": {
      bg: "red.800",
    },
  },
  duration: "10s",
  iterationCount: "infinite",
  timingFunction: "linear",
})

return <Box w="full" h="xs" animation={[lightAnimation, darkAnimation]} />

Copied!

If you want to learn more about color mode, please check here.

Edit this page on GitHub

PreviousHooks NextuseAsync