menu

Framer

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

Channels
Team

How should you mix variants and passive motionValues in a code component?

August 21, 2019 at 11:20am

How should you mix variants and passive motionValues in a code component?

August 21, 2019 at 11:20am

This is a framer-motion issue, with a reduced example here:

I've set up a draggable motion.div which drives the colour of another div using a motionValue and useTransform.

Animating to a variant onDragEnd works for the motion.div being dragged, but doesn't for the passive one. Try dragging/flinging in the example to see.

Is there a way to switch a motion component between active (variant) and passive values? Or is this behaviour intended to be automatic (or just not supported)?


August 22, 2019 at 10:04am

@mattperry any ideas on how to solve this? I've tried a bunch of variations and can't get the passive motion component to ever animate to a variant when dragging stops (while the dragged element always animates correctly)

  • reply
  • like

I've got one approach kind of working, by swapping between one motion component that uses the motionValue and one that just animates from it (using a custom prop). It's janky swapping nodes out though, and doesn't seem tenable in more realistic scenarios with child notes.

  • reply
  • like