🚀 [Story performance] Disable animations in first page under experime…

…nt (#35356) * Added experiment * Change experiment rollout percentage * Add to CSI metrics * Trigger experiment with reduced-motion * Change experiment to 10%
ampproject · Jul 27, 2021 · f208239 · f208239
1 parent 9d197f7
commit f208239
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 6 deletions.
diff --git a/build-system/global-configs/canary-config.json b/build-system/global-configs/canary-config.json
@@ -21,6 +21,7 @@
   "story-ad-auto-advance": 1,
   "story-ad-placements": 1,
   "story-load-first-page-only": 0.1,
+  "story-disable-animations-first-page": 0.1,
   "amp-story-page-attachment-ui-v2": 1,
   "amp-sticky-ad-to-amp-ad": 0
 }
diff --git a/build-system/global-configs/prod-config.json b/build-system/global-configs/prod-config.json
@@ -17,6 +17,7 @@
   "amp-consent-granular-consent": 1,
   "amp-cid-backup": 1,
   "story-ad-placements": 0.01,
+  "story-disable-animations-first-page": 0.1,
   "story-load-first-page-only": 0.1,
   "amp-story-page-attachment-ui-v2": 1,
   "amp-sticky-ad-to-amp-ad": 0

diff --git a/extensions/amp-story/1.0/amp-story.js b/extensions/amp-story/1.0/amp-story.js
@@ -59,6 +59,7 @@ import {CSS} from '../../../build/amp-story-1.0.css';
 import {CommonSignals} from '#core/constants/common-signals';
 import {EventType, dispatch} from './events';
 import {Gestures} from '../../../src/gesture';
+import {prefersReducedMotion} from '#core/dom/media-query-props';
 import {HistoryState, getHistoryState, setHistoryState} from './history';
 import {InfoDialog} from './amp-story-info-dialog';
 import {Keys} from '#core/constants/key-codes';
@@ -468,6 +469,14 @@ export class AmpStory extends AMP.BaseElement {
         'story-load-first-page-only'
       );
     }
+    if (
+      isExperimentOn(this.win, 'story-disable-animations-first-page') ||
+      prefersReducedMotion(this.win)
+    ) {
+      Services.performanceFor(this.win).addEnabledExperiment(
+        'story-disable-animations-first-page'
+      );
+    }
     if (isExperimentOn(this.win, 'story-load-inactive-outside-viewport')) {
       Services.performanceFor(this.win).addEnabledExperiment(
         'story-load-inactive-outside-viewport'

diff --git a/extensions/amp-story/1.0/animation.js b/extensions/amp-story/1.0/animation.js
@@ -38,9 +38,14 @@ import {escapeCssSelectorIdent} from '#core/dom/css-selectors';
 import {getChildJsonConfig} from '../../../src/json';
 import {map, omit} from '#core/types/object';
 import {prefersReducedMotion} from '#core/dom/media-query-props';
-import {scopedQuerySelector, scopedQuerySelectorAll} from '#core/dom/query';
+import {
+  matches,
+  scopedQuerySelector,
+  scopedQuerySelectorAll,
+} from '#core/dom/query';
 import {setStyles} from '#core/dom/style';
 import {timeStrToMillis, unscaledClientRect} from './utils';
+import {isExperimentOn} from '#experiments';
 
 const TAG = 'AMP-STORY';
 
@@ -554,7 +559,10 @@ export class AnimationManager {
     this.builderPromise_ = this.createAnimationBuilderPromise_();
 
     /** @private @const {bool} */
-    this.prefersReducedMotion_ = prefersReducedMotion(ampdoc.win);
+    this.skipAnimations_ =
+      prefersReducedMotion(ampdoc.win) ||
+      (isExperimentOn(ampdoc.win, 'story-disable-animations-first-page') &&
+        matches(page, 'amp-story-page:first-of-type'));
 
     /** @private {?Array<!AnimationRunner>} */
     this.runners_ = null;
@@ -581,7 +589,7 @@ export class AnimationManager {
   applyFirstFrameOrFinish() {
     return Promise.all(
       this.getOrCreateRunners_().map((runner) =>
-        this.prefersReducedMotion_
+        this.skipAnimations_
           ? runner.applyLastFrame()
           : runner.applyFirstFrame()
       )
@@ -600,7 +608,7 @@ export class AnimationManager {
 
   /** Starts all entrance animations for the page. */
   animateIn() {
-    if (this.prefersReducedMotion_) {
+    if (this.skipAnimations_) {
       return;
     }
     this.getRunners_().forEach((runner) => runner.start());
@@ -622,15 +630,15 @@ export class AnimationManager {
 
   /** Pauses all animations in the page. */
   pauseAll() {
-    if (!this.runners_ || this.prefersReducedMotion_) {
+    if (!this.runners_ || this.skipAnimations_) {
       return;
     }
     this.getRunners_().forEach((runner) => runner.pause());
   }
 
   /** Resumes all animations in the page. */
   resumeAll() {
-    if (!this.runners_ || this.prefersReducedMotion_) {
+    if (!this.runners_ || this.skipAnimations_) {
       return;
     }
     this.getRunners_().forEach((runner) => runner.resume());