add gsap for animations, improve fade out transition

ashharrison90 · Nov 18, 2023 · f6b34ba · f6b34ba
1 parent e6f1768
commit f6b34ba
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
diff --git 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",