Skip to main content


The useAnimationState hook is a custom hook in Pearl UI that creates an animation state using the provided props and style functions. This hook is particularly useful in components where animation variants need to be used.


import { useAnimationState } from "pearl-ui";

Return value#

The useAnimationState hook returns an animation state created using the provided props and style functions.


Here's an example of how you can use useAnimationState to create a fade-in effect:

import { useAnimationState } from "pearl-ui";
const fadeAnimationState = useAnimationState({  from: {    opacity: 0,  },  to: {    opacity: 1,  },});
return <Box w={30} h={100} bgColor="pink" state={fadeAnimationState} />;


propsYesobjectThe animation state props. These are the properties that define the animation state.
styleFunctionsNoArray of Style FunctionsboxStyleFunctionsSpecifies the list of style functions for computing the received style props