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.
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">
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.
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.