From 5dc86ba9c6f5cf90e0cc3030ddd6da8c8b8bebd8 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Fri, 11 Oct 2024 14:05:13 +0100 Subject: [PATCH 1/7] Display US marketing card to US users on small screens --- .../ExpandableMarketingCard.stories.tsx | 2 - .../components/ExpandableMarketingCard.tsx | 29 +++++- ...andableMarketingCardWrapper.importable.tsx | 97 +++++++++++++++++-- .../src/layouts/CommentLayout.tsx | 18 ++++ .../src/layouts/ImmersiveLayout.tsx | 18 ++++ .../src/layouts/PictureLayout.tsx | 17 ---- .../src/layouts/ShowcaseLayout.tsx | 18 ++++ .../src/layouts/StandardLayout.tsx | 18 ++++ .../logos/red-blue-banner-bottom-mobile.svg | 43 ++++++++ .../logos/red-blue-banner-faded-mobile.svg | 33 +++++++ .../logos/red-blue-banner-top-mobile.svg | 31 ++++++ 11 files changed, 295 insertions(+), 29 deletions(-) create mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg create mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg create mode 100644 dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.stories.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.stories.tsx index 8924fbcf7cf..a8a87b2721c 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.stories.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.stories.tsx @@ -32,8 +32,6 @@ export const Default = { chromatic: { viewports: [ breakpoints.mobile, - breakpoints.mobileMedium, - breakpoints.phablet, breakpoints.tablet, breakpoints.desktop, ], diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx index 01546958e18..39b14ece1af 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx @@ -24,10 +24,34 @@ interface BannersIllustrationProps { styles?: SerializedStyles; } +const smallIllustrationStyles = css` + display: inline; + ${from.leftCol} { + display: none; + } +`; +const largeIllustrationStyles = css` + display: none; + ${from.leftCol} { + display: inline; + } +`; + const BannersIllustration = ({ type, styles }: BannersIllustrationProps) => { const { assetOrigin } = useConfig(); - const src = `${assetOrigin}static/frontend/logos/red-blue-banner-${type}.svg`; - return ; + const src = `${assetOrigin}static/frontend/logos/red-blue-banner-${type}-mobile.svg`; + const largeSrc = `${assetOrigin}static/frontend/logos/red-blue-banner-${type}.svg`; + + return ( + <> + + + + ); }; const fillBarStyles = css` @@ -63,6 +87,7 @@ const summaryStyles = css` gap: ${space[3]}px; z-index: 1; width: 100%; + cursor: pointer; `; const headingStyles = css` diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index cfcb42ddf6f..45fc57db224 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx @@ -1,10 +1,35 @@ +import { css } from '@emotion/react'; import { getCookie } from '@guardian/libs'; import { useEffect, useState } from 'react'; import type { DailyArticle } from '../lib/dailyArticleCount'; import { getDailyArticleCount } from '../lib/dailyArticleCount'; import { getLocaleCode } from '../lib/getCountryCode'; +import { getZIndex } from '../lib/getZIndex'; import { useAB } from '../lib/useAB'; import { ExpandableMarketingCard } from './ExpandableMarketingCard'; +import { Hide } from './Hide'; + +const stickyContainerStyles = css` + position: sticky; + top: 0; + ${getZIndex('expandableMarketingCardOverlay')}; + animation: slidein 1.5s normal; + + @keyframes slidein { + from { + translate: -800px 0; + } + + to { + translate: 0 0; + } + } +`; + +const absoluteContainerStyles = css` + position: absolute; + width: 100%; +`; interface Props { guardianBaseURL: string; @@ -37,6 +62,8 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { const [isExpanded, setIsExpanded] = useState(false); const [isClosed, setIsClosed] = useState(false); const [isApplicableUser, setIsApplicableUser] = useState(false); + const [topOfBody, setTopOfBody] = useState(null); + const [shouldDisplayCard, setShouldDisplayCard] = useState(false); const abTestAPI = useAB()?.api; const isInVariantFree = !!abTestAPI?.isUserInVariant( @@ -57,6 +84,40 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { }); }, []); + useEffect(() => { + setTopOfBody(document.querySelector('[data-gu-name="body"]')); + }, []); + + useEffect(() => { + if (!topOfBody) return; + + /** + * If the viewport is below the top of the body, display the card immediately + */ + if (topOfBody.getBoundingClientRect().top < 0) { + setShouldDisplayCard(true); + } + + /** + * Show the card when the top of the body moves out of the viewport. + */ + const observer = new window.IntersectionObserver( + ([entry]) => { + if (!entry) return; + if (entry.isIntersecting) { + setShouldDisplayCard(true); + } + }, + { rootMargin: '0px 0px -100%' }, + ); + + observer.observe(topOfBody); + + return () => { + observer.disconnect(); + }; + }, [topOfBody]); + if (!isInEitherVariant || !isApplicableUser || isClosed) { return null; } @@ -70,13 +131,33 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { : 'Why the Guardian has no paywall'; return ( - + <> + + + + + {shouldDisplayCard && ( +
+
+ +
+
+ )} + + ); }; diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 4232f296e73..660afd560a3 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -600,6 +600,24 @@ export const CommentLayout = (props: WebProps | AppsProps) => { + {isWeb && ( + + + + + + )}
{
+ {isWeb && ( + + + + + + )} { /> - {isWeb && ( - - - - - - - - )} diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index bda4ad0f2c3..33e1e96c04a 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx @@ -580,6 +580,24 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => { + {isWeb && ( + + + + + + )} { )} + {isWeb && ( + + + + + + )} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg new file mode 100644 index 00000000000..4ded194ae58 --- /dev/null +++ b/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg @@ -0,0 +1,33 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg new file mode 100644 index 00000000000..8e80855e76a --- /dev/null +++ b/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 7f53223acad3d62018040d91525589605b9a13b3 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Fri, 11 Oct 2024 16:55:14 +0100 Subject: [PATCH 2/7] Slow down animation --- .../components/ExpandableMarketingCardWrapper.importable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index 45fc57db224..1a55f1b3971 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx @@ -13,7 +13,7 @@ const stickyContainerStyles = css` position: sticky; top: 0; ${getZIndex('expandableMarketingCardOverlay')}; - animation: slidein 1.5s normal; + animation: slidein 2s normal; @keyframes slidein { from { From d83529e04f764279c5e78e029db4188f8cfb7e07 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Fri, 11 Oct 2024 17:09:14 +0100 Subject: [PATCH 3/7] Correct banner illustrations on small screens --- .../components/ExpandableMarketingCard.tsx | 20 ++++++++++++++----- ...andableMarketingCardWrapper.importable.tsx | 8 ++++++-- ...m.svg => red-blue-large-banner-bottom.svg} | 0 ...ed.svg => red-blue-large-banner-faded.svg} | 0 ...-top.svg => red-blue-large-banner-top.svg} | 0 ...e.svg => red-blue-small-banner-bottom.svg} | 0 ...le.svg => red-blue-small-banner-faded.svg} | 0 ...bile.svg => red-blue-small-banner-top.svg} | 0 8 files changed, 21 insertions(+), 7 deletions(-) rename dotcom-rendering/src/static/logos/{red-blue-banner-bottom.svg => red-blue-large-banner-bottom.svg} (100%) rename dotcom-rendering/src/static/logos/{red-blue-banner-faded.svg => red-blue-large-banner-faded.svg} (100%) rename dotcom-rendering/src/static/logos/{red-blue-banner-top.svg => red-blue-large-banner-top.svg} (100%) rename dotcom-rendering/src/static/logos/{red-blue-banner-bottom-mobile.svg => red-blue-small-banner-bottom.svg} (100%) rename dotcom-rendering/src/static/logos/{red-blue-banner-faded-mobile.svg => red-blue-small-banner-faded.svg} (100%) rename dotcom-rendering/src/static/logos/{red-blue-banner-top-mobile.svg => red-blue-small-banner-top.svg} (100%) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx index 39b14ece1af..05aa5b9b219 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx @@ -25,13 +25,19 @@ interface BannersIllustrationProps { } const smallIllustrationStyles = css` - display: inline; + display: none; + ${from.phablet} { + display: inline; + } ${from.leftCol} { display: none; } `; const largeIllustrationStyles = css` - display: none; + display: inline; + ${from.phablet} { + display: none; + } ${from.leftCol} { display: inline; } @@ -39,12 +45,16 @@ const largeIllustrationStyles = css` const BannersIllustration = ({ type, styles }: BannersIllustrationProps) => { const { assetOrigin } = useConfig(); - const src = `${assetOrigin}static/frontend/logos/red-blue-banner-${type}-mobile.svg`; - const largeSrc = `${assetOrigin}static/frontend/logos/red-blue-banner-${type}.svg`; + const smallSrc = `${assetOrigin}static/frontend/logos/red-blue-small-banner-${type}.svg`; + const largeSrc = `${assetOrigin}static/frontend/logos/red-blue-large-banner-${type}.svg`; return ( <> - + + topOfBody.getBoundingClientRect().top < 0; + const stickyContainerStyles = css` position: sticky; top: 0; @@ -92,10 +95,11 @@ export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { if (!topOfBody) return; /** - * If the viewport is below the top of the body, display the card immediately + * It's possible that the viewport does not start at the top of the page. */ - if (topOfBody.getBoundingClientRect().top < 0) { + if (isViewportBelowTopOfBody(topOfBody)) { setShouldDisplayCard(true); + return; } /** diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-bottom.svg b/dotcom-rendering/src/static/logos/red-blue-large-banner-bottom.svg similarity index 100% rename from dotcom-rendering/src/static/logos/red-blue-banner-bottom.svg rename to dotcom-rendering/src/static/logos/red-blue-large-banner-bottom.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-faded.svg b/dotcom-rendering/src/static/logos/red-blue-large-banner-faded.svg similarity index 100% rename from dotcom-rendering/src/static/logos/red-blue-banner-faded.svg rename to dotcom-rendering/src/static/logos/red-blue-large-banner-faded.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-top.svg b/dotcom-rendering/src/static/logos/red-blue-large-banner-top.svg similarity index 100% rename from dotcom-rendering/src/static/logos/red-blue-banner-top.svg rename to dotcom-rendering/src/static/logos/red-blue-large-banner-top.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-small-banner-bottom.svg similarity index 100% rename from dotcom-rendering/src/static/logos/red-blue-banner-bottom-mobile.svg rename to dotcom-rendering/src/static/logos/red-blue-small-banner-bottom.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-small-banner-faded.svg similarity index 100% rename from dotcom-rendering/src/static/logos/red-blue-banner-faded-mobile.svg rename to dotcom-rendering/src/static/logos/red-blue-small-banner-faded.svg diff --git a/dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg b/dotcom-rendering/src/static/logos/red-blue-small-banner-top.svg similarity index 100% rename from dotcom-rendering/src/static/logos/red-blue-banner-top-mobile.svg rename to dotcom-rendering/src/static/logos/red-blue-small-banner-top.svg From 2218af5fc4d56e40b025c49662f9e52109909bc7 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 15 Oct 2024 15:50:28 +0100 Subject: [PATCH 4/7] refactor --- .../components/ExpandableMarketingCard.tsx | 6 ++- ...andableMarketingCardWrapper.importable.tsx | 50 ++++++++++--------- 2 files changed, 31 insertions(+), 25 deletions(-) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx index 05aa5b9b219..8cc99e0f5bb 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx @@ -97,6 +97,9 @@ const summaryStyles = css` gap: ${space[3]}px; z-index: 1; width: 100%; +`; +const contractedSummaryStyles = css` + ${summaryStyles} cursor: pointer; `; @@ -197,7 +200,6 @@ interface Props { setIsClosed: Dispatch>; } -// todo - semantic html accordion-details? export const ExpandableMarketingCard = ({ guardianBaseURL, heading, @@ -217,7 +219,7 @@ export const ExpandableMarketingCard = ({ styles={imageTopStyles} />
{ diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index f087b116819..b729cf7fbf7 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx @@ -12,6 +12,28 @@ import { Hide } from './Hide'; const isViewportBelowTopOfBody = (topOfBody: Element) => topOfBody.getBoundingClientRect().top < 0; +const isFirstArticle = () => { + const [dailyCount = {} as DailyArticle] = getDailyArticleCount() ?? []; + return Object.keys(dailyCount).length === 0 || dailyCount.count <= 1; +}; + +const isNewUSUser = async () => { + const isUserInUS = (await getLocaleCode()) === 'US'; + if (!isUserInUS) { + return false; + } + + // Exclude users who have selected a non-US edition. + const editionCookie = getCookie({ name: 'GU_EDITION' }); + const hasUserSelectedNonUSEdition = + !!editionCookie && editionCookie !== 'US'; + + // This check must happen AFTER we've ensured that the user is in the US. + const isNewUser = isFirstArticle(); + + return !hasUserSelectedNonUSEdition && !isNewUser; +}; + const stickyContainerStyles = css` position: sticky; top: 0; @@ -38,34 +60,16 @@ interface Props { guardianBaseURL: string; } -const isFirstArticle = () => { - const [dailyCount = {} as DailyArticle] = getDailyArticleCount() ?? []; - return Object.keys(dailyCount).length === 0 || dailyCount.count <= 1; -}; - -const isNewUSUser = async () => { - const isUserInUS = (await getLocaleCode()) === 'US'; - if (!isUserInUS) { - return false; - } - - // Exclude users who have selected a non-US edition. - const editionCookie = getCookie({ name: 'GU_EDITION' }); - const hasUserSelectedNonUSEdition = - !!editionCookie && editionCookie !== 'US'; - - // This check must happen AFTER we've ensured that the user is in the US. - const isNewUser = isFirstArticle(); - - return !hasUserSelectedNonUSEdition && !isNewUser; -}; - -// todo - semantic html accordion-details? export const ExpandableMarketingCardWrapper = ({ guardianBaseURL }: Props) => { const [isExpanded, setIsExpanded] = useState(false); const [isClosed, setIsClosed] = useState(false); const [isApplicableUser, setIsApplicableUser] = useState(false); const [topOfBody, setTopOfBody] = useState(null); + + /** + * On screen sizes below leftCol (<1140px), only display the card + * when the user scrolls past the top of the article. + */ const [shouldDisplayCard, setShouldDisplayCard] = useState(false); const abTestAPI = useAB()?.api; From 0c2893cb0b650bc361ee97fa7310d5283f4b7388 Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Tue, 15 Oct 2024 16:13:25 +0100 Subject: [PATCH 5/7] add link tracking --- dotcom-rendering/src/components/ExpandableMarketingCard.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx index 8cc99e0f5bb..dde37329e26 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCard.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCard.tsx @@ -219,6 +219,7 @@ export const ExpandableMarketingCard = ({ styles={imageTopStyles} />

{heading}

Date: Tue, 15 Oct 2024 16:14:14 +0100 Subject: [PATCH 6/7] ensure animation ends off screen. fix typo --- .../components/ExpandableMarketingCardWrapper.importable.tsx | 4 ++-- dotcom-rendering/src/layouts/CommentLayout.tsx | 2 +- dotcom-rendering/src/layouts/ImmersiveLayout.tsx | 2 +- dotcom-rendering/src/layouts/ShowcaseLayout.tsx | 2 +- dotcom-rendering/src/layouts/StandardLayout.tsx | 2 +- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index b729cf7fbf7..006220d3dbf 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx @@ -38,11 +38,11 @@ const stickyContainerStyles = css` position: sticky; top: 0; ${getZIndex('expandableMarketingCardOverlay')}; - animation: slidein 2s normal; + animation: slidein 2.5s linear; @keyframes slidein { from { - translate: -800px 0; + translate: -1200px 0; } to { diff --git a/dotcom-rendering/src/layouts/CommentLayout.tsx b/dotcom-rendering/src/layouts/CommentLayout.tsx index 660afd560a3..bba543f4b72 100644 --- a/dotcom-rendering/src/layouts/CommentLayout.tsx +++ b/dotcom-rendering/src/layouts/CommentLayout.tsx @@ -606,7 +606,7 @@ export const CommentLayout = (props: WebProps | AppsProps) => { priority="enhancement" /** * We display the card immediately if the viewport is below the top of - * the article body, so we must use "idled" instead of "visible". + * the article body, so we must use "idle" instead of "visible". */ defer={{ until: 'idle' }} > diff --git a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx index 082fcdb1372..4654b9256c2 100644 --- a/dotcom-rendering/src/layouts/ImmersiveLayout.tsx +++ b/dotcom-rendering/src/layouts/ImmersiveLayout.tsx @@ -686,7 +686,7 @@ export const ImmersiveLayout = (props: WebProps | AppProps) => { priority="enhancement" /** * We display the card immediately if the viewport is below the top of - * the article body, so we must use "idled" instead of "visible". + * the article body, so we must use "idle" instead of "visible". */ defer={{ until: 'idle' }} > diff --git a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx index 33e1e96c04a..7b1b281a22b 100644 --- a/dotcom-rendering/src/layouts/ShowcaseLayout.tsx +++ b/dotcom-rendering/src/layouts/ShowcaseLayout.tsx @@ -586,7 +586,7 @@ export const ShowcaseLayout = (props: WebProps | AppsProps) => { priority="enhancement" /** * We display the card immediately if the viewport is below the top of - * the article body, so we must use "idled" instead of "visible". + * the article body, so we must use "idle" instead of "visible". */ defer={{ until: 'idle' }} > diff --git a/dotcom-rendering/src/layouts/StandardLayout.tsx b/dotcom-rendering/src/layouts/StandardLayout.tsx index e960adaff15..1ac626aa308 100644 --- a/dotcom-rendering/src/layouts/StandardLayout.tsx +++ b/dotcom-rendering/src/layouts/StandardLayout.tsx @@ -738,7 +738,7 @@ export const StandardLayout = (props: WebProps | AppProps) => { priority="enhancement" /** * We display the card immediately if the viewport is below the top of - * the article body, so we must use "idled" instead of "visible". + * the article body, so we must use "idle" instead of "visible". */ defer={{ until: 'idle' }} > From f5e3d90372d1f83b652f01bb903bdc014d12209a Mon Sep 17 00:00:00 2001 From: Dominik Lander Date: Fri, 18 Oct 2024 10:10:55 +0100 Subject: [PATCH 7/7] Use transform over transition --- .../ExpandableMarketingCardWrapper.importable.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx index 006220d3dbf..0c59df7bcde 100644 --- a/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx +++ b/dotcom-rendering/src/components/ExpandableMarketingCardWrapper.importable.tsx @@ -38,15 +38,15 @@ const stickyContainerStyles = css` position: sticky; top: 0; ${getZIndex('expandableMarketingCardOverlay')}; - animation: slidein 2.5s linear; + animation: slidein 2.4s linear; @keyframes slidein { from { - translate: -1200px 0; + transform: translateX(-1200px); } to { - translate: 0 0; + transform: translateX(0); } } `;