menu

Framer

Express your creative ideas through interactive design. Join the community for updates, support, resources, and more.

Channels
Team

Framer Motion with Custom Components

August 22, 2019 at 10:01pm

Framer Motion with Custom Components

August 22, 2019 at 10:01pm

I've created a custom Card component. I want to be able to animate it using framer-motion, however, I can't find any documentation on how to do that.

<motion.Card> doesn't work. I found some people mentioning using something like const MotionCard = motion.custom(Card) (not documented anywhere), but then I think they said you need to forward a ref to the wrapping <motion.div> element in the component.

I don't have nor do want to make framer-motion a dependency of my Card component. Is there a way to accomplish what I'm trying to do?


August 23, 2019 at 12:06am

Not quite sure if you could achieve such a behaviour with any library as react-springs for example works quite similiar to motion. However if you're able to pull out your styling you could use styled-components, emotion etc. to give back a motion.div :

export const Card = styled(motion.div)``

Don't know if this might help.

  • reply
  • like