From b4ed5fd6b56bff112e6cf78cb6264b2046ba3989 Mon Sep 17 00:00:00 2001 From: Naina Raisinghani Date: Thu, 8 Nov 2018 11:15:16 -0800 Subject: [PATCH 1/2] Remove vsync guards to fx presets --- .../0.1/providers/amp-fx-presets.js | 211 ++++++------------ .../0.1/providers/fx-provider.js | 17 -- 2 files changed, 66 insertions(+), 162 deletions(-) diff --git a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js index 29f84539eccf..d87b9774d364 100644 --- a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js +++ b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js @@ -46,20 +46,11 @@ export const Presets = { const offset = (fxElement.adjustedViewportHeight - top) * adjustedFactor; fxElement.setOffset(offset); - if (fxElement.isMutateScheduled()) { - return; - } - // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement(fxElement.getElement(), - function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), - {transform: - `translateY(${fxElement.getOffset().toFixed(0)}px)`}); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), + {transform: + `translateY(${fxElement.getOffset().toFixed(0)}px)`}); }, }, 'fly-in-bottom': { @@ -84,36 +75,24 @@ export const Presets = { return; } - if (fxElement.isMutateScheduled()) { - return; - } - // only do this on the first element if (!fxElement.initialTrigger) { - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'top': `calc(${style.top} + ${fxElement.getFlyInDistance()}vh)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; - }); + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'top': `calc(${style.top} + ${fxElement.getFlyInDistance()}vh)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; } // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), { - 'transition-duration': fxElement.getDuration(), - 'transition-timing-function': fxElement.getEasing(), - 'transform': `translateY(-${fxElement.getFlyInDistance()}vh)`, - }); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), { + 'transition-duration': fxElement.getDuration(), + 'transition-timing-function': fxElement.getEasing(), + 'transform': `translateY(-${fxElement.getFlyInDistance()}vh)`, + }); }, }, 'fly-in-left': { @@ -136,37 +115,25 @@ export const Presets = { return; } - if (fxElement.isMutateScheduled()) { - return; - } - // only do this on the first element if (!fxElement.initialTrigger) { - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'left': - `calc(${style.left} - ${fxElement.getFlyInDistance()}vw)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; - }); + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'left': + `calc(${style.left} - ${fxElement.getFlyInDistance()}vw)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; } // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), { - 'transition-duration': fxElement.getDuration(), - 'transition-timing-function': fxElement.getEasing(), - 'transform': `translateX(${fxElement.getFlyInDistance()}vw)`, - }); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), { + 'transition-duration': fxElement.getDuration(), + 'transition-timing-function': fxElement.getEasing(), + 'transform': `translateX(${fxElement.getFlyInDistance()}vw)`, + }); }, }, 'fly-in-right': { @@ -189,37 +156,25 @@ export const Presets = { return; } - if (fxElement.isMutateScheduled()) { - return; - } - // only do this on the first element if (!fxElement.initialTrigger) { - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'left': - `calc(${style.left} + ${fxElement.getFlyInDistance()}vw)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; - }); + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'left': + `calc(${style.left} + ${fxElement.getFlyInDistance()}vw)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; } // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), { - 'transition-duration': fxElement.getDuration(), - 'transition-timing-function': fxElement.getEasing(), - 'transform': `translateX(-${fxElement.getFlyInDistance()}vw)`, - }); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), { + 'transition-duration': fxElement.getDuration(), + 'transition-timing-function': fxElement.getEasing(), + 'transform': `translateX(-${fxElement.getFlyInDistance()}vw)`, + }); }, }, 'fly-in-top': { @@ -244,36 +199,24 @@ export const Presets = { return; } - if (fxElement.isMutateScheduled()) { - return; - } - // only do this on the first element if (!fxElement.initialTrigger) { - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'top': `calc(${style.top} - ${fxElement.getFlyInDistance()}vh)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; - }); + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'top': `calc(${style.top} - ${fxElement.getFlyInDistance()}vh)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; } // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), { - 'transition-duration': fxElement.getDuration(), - 'transition-timing-function': fxElement.getEasing(), - 'transform': `translateY(${fxElement.getFlyInDistance()}vh)`, - }); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), { + 'transition-duration': fxElement.getDuration(), + 'transition-timing-function': fxElement.getEasing(), + 'transform': `translateY(${fxElement.getFlyInDistance()}vh)`, + }); }, }, 'fade-in': { @@ -296,22 +239,13 @@ export const Presets = { return; } - if (fxElement.isMutateScheduled()) { - return; - } - // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement( - fxElement.getElement(), function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), { - 'transition-duration': fxElement.getDuration(), - 'transition-timing-function': fxElement.getEasing(), - 'opacity': 1, - }); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), { + 'transition-duration': fxElement.getDuration(), + 'transition-timing-function': fxElement.getEasing(), + 'opacity': 1, + }); }, }, 'fade-in-scroll': { @@ -343,10 +277,6 @@ export const Presets = { return; } - if (fxElement.isMutateScheduled()) { - return; - } - // Early exit if the animation doesn't need to repeat and it is fully // opaque. if (!fxElement.hasRepeat() && fxElement.getOffset() >= 1) { @@ -361,18 +291,9 @@ export const Presets = { (marginDelta * fxElement.viewportHeight); fxElement.setOffset(offset); - if (fxElement.isMutateScheduled()) { - return; - } - // If above the threshold of trigger-position - fxElement.setIsMutateScheduled(true); - fxElement.getResources().mutateElement(fxElement.getElement(), - function() { - fxElement.setIsMutateScheduled(false); - // Translate the element offset pixels. - setStyles(fxElement.getElement(), {opacity: fxElement.getOffset()}); - }); + // Translate the element offset pixels. + setStyles(fxElement.getElement(), {opacity: fxElement.getOffset()}); }, }, }; diff --git a/extensions/amp-fx-collection/0.1/providers/fx-provider.js b/extensions/amp-fx-collection/0.1/providers/fx-provider.js index 2c2011667b69..2ea4387e4d8f 100644 --- a/extensions/amp-fx-collection/0.1/providers/fx-provider.js +++ b/extensions/amp-fx-collection/0.1/providers/fx-provider.js @@ -103,9 +103,6 @@ export class FxElement { /** @private @const {!Element} */ this.element_ = element; - /** @private {boolean} */ - this.mutateScheduled_ = false; - /** @private {number} */ this.offset_ = 0; @@ -294,13 +291,6 @@ export class FxElement { this.offset_ = offset; } - /** - * @return {boolean} - */ - isMutateScheduled() { - return this.mutateScheduled_; - } - /** * Boolean dictating whether or not the amp-fx preset has the `repeat` * attribute set. The `repeat` attribute allows the animation to be fully @@ -310,11 +300,4 @@ export class FxElement { hasRepeat() { return this.hasRepeat_; } - - /** - * @param {boolean} mutateScheduled - */ - setIsMutateScheduled(mutateScheduled) { - this.mutateScheduled_ = mutateScheduled; - } } From 059b29ec2e602731981bef41f131ae616e4e15a4 Mon Sep 17 00:00:00 2001 From: Naina Raisinghani Date: Tue, 13 Nov 2018 13:10:04 -0800 Subject: [PATCH 2/2] Add initial trigger guards --- .../0.1/providers/amp-fx-presets.js | 72 +++++++++++-------- 1 file changed, 42 insertions(+), 30 deletions(-) diff --git a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js index d87b9774d364..c3b49e490756 100644 --- a/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js +++ b/extensions/amp-fx-collection/0.1/providers/amp-fx-presets.js @@ -77,13 +77,16 @@ export const Presets = { // only do this on the first element if (!fxElement.initialTrigger) { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'top': `calc(${style.top} + ${fxElement.getFlyInDistance()}vh)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; + fxElement.getResources().mutateElement( + fxElement.getElement(), function() { + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'top': `calc(${style.top} + ${fxElement.getFlyInDistance()}vh)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; + }); } // If above the threshold of trigger-position @@ -117,14 +120,17 @@ export const Presets = { // only do this on the first element if (!fxElement.initialTrigger) { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'left': - `calc(${style.left} - ${fxElement.getFlyInDistance()}vw)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; + fxElement.getResources().mutateElement( + fxElement.getElement(), function() { + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'left': + `calc(${style.left} - ${fxElement.getFlyInDistance()}vw)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; + }); } // If above the threshold of trigger-position @@ -158,14 +164,17 @@ export const Presets = { // only do this on the first element if (!fxElement.initialTrigger) { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'left': - `calc(${style.left} + ${fxElement.getFlyInDistance()}vw)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; + fxElement.getResources().mutateElement( + fxElement.getElement(), function() { + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'left': + `calc(${style.left} + ${fxElement.getFlyInDistance()}vw)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; + }); } // If above the threshold of trigger-position @@ -201,13 +210,16 @@ export const Presets = { // only do this on the first element if (!fxElement.initialTrigger) { - const style = computedStyle(fxElement.getAmpDoc().win, - fxElement.getElement()); - setStyles(fxElement.getElement(), { - 'top': `calc(${style.top} - ${fxElement.getFlyInDistance()}vh)`, - 'visibility': 'visible', - }); - fxElement.initialTrigger = true; + fxElement.getResources().mutateElement( + fxElement.getElement(), function() { + const style = computedStyle(fxElement.getAmpDoc().win, + fxElement.getElement()); + setStyles(fxElement.getElement(), { + 'top': `calc(${style.top} - ${fxElement.getFlyInDistance()}vh)`, + 'visibility': 'visible', + }); + fxElement.initialTrigger = true; + }); } // If above the threshold of trigger-position