Use styled components with framer motion

The cleanest way to use framer motion divs with styled components is by passing the replacement motion component via the as styled components prop.

<styles.MyStyledComponent as={motion.div}></styles.MyStyledComponent>

This maintains the same mental flow as replacing a native HTML element with the motion.<ELEMENT> equivalent.

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s