Open jtanadi opened 4 years ago
This is implemented in #68, but the overall effect is kind of choppy because the browser scrolls to defined location after zooming/scaling and React ends up rendering twice. So far, it doesn't seem like you can scroll before scaling, but maybe there's a way to have React only render after scroll?
Also would be nice to add some sort of smooth transition.
MDN article on Scroll-linked effect
The typical/expected behavior when zooming in and out is that the image is scaled up and down with the center of the view as the point of origin (ie. the center stays in place).
When we zoom in/out, we're using css
scale()
transform, usingtransform-origin: top
. This is to prevent parts of the image from being obscured by other components / leaving the view area of the page.So... this means that we will have to rely on JS to re-center the image somehow. Can we somehow use
elmt.scrollLeft
andelmt.scrollTop
?