✨ [Panning media] Use translate3d for transition (#32255)

* translate3d * Add important * Update unit test. * Update comment. * Update date in header.
ampproject · Jan 28, 2021 · c362c4d · c362c4d
1 parent f90e9cb
commit c362c4d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.css
@@ -1,5 +1,5 @@
 /**
- * Copyright 2020 The AMP HTML Authors. All Rights Reserved.
+ * Copyright 2021 The AMP HTML Authors. All Rights Reserved.
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -19,6 +19,15 @@ amp-story-panning-media {
   display: flex !important;
   justify-content: center !important;
   align-items: center !important;
+  /* 
+  This gives a 3d reference point for the translate3d z value on the child.
+  A reference point is necessary for the effect of 3d space.
+  The calculation to convert scale to zoom is: 
+  perspective * (zoom - 1) / zoom
+  1 is used here to simplify the calculation in updateTransform_ to be: 
+  (zoom - 1) / zoom
+  */
+  perspective: 1px !important;
 }
 
 amp-story-panning-media amp-img {

diff --git a/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js b/extensions/amp-story-panning-media/0.1/amp-story-panning-media.js
@@ -197,7 +197,7 @@ export class AmpStoryPanningMedia extends AMP.BaseElement {
     const {x, y, zoom} = panningMediaState;
     return this.mutateElement(() => {
       setImportantStyles(this.ampImgEl_, {
-        transform: `scale(${zoom}) translate(${x}%, ${y}%)`,
+        transform: `translate3d(${x}%, ${y}%, ${(zoom - 1) / zoom}px)`,
       });
     });
   }

diff --git a/extensions/amp-story-panning-media/0.1/test/test-amp-story-panning-media.js b/extensions/amp-story-panning-media/0.1/test/test-amp-story-panning-media.js
@@ -111,7 +111,9 @@ describes.realWin(
       await storeService.dispatch(Action.CHANGE_PAGE, {id: 'page1', index: 0});
       await afterRenderPromise();
       expect(panningMedia.ampImgEl_.style.transform).to.equal(
-        `scale(${positionValues.zoom}) translate(${positionValues.x}, ${positionValues.y})`
+        `translate3d(${positionValues.x}, ${positionValues.y}, ${
+          (positionValues.zoom - 1) / positionValues.zoom
+        }px)`
       );
     });
   }