useAnimation

useAnimation hook provides a simple way to manage animation state in your components.

Import

import { useAnimation } from "@prismane/core/hooks";

Usage

function Demo() {
  const { animating, animate, timing, duration } = useAnimation();

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => animate()}>Toggle Animation</Button>
      <Animation
        w={fr(30)}
        h={fr(30)}
        bg="primary"
        animated={animating}
        timing={timing}
        duration={duration}
      />
    </Flex>
  );
}

Complex Usage

function Demo() {
  const { animating, animate, timing, duration } = useAnimation(
    true,
    750,
    "ease-in-out"
  );

  return (
    <Flex direction="column" gap={fr(5)}>
      <Button onClick={() => animate()}>Toggle Animation</Button>
      <Animation
        w={fr(30)}
        h={fr(30)}
        bg="primary"
        animated={animating}
        timing={timing}
        duration={duration}
      />
    </Flex>
  );
}

API

Parameters

Name	Type	Description	Default
`initial`	`boolean`	The initial state of the animation.	`false`
`duration`	`number`	The duration of the animation in milliseconds.	`150`
`timing`	`string`	The timing function for the animation.	`ease`

Return Value

Name	Type	Description
`animating`	`boolean`	Represents the current animation state.
`animate`	`() => void`	A function to toggle the animation state.
`duration`	`number`	The duration of the animation in milliseconds.
`timing`	`string`	The timing function for the animation.

Go BackGetting Started

Up NextuseCounter