Web Pattern Library:

Panning Transitions

The panner component offers markup-based controls for simple panning transitions of a child element (often an image). To use the panner, you'll need a class of "panner" on a parent element, and a class of "pannee" on a child element, which will typically be an image (either inside a picture element, or using srcset). This will cue a default left-to-right pan transition, but you can assign attributes to the panner element to configure the transition differently.

• data-panner-width: the width of the child element relative to the container. Default: "100%"
• data-panner-aspectratio: the aspect ratio of the container, relative to its own width. This will maintain a pixel height on the panner container element so that the image can crop vertically, allowing for vertical and diagonal panning. Default: false. Examples: "1" (square), ".65" (landscape), "1.35" (portrait)
• data-panner-startx: the start x value of the animation. Default: "0"
• data-panner-starty: the start y value of the animation. Default: "0"
• data-panner-endx: the end x value of the animation. Default: "-30%"
• data-panner-endy: the end y value of the animation. Default: "0"
• data-panner-duration: the duration of the animation. Default: "10s"
• data-panner-easing: the easing equation of the animation. Default: "ease-in-out"

Configuring image attributes

The image inside the panner needs a class of pannee. It can be an ordinary image, or ideally, a responsive image that uses srcset and sizes attributes to help the browser select an optimal source. The srcset attribute should contain a comma-separated list of available image source urls and width notations, which provide the browser a variety of image sizes to choose from.

<img src="/img/marketing/tees_sml.jpg" srcset="/img/marketing/tees_sml.jpg 600w, /img/marketing/tees_med.jpg 1200w, /img/marketing/tees_lrg.jpg 1800w" alt="..." class="pannee">

To help a browser decide which source to use at any given viewport size, the sizes attribute can be used to describe the width that the image will be rendered at across breakpoints. For the purposes of this component, the panner is often full-screen width, so we can pair the sizes attribute with the value used in the data-panner-width setting. For example, if the panner uses data-panner-width="200%", the image will render at 200% of the viewport width across all breakpoints. You can use sizes="200vw" to describe that 200% value in sizes.

<img src="/img/marketing/tees_sml.jpg" srcset="/img/marketing/tees_sml.jpg 600w, /img/marketing/tees_med.jpg 1200w, /img/marketing/tees_lrg.jpg 1800w" sizes="200vw" alt="..." class="pannee">

Similarly, if the panner uses data-panner-width="100%", the image will render at 100% of the viewport width across all breakpoints. 100vw will describe that in sizes.

<img src="/img/marketing/tees_sml.jpg" srcset="..." sizes="100vw" alt="..." class="pannee">

Cueing the Animations

Much like the layernsnap animations, the panner tool uses attributes to describe when it should play, and whether it should replay.

Add a data-scroll-activate attribute to get a panner to play as soon as it is visible in the viewport, and optionally, data-scroll-deactivate if you want it to replay whenever it reappears in the viewport (or in a carousel).

If the panning image is likely to be taller than the viewport size, you can also specify a tolerance to get a panner to play even if it is not fully in the viewport. The demos on this page use data-scroll-activetolerance="-400" to ensure the animation will play within 400px of the edge of the viewport. You can adjust this attribute positive or negatively as needed.

Examples

Horizontal panner example

This example uses a 150% image width and pans it from 0 to -35% on the x axis. The image's sizes attribute is 150vw to match the width setting.

Vertical panner example

This example uses a 100% image width and pans it from 0 to -50% on the y axis. The image's sizes attribute is 100vw to match the width setting.

Diagonal panner example

This example uses a single source image (which is less optimized than srcset) and pans it both on the x and y axes.