diff --git a/extensions/amp-twitter/0.1/amp-twitter.css b/extensions/amp-twitter/0.1/amp-twitter.css index 9c6b37d5a1f8..960357021281 100644 --- a/extensions/amp-twitter/0.1/amp-twitter.css +++ b/extensions/amp-twitter/0.1/amp-twitter.css @@ -55,7 +55,7 @@ amp-twitter { height: 100%; } -.i-amphtml-twitter-pulse .i-amphtml-twitter-placeholder-svg { +.i-amphtml-twitter-pulse:not([i-amphtml-loading]) .i-amphtml-twitter-placeholder-svg { transition-property: transform, opacity; transition-duration: 100ms; transition-timing-function: ease-in; @@ -97,7 +97,7 @@ amp-twitter[i-amphtml-loading="done"] .i-amphtml-twitter-placeholder-svg { opacity: 0; } -.i-amphtml-twitter-pulse[i-amphtml-loading="done"] .i-amphtml-twitter-placeholder-svg { +.i-amphtml-twitter-burst[i-amphtml-loading="done"] .i-amphtml-twitter-placeholder-svg { transition-duration: 250ms; transition-timing-function: ease-out; transform: scale(12); diff --git a/extensions/amp-twitter/0.1/amp-twitter.js b/extensions/amp-twitter/0.1/amp-twitter.js index e094a5b52750..5dcff3a1d535 100644 --- a/extensions/amp-twitter/0.1/amp-twitter.js +++ b/extensions/amp-twitter/0.1/amp-twitter.js @@ -31,7 +31,7 @@ import {setStyle} from '../../../src/style'; * plusing. */ function isPulsingPlaceholder(win) { - return isExperimentOn(win, 'twitter-default-placeholder'); + return isExperimentOn(win, 'twitter-default-placeholder-pulse'); } /** @@ -45,10 +45,11 @@ function isFadingPlaceholder(win) { /** * @param {!Window} win - * @return {boolean} True if we should show the default placeholder. + * @return {boolean} True if we should show the default placeholder with + * a burst ending animation. */ -function isStaticPlaceholder(win) { - return isExperimentOn(win, 'twitter-default-placeholder-static'); +function isBurstingPlaceholder(win) { + return isExperimentOn(win, 'twitter-default-placeholder-burst'); } /** @@ -56,8 +57,7 @@ function isStaticPlaceholder(win) { * @return {boolean} True if we should show the default placeholder. */ function enableDefaultPlaceholder(win) { - return isPulsingPlaceholder(win) || isStaticPlaceholder(win) || - isFadingPlaceholder(win); + return isExperimentOn(win, 'twitter-default-placeholder'); } class AmpTwitter extends AMP.BaseElement { @@ -135,6 +135,9 @@ class AmpTwitter extends AMP.BaseElement { if (isFadingPlaceholder(this.win)) { this.element.classList.add('i-amphtml-twitter-fade'); } + if (isBurstingPlaceholder(this.win)) { + this.element.classList.add('i-amphtml-twitter-burst'); + } this.updateForLoadingState_(); listenFor(iframe, MessageType.EMBED_SIZE, data => { this.updateForSuccessState_(data['height']);