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

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.

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

Share this post

Read more articles...


Handle Multiple Environments in React


11 Unwanted Ridiculous NPM Packages


10 Lessons That Helped Me Grow As A Developer


How to Setup and Add Google Analytics to your React App


Add Custom Fonts with NextJS

Profile Image

Who I am

Hi, I amMohammad Faisal, A full-stack software engineer @Cruise , working remotely from a small but beautiful country named Bangladesh.

I am most experienced inReactJS,NodeJS andAWS

Buy Me a Coffee Widget