Image zoom

zoom.ts is a lightweight TypeScript library for image zooming, as seen on Medium. It is available on GitHub and npm under the terms of the ISC license.

Click to zoom

A click will start a seamless animation into an immersive, full-screen view. Holding either the ⌘ or Ctrl key will open the image in a new tab when clicked.

Don’t lose your place

Your progress through a story is important. When you interact with images we maintain your scroll position and make it apparent that your state has not changed. We simultaneously fade out the content and zoom the image for a smooth visual experience.

Take me home

You can press Esc or click anywhere on the image to exit the zoomed state, or, more interestingly, just scroll away as if you were continuing past the image. Give it a try:

Ready when you are

Another significant detail is the lack of loading indicators — we’re always ready to zoom. We prepare all images to zoom right after the content has loaded. If the full-size image isn’t loaded, we transition the original image and replace it when the detailed image is ready. We don’t allow your connection speed to affect the animation, creating an ultra-snappy interaction. More often than not, the images are swapped before the transition comes to an end.

Images come a variety of sizes, as such zoom.ts adapts to wherever you place your image on the page and repositions the image if the browser is resized whilst an image is expanded.

You may wish to justify your image to align it with the flow of text, avoiding the thematic break that typical block spaced images produce. The zooming experience doesn’t change for these cases.

Even small images can be zoomed. If the image doesn’t expand to fill the entire browser viewport, it will float above your content in the centre of the page.

The image to the left doesn’t have a separate image specified as the full-source, thus won’t create a separate network request upon expansion.