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 <[email protected]>
justeattakeaway · Jul 25, 2024 · 5df20f5 · 5df20f5
1 parent 667b174
commit 5df20f5
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git a/.changeset/eighty-candles-turn.md 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
@@ -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,