Motion: [FEATURE] Reconcile x/y transform and drag gesture

Created on 23 Jul 2020  路  6Comments  路  Source: framer/motion

1. Read the FAQs 馃憞

2. Describe the bug

As the title states, MotionValues are not updating after the 2.0.0-beta.77 version of framer-motion in package.json .

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

https://codesandbox.io/s/framer-motion-path-drawing-drag-and-usetransform-8k2lh?file=/package.json:243-249
(This is not mine it is a sandbox of a tutorial)

4. Steps to reproduce

Steps to reproduce the behavior:

  1. Go to 'package.json''
  2. Replace "framer-motion" version with anything after "2.0.0-beta.77" (e.g. "2.1.2")
  3. Wait for the refresh
  4. Slide the square in the middle, and the background doesnt change, neither the Svg paths show.
    Note: this can also be reproduced in local with react and framer motion's latest version (at the time of this writing) when trying to use useTransforms on motionvalues.

5. Expected behavior
The background color and the path length use transforms. After steps 1,2,3 slide the square in the middle and the background changes and the paths show.

6. Video or screenshots
Initial state:
image

Working path and background change when dragging the square to the left(version 2.0.0-beta.77)
image

Not working path and background changes when dragging the square to the left (version 2.1.2)
image

feature

Most helpful comment

It would be really nice to at least add a note to documentation because I just wasted quite a bit of time trying to understand why my code wasn't working like the docs say they should :(

All 6 comments

This isn't a bug with MotionValues - the drag gesture has been moved from the x/y transform to layout projection. There's a PR https://github.com/framer/motion/pull/633 that's trying to solve this use-case.

It would be really nice to at least add a note to documentation because I just wasted quite a bit of time trying to understand why my code wasn't working like the docs say they should :(

It would be really nice to at least add a note to documentation because I just wasted quite a bit of time trying to understand why my code wasn't working like the docs say they should :(

it does get mentioned under 'breaking changes' under the v2 upgrade section, but i agree -- flagging the docs / changing or removing examples where drag + motionvalues are paired (the intro/overview, the MotionValue section, and examples > drag) would've helped me.

Yeah I installed it fresh for this project and followed the examples in the docs, the upgrade section is not a place I would look in that context.

For context, what I'm building: drag things around -> save the position -> when returning reinitialise with the saved position. As far as I can tell this is not possible currently in v2 so I've rolled back to 1.x - that's obviously not really a place I want to be.

Overall I'm super happy and grateful for this library so I hope it can be fixed to support these use cases again. 馃檹

Is there a temporary workaround, as far as anybody is aware?

It would be nice to have the docs updated for whatever the workaround is. The demo that's cited in the 2.3 docs as noted does not work. It's def odd for people coming to the library to have the example in the docs non-functional. This has all been said by others already, but just echoing it's importance.

Was this page helpful?
0 / 5 - 0 ratings