The AMP UI Working Group is responsible for AMP’s visual components & interactions and AMP’s overall accessibility and experience. This means we often work on visual polish for existing components in an effort to improve a website user’s experience. As a result, existing AMP pages on the web automatically get the improved user experience with zero effort on the side of the engineering teams that deployed them. Sepand Parhami, an engineer on the core AMP team, recently worked on creating more like app animation experiences for <amp-lightbox-gallery>, showing this idea in action.
App like swipe to dismiss in <amp-lightbox-gallery>
When dismissing an image while exiting lightbox mode, the transition back to the inline image is sudden as you can see below:
Inspired by apps such as Google Photos and Apple News, Sepand worked on making this interaction more intuitive and delightful for users. While transitioning out of lightbox mode, we wanted the user to:
- Know when they have crossed the threshold of interaction after which they are dismissing the lightboxed image.
- Identify the position of the image inlined into the original page they were viewing.
This information is provided by the size of the image and the lightbox background changing as the image moves from lightboxed state to it’s inline position. You can see the improved experience below:
Improved transitions for entering and exiting lightbox states
Another bit of visual polish we’ve added to <amp-lightbox-gallery> is the improved transitions for all images going to and from lightbox mode. Often the inline image is cropped or scaled to focus on the important part of the image, while the lightbox view shows the entire image. This has been a hard problem to solve, as it involves interpolating between two images of different positions and sizes.
As you can see above the inlined assets are cropped to focus on the important aspects of the image worth calling out in the article. However, you can see the full image when it is in lightbox mode. You can play with this demo here.
Creating a new animation library
To create the experiences stated above Sepand open sourced an animation library which helps you transform an image from one position/size to another. In addition to scaling up, this also supports changing the ‘crop’ of the image as defined by the object-fit CSS property. He shares his learnings in creating this library here. The blog post highlights the difficulties he came across while generating keyframes, catering for CSS properties like object-fit and object-position and testing his code.
Check out the library (code, documentation, demos) to see how to deploy the library on your own page. It is also available via npm.
Continued adoption of best-practices
To ensure we are providing site users a great experience by default, the AMP team has also been ramping up another experiment that automatically lightboxes <amp-img>s on a page that meet a certain criteria. The criteria includes factors like image size and whether or not it has an action associated with it or it’s ancestors. This allows end users to better explore the images on a page without developer teams having to make extensive changes to their codebase.
Improvements like the ones highlighted above are great examples of how engineering teams who use AMP get the benefits of all of the lessons learned by other teams that contribute to the AMP Project (e.g. Google, Pinterest and AliExpress). As the AMP Project finds incremental ways of improving the end-user experience through research and experimentation, we can upgrade extensions to provide improvements to end users without the involvement of the engineers working on deploying AMP sites.
Posted by Naina Raisinghani, Product Manager, AMP Project at Google