Member-only story
Animate with the react-spring Library — Keyframes
3 min readFeb 17, 2021
With the react-spring library, we can render animations in our React app easily.
In this article, we’ll take a look at how to get started with react-spring.
Animate Mounting or Unmounting Components
We can animate mounting or unmounting components.
For example, we can write:
import React, { useState } from "react";
import { Transition } from "react-spring/renderprops";export default function App() {
const [show, set] = useState(false); return (
<div>
<button onClick={() => set(!show)}>toggle</button>
<Transition
items={show}
from={{ opacity: 0 }}
enter={{ opacity: 1 }}
leave={{ opacity: 0 }}
>
{(show) =>
show &&
((props) => (
<div style={props}>
<span role="img" aria-label="smile">
✌
</span>
️
</div>
))
}
</Transition>
</div>
);
}
to show the emoji when the show
state is true
.
We get the show
state from the Transition
component’s items
prop.