extensions/amp-story-panning-media/amp-story-panning-media.md
The amp-story-panning-media component provides a way to pan and zoom an image between pages in Web Stories.
Use the amp-story-panning-media to transition an image between pages. The component can animate between position and zoom.
Add the following script tag to the head of your Web Story:
<script async custom-element="amp-story-panning-media" src="https://cdn.ampproject.org/v0/amp-story-panning-media-0.1.js"></script>
The amp-story-panning-media component accepts 1 descendant. This descendant must be an amp-img. Components transition between pages when their child has the same src value.
<amp-story-page>
<amp-story-grid-layer>
<amp-story-panning-media layout="fill" data-x="-10%" data-y="-20%" data-zoom=".8">
<amp-img layout="fill" src="assets/world-map.jpg" width="4000" height="3059" ></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
<amp-story-page>
<amp-story-grid-layer>
<amp-story-panning-media layout="fill" data-x="20%" data-y="30%" data-zoom="2">
<amp-img layout="fill" src="assets/world-map.jpg" width="4000" height="3059" ></amp-img>
</amp-story-panning-media>
</amp-story-grid-layer>
</amp-story-page>
The Northern Sky Constellations Web Story uses a single star chart for the entire story. It highlights different constellations by panning and zooming. A parallax transition effect can be achieved by layering two png star images with transparency.
<amp-img alt="image of Northern Sky Constellations Web Story example" layout="fixed" src="https://raw.githubusercontent.com/processprocess/amphtml/panning-media-docs/extensions/amp-story-panning-media/img/constellations-screenshot.jpg" width="690" height="1009"></amp-img>
The Web Story creation tool integration example demos how to modify the component with sliders.
<amp-img alt="image of Web Story tool example" layout="fixed" src="https://raw.githubusercontent.com/processprocess/amphtml/panning-media-docs/extensions/amp-story-panning-media/img/controls.jpg" width="690" height="1009"></amp-img>
Specifies the horizontal position in percentage.
Centered on 0 (default) with positive values moving the image to the right (50% centering left edge of image) and negative to the left (-50% centering right edge of image).
Specifies the vertical position in percentage. Centered on 0 (default) with positive values moving the image down (50% centering top edge of image) and negative upward (-50% centering bottom edge of image).
Specifies the level of zoom.
The default is 1. This corresponds to the image covering it's container with the same behavior the CSS declaration background: cover;.
A higher value scales the image up (zooms in). A lower value scales the image down (zooms out).
If lock-bounds is specified the image will not scale smaller than the viewport.
Prevents the image from panning beyond the viewport. When using lock-bounds width and height must be specified on the amp-img child.
See validation rules in amp-story-panning-media validator.