Closed Pascal-So closed 1 month ago
Run & review this pull request in StackBlitz Codeflow.
Name | Link |
---|---|
Latest commit | 0a7928c2d3fe5bd6f9ea07ce575601f205c5a735 |
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.
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
Also, do you need me to run the changeset command again?
Yeah, everything looks great. Just please add changeset as it will make my job easy to release it π
done :)
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
andy
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 torequestAnimationFrame
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