v6 with Framer Motion?

[jstevens79]

Has anyone been able to get v6 working with Framer Motion? I tried adding StyleSheetManager with the emotion types used in prop forwarding mentioned in the documentation, but none of the animations/transitions work after doing so.

[manelio]

It should work allowing props to be forwarded:

const ListItem = styled(motion.li).withConfig({
  shouldForwardProp: () => true,
})`
margin: 0;
`

[quantizor]

styled-components v6 works with Framer Motion. As noted in the thread, use .withConfig to ensure motion props are forwarded:

const AnimatedItem = styled(motion.li).withConfig({
  shouldForwardProp: () => true,
})`
  margin: 0;
`;

Alternatively, with Framer Motion v11+, use motion.create():

const MotionDiv = motion.create(MyStyledComponent);

The key is ensuring that Framer Motion animation props (animate, initial, exit, etc.) are not filtered out by styled-components default prop filtering.