Prevent jump when zooming out with double tap

[Pascal-So]

Hi, I'm back with another PR :)

This time I took a look at the zooming animation that appears when double-tapping. Specifically, when zooming out, the previous implementation sometimes had a visual jump at the start of the zoom-out animation. I recorded an example in this video:

zoomout-old.webm

The problem was that the x and y variables were updated on every touch, meaning that when zooming out, the zoom location would first jump to the coordinate where the touch happened. My first instinct to fix this was to just only update the coordinates when zooming in, and leave them at the same value when zooming out. Unfortunately this doesn't work, since the start of the zoom-out animation will be wherever the zoom-in animation ended, and thus will still jump if the user has panned around in the meantime.

To fix this, I had to make some significant changes to the animateZoom function. This function now starts by determining a start and end location for the zoom animation, and then only passing an inner function to requestAnimationFrame instead of re-running the calculations on every frame. The start of the zoom-out animation can now be computed from the current state.

The new behaviour looks like this:

zoomout-new.webm

I believe that these changes also make the animateZoom function more readable, but of course I'm biased since this time I'm the one who wrote it 😅 so I'll let you be the judge of that

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[netlify]

✅ Deploy Preview for zoom-image-library ready!

Name	Link
🔨 Latest commit	0a7928c
🔍 Latest deploy log	https://app.netlify.com/sites/zoom-image-library/deploys/663f67603ac2860008ed287e
😎 Deploy Preview	https://deploy-preview-292--zoom-image-library.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Pascal-So]

One note on the side: I've also removed the preventDefault call from the touchstart handler since to me it looks like this is not needed. In the immich project (the reason why I found this library), the preventDefault is even a bit annoying because the user can't clear the hover state from other ui elements such as navigation arrows by touching the image.

If you see a reason why we shouldn't change this then I'm happy to add it back in. Feel free to object on that

[Pascal-So]

Also, do you need me to run the changeset command again?

[willnguyen1312]

Yeah, everything looks great. Just please add changeset as it will make my job easy to release it 😊

[willnguyen1312]

Oh man, thanks so much! I really miss Math back in university and high school ❤️ What I do nowadays in the industry as FrontEnd engineer has almost nothing to do with numbers, mostly logic 🙈 I should start spending more time on this beautiful stuff 😍

[Pascal-So]

done :)

[willnguyen1312]

Thanks again for your beautiful PR 🫶, you opened my mind 😊