Closed amcdnl closed 4 years ago
You can use the same code as above more or less. There's a caveat here that the internal version of Popmotion that Motion uses doens't support multi-dimensional animations so you'd need to do one for each.
class Component {
x: motionValue(0)
y: motionValue(0)
onPanEnd() {
this.decayX = decay({
velocity: this.x.getVelocity()
}).start((v) => {
this.x.set(v)
})
}
}
There is a type: "inertia"
animation that you can use in Framer Motion which is essentially decay but that'd take a bigger refactor. But you can start it in a programmatic way using useAnimation
controls
controls.start({
x: 0, // ignored
y: 0, // ignored
transition: { type: "inertia" }
})
Adding the pipe logic would be more difficult though, we need to think about how to do this a bit better.
@InventingWithMonster - I gave it a stab (https://gist.github.com/amcdnl/17a3642be09acb74db56c39a0b1e61e7) but it didn't end up very (probably due to my code). Would love to get your feedback.
Yeah that looks fine to me - does it work? Do you have an example of it in action?
Problem Statement
When a user drags when zooming/panning, I have a decay. I'm migrating from pose to motion and I'm curious what the best way to migrate the decay from popmotion would be.
I realize there is pan code in motion but I need to handle this a bit more programmatically since its more about moving the values rather than the actual dom. https://www.framer.com/api/motion/component/#panhandlers.onpan
Example Code
Demo