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.