With the React Animation library, we can render animations in our React app easily.
In this article, we’ll take a look at how to get started with the React Animation library.
HideUntilLoaded
We can hide the content until a URL is loaded with the HideUntilLoaded
component.
For example, we can write:
import React from "react";
import { HideUntilLoaded } from "react-animation";
export default function App() {
return (
<>
<HideUntilLoaded imageToLoad="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo">
your content
</HideUntilLoaded>
</>
);
}
We use the HideUntilLoaded
component with the imageToLoad
prop to wait for the image with the given URL to load until the content inside it is displayed.
We can add a spinner that’s displayed when the image with the given URL is loaded with the Spinner
prop.
For instance, we can write:
import React from "react";
import { HideUntilLoaded } from "react-animation";
export default function App() {
return (
<>
<HideUntilLoaded
imageToLoad="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"
Spinner={() => <div>Loading...</div>}
>
your content
</HideUntilLoaded>
</>
);
}
We add the Spinner
prop with a function that returns the JSX for the loading indicator.
The animation effect can be changed with the animationIn
prop.
For example, we can write:
import React from "react";
import { HideUntilLoaded } from "react-animation";
export default function App() {
return (
<>
<HideUntilLoaded
animationIn="bounceIn"
imageToLoad="https://i.picsum.photos/id/23/200/300.jpg?hmac=NFze_vylqSEkX21kuRKSe8pp6Em-4ETfOE-oyLVCvJo"
Spinner={() => <div>Loading...</div>}
>
your content
</HideUntilLoaded>
</>
);
}
We change the animation effect that’s displayed when the content is loading with the animationIn
prop.
AnimateGroup
The AnimateGroup
component lets us animate components being added, removed, or modified within a group of components.
For instance, we can write:
import React, { useState, useEffect } from "react";
import { AnimateGroup } from "react-animation";
export default function App() {
const [nums, setNums] = useState([1, 2]);
useEffect(() => {
const timer = setInterval(() => {
setNums((nums) => [...nums, nums[nums.length - 1] + 1]);
}, 1500);
return () => clearInterval(timer);
}, []);
return (
<>
<ul>
<AnimateGroup animation="bounce">
{nums.map((word) => (
<li key={word}>{word}</li>
))}
</AnimateGroup>
</ul>
</>
);
}
to add the nums
state and animate it with the AnimationGroup
.
We set the animation
prop to 'bounce'
so that when we add an entry to nums
, we’ll see the bounce effect rendered on the entry being added.
The useEffect
callback adds an entry to nums
by calling the setNums
function.
We add a new entry to nums
every 1500ms by calling setInterval
.
Animations
We can add animations with our own styling by using the anuimations
object.
For example, we can write:
import React from "react";
import { animations } from "react-animation";
export default function App() {
return (
<>
<div style={{ animation: animations.popIn }}>hello world</div>
</>
);
}
to render the popIn
effect when we mount the div with the animation.popIn
property.
popIn
is 'pop-in 500ms cubic-bezier(0.19, 1, 0.22, 1) forwards’
.
Easings
We can set the timing function for our animation with the easings
object.
To do this, we write:
import React from "react";
import { easings } from "react-animation";
const style = {
animation: `pop-in ${easings.easeOutExpo} 500ms forwards`
};
export default function App() {
return (
<>
<div style={style}>hello world</div>
</>
);
}
We pass the easings.easeOutExpo
string into our animation style string.
Then we apply the easing in our animation.
Conclusion
We can apply various animation effects with the React Animation library.