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,