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.

https://styled-components.com/

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...

team

Handle Multiple Environments in React

team

11 Unwanted Ridiculous NPM Packages

team

10 Lessons That Helped Me Grow As A Developer

team

How to Setup and Add Google Analytics to your React App

team

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