Experiment: Add zoom and animation toggle for image lightbox

[artemiomorales]

What problem does this address?

This builds on the image lightbox experiment using the Interactivity API, introduced in #50373, and is related to #49972 and #50029.

Some users prefer the effect of a zoom animation for the lightbox over a fade animation. Ideally, users would be able to select the animation they prefer.

What is your proposed solution?

Add support for a zoom animation to the lightbox, as well as a toggle for the behaviors UI, allowing users to select their preference when the lightbox is enabled for a particular block.

Initial explorations by @SantosGuillamot in the videos below and in this branch.

These explorations are originally from a comment in the initial PR.

Desktop

239522890-21e9aa36-3352-4b9c-9d06-50fdc821e205.mp4

Mobile

239522971-099fb143-1ab2-462e-9add-086cb032a6ff.mp4

Explanation

Lightbox.Zoom.mp4

[pablohoneyhoney]

I don't think we need the close X icon on the top right. Esc or click outside closes it. The only caveat is tab Esc leaves the image selected with a ring (in Medium).

I wonder, based on the videos, if the transition can be sped up a bit more.

[pablohoneyhoney]

I also wonder if you all considered a very slight zoom on hover so it'd anticipate the behavior.

[artemiomorales]

@pablohoneyhoney Thanks for the ideas! Here are some thoughts:

I wonder, based on the videos, if the transition can be sped up a bit more.
I also wonder if you all considered a very slight zoom on hover so it'd anticipate the behavior.

These sound worth exploring — will give these a shot.

I don't think we need the close X icon on the top right.

For this one, we recently received accessibility feedback on the close button and that it is important to have it:

Back when I was visually impaired and not totally blind, I always used close buttons on popups. That was before I had to learn every keyboard shortcut under the sun and clicking outside was always tricky due to magnification programs I used such as ZoomText. There is no reason to not have a visible close button. Why design in this project is so against it is totally beyond me but sometimes there is a reason the basics are the basics.

Will keep all of this in mind as this feature gets implemented.

[pablohoneyhoney]

It’s not a popup or a dialog with functionality though, you can literally hit the keyboard anywhere and it should "close", no shortcut needed.

I quoted "close" because it's not even an opening behavior (which puts you in a new context with further actions), but a slight zooming behavior (same context, not critical for understanding any further text or functional information about the object itself), it’s not “closing” anything.

In that vein, maybe “lightbox” (traditionally understood as a state hosting further actions like thumbnails, image info, carousel…) is not a clear name for this behavior anyways, I feel it has been misunderstood.

[andrewhayward]

It would be great if we could predicate this on prefers-reduced-motion, so that we can respect any explicit (and often important) choices made by end users.

Essentially, give content authors a choice as to whether they want a fade or zoom effect, but allow content consumers to override that. After all, "ideally users would be able to select the animation they prefer"!