Help: how to simulate drag-motion like browser while zooming

[meotimdihia]

This is my example while zooming an image by double tapping or pinching:
https://codesandbox.io/s/billowing-star-9wk7y3

I copied from your example (gesture-card-zoom): https://codesandbox.io/s/github/pmndrs/use-gesture/tree/main/demo/src/sandboxes/card-zoom

But motion while zooming by dragging is very slow. Please help me how to do it so smoothly + fast like when you zoom a website and drag it around, for example: go to https://google.com on your phone, zoom it and drag.

our example:

RPReplay_Final1673179991.mov

This is how the browser works:

RPReplay_Final1673179799.mov

[meotimdihia]

@dbismut Sorry about tagging you. But do you know how to fix this problem?

[dbismut]

You'll need to use inertia or decay in your gesture handler for your animation. This is possible with some animation libs such as react-spring or framer-motion. It's beyond the scope of this lib and I would advise against trying to replicate native scroll container, you'll bang your head against the walls.

[meotimdihia]

@dbismut I am using react-spring too. This is what my code looks like:

https://codesandbox.io/s/billowing-star-9wk7y3

If it is easy please help me to update the code. Or not, let's leave here.

[dbismut]

It's definitely not easy I'm sorry.

[meotimdihia]

Thanks for answering me. 😄