menu
Channels
Chat
view-forward
# All channels
view-forward
# General
view-forward
# Announcements
view-forward
# Bug Reports
view-forward
# FAQ
view-forward
# Feature Requests
view-forward
# Learn
view-forward
# Meetups
view-forward
# Resources
view-forward
# Snippets & Tips
view-forward
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
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