How to Create Animation using styled-components

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.

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

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.

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;
`;

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.

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