Animate Styled Components with Framer Motion!

I love Framer Motion because it's a library that's easy to use and powerful. I've created page transitions within Next.js and cool interactions like tap to expand. It's a very versatile library for animation in React and it's not just limited to building from scratch.

If you're using a CSS-in-JS library then it might not be immediately obvious how to integrate Framer Motion smoothly but once you know, it's as easy as 🥧.

Watch this short tutorial on how you can add animations and gestures like drag, to an existing UI library built on top of styled-components.

The core concepts

Here's a quick reference to help you out!

Turning a styled-component into something animatable

Use the as prop and specify motion.div or another motion.<some html element> to start using Framer Motion for that component.

<MyComponent as={motion.div} animate={{ y: 100 }} />

Animating it's as easy as adding the animate, transition, and other props you're used to adding directly to motion elements.

Making your own styled-components and integrating with Framer Motion

Define your styled component but instead of passing an html element as the first argument, give it a motion element instead.

const MyCustomComponent = styled(motion.div)`
  width: 2rem;
  background-color: tomato;
`;

Need to add drag functionality? Simply pass in the prop when you use it!

<div>
  <MyCustomComponent drag />
  <MyCustomComponent animate={{ opacity: 1 }} />
</div>

---

It's as easy as that. If you use styled-components to build your React apps then I hope you this helps you develop rich experiences with animation and interactivity without the hassle. Framer Motion is my favourite library for tinkering with animations and it's versatile enough to be used with a variety of different frontend technology.

References

• Want to create something cool in React95?
• Check out Framer Motion for animating React components
• Learn more cool animations you can achieve including animations on scroll

Comments

[DhiraNegi]

How about using it in an image instead of div.
Can you tell me how to do that?

[Amaan Ahmad]

use motion.custom

const MyCustomComponent = motion.custom(styled.img` 
// your styles ... 
`)