Prismane / useAnimation

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

Overview

The useAnimation hook simplifies animation state management in React components by providing an intuitive API for controlling transitions and effects. It accepts parameters for the initial animation state, duration, and timing function while returning an object with the current animation state and a function to toggle it. This hook is specially designed to work seamlessly with Prismane's Animation component, enabling you to create dynamic and interactive user interfaces with minimal code.

Import

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

Parameters

The useAnimation hook accepts the following parameters:

Name	Type	Description	Default Value
`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

The useAnimation hook returns an object containing the following properties:

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.

Usage

The useAnimation hook is designed to easily integrate with our Animation component. It enables us to easily and consistently handle and toggle animations.

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

Initial State

Pass the initial parameter, which is the first parameter, to the useAnimation hook to change the initial state of the animation. By default a value of false is used.

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

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

Duration

Pass the duration parameter, which is the second parameter, to the useAnimation hook to change the duration of the animation. By default a value of 150 is used.

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

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

Timing

Pass the timing parameter, which is the third parameter, to the useAnimation hook to change the timing of the animation. By default a value of ease is used.

function Demo() {
  const { animating, animate, timing, duration } = useAnimation(
    true,
    1000,
    '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>
  );
}

PreviousTypography

NextuseDimensions