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
: