How to Create Animation using styled-components

Simple but elegant solution.

Styled components is a popular CSS framework for single-page applications. Today we will see how we can create animations using styled-components.

To learn more about styled-components go here.

styled-components

Now let’s see how we can animate our components using styled-components.

Get started

First, create a boilerplate application with ReactJS.

npx create-react-app styled-components-animation-demo

Then install the dependency

npm i styled-components

And we are ready to roll

Define the Animation

Let’s create a FadeInAnimation with styled-components.

const FadeInAnimation = keyframes`
  0% {opacity:0;}
  100% {opacity:1;}
`;

This is a straightforward animation that brings a component into view smoothly.

Use the animation

Let’s say we have a header to animate to bring into view. We can easily do that by defining the animation property.

The final result will look something like this.

const StyledHeader = styled.div`
  animation: ${FadeInAnimation} 300ms linear;
`;

Final Words

This was a simple demonstration of how to animate components using styled-components .

Teaching animation was not the goal of this article. Just to clarify, any CSS animation will work similarly using this approach.

Have a Great Day! :D

Get in touch with me via LinkedIn or my Personal Website.