From 5df20f5f65bb5a5193701d228638f49e5459513c Mon Sep 17 00:00:00 2001 From: Xander Marjoram Date: Tue, 23 Jul 2024 13:49:37 +0100 Subject: [PATCH] feat(pie-cookie-banner): DSW-2210 add entrance animation variants (#1579) * feat(pie-cookie-banner): DSW-2210 add entrance animation variants * productionise animation variant 3 * revert line breaks * do not animate for prefers reduced motion --------- Co-authored-by: personal --- .changeset/eighty-candles-turn.md | 5 +++++ .../pie-cookie-banner/src/cookie-banner.scss | 10 ++++++++++ 2 files changed, 15 insertions(+) create mode 100644 .changeset/eighty-candles-turn.md diff --git a/.changeset/eighty-candles-turn.md b/.changeset/eighty-candles-turn.md new file mode 100644 index 0000000000..942250b176 --- /dev/null +++ b/.changeset/eighty-candles-turn.md @@ -0,0 +1,5 @@ +--- +"@justeattakeaway/pie-cookie-banner": minor +--- + +[Added] - An entrance animation to the cookie banner that makes it slide into the viewport from below. diff --git a/packages/components/pie-cookie-banner/src/cookie-banner.scss b/packages/components/pie-cookie-banner/src/cookie-banner.scss index 892b8d1065..73f63c89b0 100644 --- a/packages/components/pie-cookie-banner/src/cookie-banner.scss +++ b/packages/components/pie-cookie-banner/src/cookie-banner.scss @@ -46,6 +46,16 @@ $breakpoint-wide: 700px; &[isCookieBannerHidden] { display: none; } + + @media (prefers-reduced-motion: no-preference) { + @keyframes animate-enter { + 0% { transform: translate3d(0, 75%, 0); } + + 100% { transform: translate3d(0, 0, 0); } + } + + animation: 0.5s animate-enter ease-out; + } } .c-cookieBanner-title,