Can I use Framer Motion with Styled Components?

Framer Motion is fully compatible with Styled Components.

Both Styled Components and Framer Motion offer ways to make custom styled and animated components.

1. styled (recommended)

Styled Components' styled function can be used to style any component, including Framer Motion's motion:

import styled from "styled-components";
import { motion } from "framer-motion";
const Box = styled(motion.div)`
  background: white;
  width: 150px;
  height: 150px;
`;

The component returned from styled(motion.div) can then be be used just like any other motion component:

<Box animate={{ scale: 2 }} />

2. motion.custom

Framer Motion comes with a way to turn normal React components into animated version of themselves, the motion.custom function.

As long as a component uses React.forwardRef to forward its ref prop to the underlying HTML element, it can be animated.

This works well for most components but with Styled Components I prefer the syntax of having the CSS template on the outside of the function call, as this looks a bit messy:

const Box = motion.custom(styled.div`
  background: white;
  width: 150px;
  height: 150px;
`);

Live demo

Play around with this live demo to get a feel of how to use Framer Motion with Styled Components. It features examples of how to use both styled and motion.custom: