From f6b34ba9b551ce798ae11047ba150b1a17390dcf Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Sat, 18 Nov 2023 16:11:05 +0000
Subject: [PATCH] add gsap for animations, improve fade out transition

---
 components/Layout/Layout.module.scss         | 4 +++-
 components/Layout/Layout.tsx                 | 7 ++++++-
 components/PostLayout/PostLayout.module.scss | 4 ++--
 components/PostLayout/PostLayout.tsx         | 8 ++++++++
 package-lock.json                            | 7 +++++++
 package.json                                 | 1 +
 6 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/components/Layout/Layout.module.scss b/components/Layout/Layout.module.scss
index 9ddd5cb8..ab9ffe61 100644
--- a/components/Layout/Layout.module.scss
+++ b/components/Layout/Layout.module.scss
@@ -18,7 +18,9 @@
   height: 100%;
   transform-origin: bottom right;
   transform: translateZ(0);
-  transition: background-color 0.5s linear;
+  transition:
+    backdrop-filter 200ms linear,
+    background-color 200ms linear;
   width: 100%;
 }
 
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
index 4090e54d..a4065356 100644
--- a/components/Layout/Layout.tsx
+++ b/components/Layout/Layout.tsx
@@ -76,7 +76,12 @@ export default function Layout({
             [styles.blur]: blurBackground,
           })}
           style={{
-            backgroundColor: `rgba(var(--hero-background-rgb), ${backgroundContentFade})`,
+            backgroundColor: `rgba(var(--hero-background-rgb), ${
+              Math.max(0, backgroundContentFade - 0.2) * 0.5
+            })`,
+            backdropFilter: `blur(${
+              Math.max(0, backgroundContentFade - 0.2) * 20
+            }px)`,
           }}
         >
           <div
diff --git a/components/PostLayout/PostLayout.module.scss b/components/PostLayout/PostLayout.module.scss
index 47f2db79..e2b2cb67 100644
--- a/components/PostLayout/PostLayout.module.scss
+++ b/components/PostLayout/PostLayout.module.scss
@@ -34,7 +34,7 @@
   }
 
   :global(.hljs) {
-    @media screen and (min-width: 768px) {
+    @media screen and (width >= 768px) {
       margin: 1em;
     }
   }
@@ -75,5 +75,5 @@
 
 .padder {
   box-shadow: inset 0 0 60px 0 black;
-  height: 50vh;
+  height: 100%;
 }
diff --git a/components/PostLayout/PostLayout.tsx b/components/PostLayout/PostLayout.tsx
index 87f35145..cf17c438 100644
--- a/components/PostLayout/PostLayout.tsx
+++ b/components/PostLayout/PostLayout.tsx
@@ -1,3 +1,4 @@
+import { gsap } from 'gsap'
 import hljs from 'highlight.js/lib/core'
 import bash from 'highlight.js/lib/languages/bash'
 import javascript from 'highlight.js/lib/languages/javascript'
@@ -10,6 +11,7 @@ import { ReactNode, useContext, useEffect, useRef } from 'react'
 import { ThemeContext } from '../../context/ThemeContext/ThemeContext'
 import { PostMetadata } from '../../lib/postsApi'
 import Layout from '../Layout/Layout'
+import layoutStyles from '../Layout/Layout.module.scss'
 import PostTitle from '../PostTitle/PostTitle'
 
 import styles from './PostLayout.module.scss'
@@ -31,6 +33,12 @@ export default function PostLayout({ children, metadata }: Props) {
 
   useEffect(() => {
     hljs.highlightAll()
+    gsap.from(`.${layoutStyles.foregroundContentRef}`, {
+      duration: 0.5,
+      minHeight: '100%',
+      ease: 'back',
+      delay: 0.1,
+    })
   }, [])
 
   useEffect(() => {
diff --git a/package-lock.json b/package-lock.json
index 354c5a60..1b3d4d4f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -43,6 +43,7 @@
         "eslint-plugin-react": "^7.32.2",
         "eslint-plugin-react-hooks": "^4.6.0",
         "eslint-plugin-storybook": "^0.6.11",
+        "gsap": "^3.12.2",
         "highlight.js": "^11.6.0",
         "husky": "^8.0.1",
         "identity-obj-proxy": "^3.0.0",
@@ -19266,6 +19267,12 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/gsap": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/gsap/-/gsap-3.12.2.tgz",
+      "integrity": "sha512-EkYnpG8qHgYBFAwsgsGEqvT1WUidX0tt/ijepx7z8EUJHElykg91RvW1XbkT59T0gZzzszOpjQv7SE41XuIXyQ==",
+      "dev": true
+    },
     "node_modules/gunzip-maybe": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/gunzip-maybe/-/gunzip-maybe-1.4.2.tgz",
diff --git a/package.json b/package.json
index 0ccdf826..2157c1f4 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.11",
+    "gsap": "^3.12.2",
     "highlight.js": "^11.6.0",
     "husky": "^8.0.1",
     "identity-obj-proxy": "^3.0.0",