Member-only story

Animate with the react-spring Library — Keyframes

John Au-Yeung
3 min readFeb 17, 2021

--

Photo by Rodion Kutsaev on Unsplash

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.

--

--

No responses yet