AnimatedReact

AnimatedReact is a lightweight animation library for React, inspired by Jetpack Compose. It provides a set of simple yet powerful animation functions to enhance UI transitions with ease.

Intsallation

To install AnimatedReact, run:

npm install animatedreact

Animation Functions

Below is a list of all available animation functions and their parameters:

Function	Parameters
fadeIn	duration (ms), initialAlpha (0-1), easing
fadeOut	duration (ms), targetAlpha (0-1), easing
scaleIn	duration (ms), initialScaleX, initialScaleY, originX, originY, easing
scaleOut	duration (ms), targetScaleX, targetScaleY, originX, originY, easing
expandIn	width, height, duration (ms), easing
expandInHorizontally	width, duration (ms), easing
expandInVertically	height, duration (ms), easing
shrinkOut	width, height, duration (ms), easing
shrinkOutHorizontally	width, duration (ms), easing
shrinkOutVertically	height, duration (ms), easing
slideIn	xPercentage, yPercentage, duration (ms), easing
slideOut	xPercentage, yPercentage, duration (ms), easing
slideInHorizontally	xPercentage, duration (ms), easing
slideInVertically	yPercentage, duration (ms), easing
slideOutHorizontally	xPercentage, duration (ms), easing
slideOutVertically	yPercentage, duration (ms), easing
blurIn	duration (ms), initialBlur, easing
blurOut	duration (ms), targetBlur, easing
combinedIn	animations (array of enter effects)
combinedOut	animations (array of exit effects)

Easing Configuration

Easing functions control the animation speed curve. The library provides predefined options:

• Linear
• EaseIn
• EaseOut
• EaseInOut
• EnterDefault (default: EaseIn)
• ExitDefault (default: EaseOut)

For custom easing, you can create your own by using the constructor:

const customEasing = new Easing("cubic-bezier(0.42, 0, 0.58, 1)");

Usage Examples

Simple Animations

<AnimatedVisibility enter={enterEffect} exit={exitEffect} visible={visible}>
    <div style={{ width: "100px", height: "100px", backgroundColor: "red" }} />
</AnimatedVisibility>

You can replace enterEffect and exitEffect with any desired animation, for example:

const enterEffect = combinedIn([fadeIn(500, 0, Easing.EaseInOut), blurIn()]);
const exitEffect = combinedOut([fadeOut(), blurOut()]);

Or:

const enterEffect = scaleIn(500, 0);
const exitEffect = scaleOut(500, 0);

AnimatedContent with Dynamic Keys

const [count, setCount] = useState(1);

const enter = (previousKey: number, targetKey: number) => {
    return targetKey > previousKey ? combinedIn([slideInVertically(100), fadeIn()]) : combinedIn([slideInVertically(-100), fadeIn()]);
};

const exit = (previousKey: number, targetKey: number) => {
    return targetKey > previousKey ? combinedOut([slideOutVertically(100), fadeOut()]) : combinedOut([slideOutVertically(-100), fadeOut()]);
};

<AnimatedContent enter={enter} exit={exit} currentKey={count}>
    <CounterItem />
</AnimatedContent>


<button onClick={() => handleChange(count + 1)}>
  increase ↑
</button>
<button onClick={() => handleChange(count - 1)}>
  decrease ↓
</button>

You can retrieve the key using useContentKey():

function CounterItem() {
  const key = useContentKey();
  return <h2>{key}</h2>;
}