How do you use Framer Motion + Styled Components together?

Question

I’m wanting to use Styled Components and Framer Motion Together to style and animate.... Can I use a variable from SC or FM to style and animate it?

What is a example?

Answer 1

You should be able to use styled function as a HOC for any motion component

import styled from "styled-components";
import { motion } from "framer-motion";

const AnimatedDiv = styled(motion.div)`
  background-color: rebeccapurple;
  width: 200px;
  height: 200px;
`;

This allows you to use the Component as such:

<AnimatedDiv animate={{ scale: 3 }} />

Answer 2

The best method is to use the as prop:

<StyledComponent as={motion.div}/>

This maintains the framer-motion intent of "variability" as you put it, in being able to easily replace DOM elements with their motion counterparts.

This was unusually hard to find online so I want to post it.