✨Support lightbox gallery crop animation. (ampproject#22476)

PHCCorso · May 24, 2019 · 754d4ed · 754d4ed
1 parent 8dee641
commit 754d4ed
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js b/extensions/amp-lightbox-gallery/0.1/amp-lightbox-gallery.js
@@ -925,6 +925,11 @@ export class AmpLightboxGallery extends AMP.BaseElement {
     let imageAnimation;
 
     const measure = () => {
+      const srcCropEl =
+        closestAncestorElementBySelector(srcImg, 'amp-img') || srcImg;
+      const targetCropEl =
+        closestAncestorElementBySelector(targetImg, 'amp-img') || targetImg;
+
       duration = this.getTransitionDurationFromElements_(srcImg, targetImg);
       motionDuration = MOTION_DURATION_RATIO * duration;
       // Prepare the actual image animation.
@@ -933,9 +938,9 @@ export class AmpLightboxGallery extends AMP.BaseElement {
           styleContainer: this.getAmpDoc().getHeadNode(),
           transitionContainer: this.getAmpDoc().getBody(),
           srcImg,
+          srcCropRect: srcCropEl./*OK*/ getBoundingClientRect(),
           targetImg,
-          srcImgRect: undefined,
-          targetImgRect: undefined,
+          targetCropRect: targetCropEl./*OK*/ getBoundingClientRect(),
           styles: {
             'animationDuration': `${motionDuration}ms`,
             // Matches z-index for `.i-amphtml-lbg`.

diff --git a/test/manual/amp-lightbox-gallery.amp.html b/test/manual/amp-lightbox-gallery.amp.html
@@ -22,6 +22,10 @@
       object-fit: none;
     }
 
+    .scale-2x img {
+      transform: scale(2);
+    }
+
     footer {
       position: fixed;
       position: sticky;
@@ -56,6 +60,14 @@ <h2>Test SSR with srcset</h2>
   </amp-img>
 
   <h2>Test with single src, object-fit: cover</h2>
+  <h3>Test with a scale, causing a crop</h3>
+  <amp-img width=120 height=200
+    class="object-fit-cover scale-2x"
+    lightbox
+    src="https://ampbyexample-com.cdn.ampproject.org/i/s/ampbyexample.com/img/clean-2.jpg">
+  </amp-img>
+
+
   <h3>Expand horizontally</h3>
   <amp-img width=120 height=200
     class="object-fit-cover"