Zoom in on a point (using scale and translate)

javascript

responsive-design

performance

best-practices

byAnton Shumikhin·Oct 17, 2024

Master zooming into a point by adjusting the transform-origin to your target coordinates and then amplifying with scale():

.element-to-zoom {
  /* Pirates' treasure map: X marks the spot! */
  transform-origin: 50% 50%;
  /* Abracadabra, grow bigger! */
  transform: scale(2) translate(-50%, -50%);
}

To get a dynamic zoom on user interaction, go with JavaScript:

function zoomInOnPoint(element, x, y, zoomLevel) {
  let offsetX = (x - element.offsetLeft) / element.offsetWidth * 100;
  let offsetY = (y - element.offsetTop) / element.offsetHeight * 100;
  element.style.transformOrigin = `${offsetX}% ${offsetY}%`;
  element.style.transform = `scale(${zoomLevel})`;
}

Provide the element, cursor x and y coordinates, and desired zoomLevel to gain control over the zoom magic.

The mechanics of dynamic zoom

Determining the focal point

Get the mouse position relative to the canvas to derive the zoom center. This position anchors succeeding transformations to zoom in seamlessly.

Interactive zoom

Embrace the wheel event to govern zoom direction and degree. Translate the context to the zoom focal point, and Math.exp supplies non-linear zooming for a more intuitive feel.

Slick animation

Get a flawless animation flow using requestAnimationFrame. This renders new frames right when the browser is prepared and keeps the process free from performance hiccups.

Preserving zoom focus

Leverage a transformation matrix to keep track of previous scale and pivot changes. To ensure your spot stays in focus after zoom actions, reverse the scaling translation - much like a rewind button.

Zoom execution steps

The zoom maneuver

Prior to scaling, apply context.translate to keep the zoom center stationary. Also, you can substitute canvas methods with CSS3 transforms that couple scale and translate for zooming.

Bridging browser differences

Standardize the wheel delta across all browsers to eliminate unpredictable zoom speeds and heighten the user experience.

Panning post-zoom

Incorporate pan functionality after zoom. Empowering users to drag the zoomed canvas aids in studying details around the focus point.

Framing the view

To keep zoomed content within its proper area, set overflow:hidden on the containing element. It’s like keeping a lion in its cage, so it doesn’t scare the other animals.

Enhancing the zoom experience

Live debugging

For an error-free code, use plunk or a similar resource to test transformations. It's your crystal ball for foreseeing how your code functions upon deployment.