Added window loader for gsap

components/footer/Footer.tsx

@@ -8,7 +8,7 @@ import Footer_SocialLinks from '@nav/Nav_SocialLinks'
 import Footer_Croissant from 'components/footer/Footer_Croissant'
 import nav_footer_main from '@data/nav_footer_main'
 import nav_footer_sub from '@data/nav_footer_sub'
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import gsap from 'gsap'
 import H3 from '@typography/H3'
 import Obfuscate from 'react-obfuscate'
@@ -19,14 +19,16 @@ import services from '@data/services'
 import { m } from 'framer-motion'
 import { LazyMotion } from 'framer-motion'
 import { domMax } from 'framer-motion'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 export const Footer: NextPage = () => {
   const [testModalOpen, setTestModal] = useState(false)
 
   const updateModal = () => {
     setTestModal(!testModalOpen)
   }
   // GSAP FOR MODAL
-  useEffect(() => {
+
+  useIsomorphicLayoutEffect(() => {
     if (!testModalOpen) gsap.to('#croissantModal', 0.3, { autoAlpha: 0 })
     else if (testModalOpen) gsap.to('#croissantModal', 0.3, { autoAlpha: 1 })
     return () => {}
@@ -35,10 +37,7 @@ export const Footer: NextPage = () => {
   const year = new Date().getFullYear()
   return (
     <div>
-      <footer
-        className='relative bg-peach px-6 lg:px-12 py-12 xl:py-24 mb-4'
-        id='footer'
-      >
+      <footer className='relative bg-peach px-6 lg:px-12 py-12 xl:py-24 mb-4' id='footer'>
         <section
           id='croissantModal'
           className='transform-gpu will-change-transform absolute w-full h-full top-0 left-0 bg-peach z-30'

components/nav/Nav_FullscreenMenu.tsx

@@ -1,8 +1,9 @@
-import { useRef, useEffect } from 'react'
+import { useRef } from 'react'
 import { gsap } from 'gsap'
 import Nav_FullScreenMenu_RightCol from '@nav/Nav_FullScreenMenu_RightCol'
 import Nav_FullScreenMenu_MiddleCol from '@nav/Nav_FullScreenMenu_MiddleCol'
 import Nav_FullScreenMenu_LeftCol from '@nav/Nav_FullScreenMenu_LeftCol'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 
 //Public Dev Note: The html and css for the hamburger nav is forked from Mikael Ainalem's Flippin' Burgers pen: https://codepen.io/ainalem/pen/LJYRxz All credit goes to him <3
 
@@ -14,7 +15,7 @@ function Nav_FullscreenMenu({ isActive, onModalUpdate }) {
     onModalUpdate(false)
   }
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!isActive) {
       document.body.classList.remove('overflow-y-hidden')
       gsap.to(fsNavRef.current, {

components/nav/Navigation.tsx

@@ -1,10 +1,11 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import Link from 'next/link'
-import gsap from 'gsap/dist/gsap'
+import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 import Nav_HamburgerNav from '@nav/Nav_HamburgerMenu'
 import cn from 'classnames'
 import Nav_FullscreenMenu from './Nav_FullscreenMenu'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 gsap.registerPlugin(ScrollTrigger)
 
 export default function Navbar() {
@@ -50,7 +51,7 @@ export default function Navbar() {
   }
 
   //scrolly stuff
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     let boxes = [box1.current, box2.current, box3.current, hamRef.current]
     gsap.to(el.current, {
       autoAlpha: 1,

components/nav/Navigation_NoCallouts.tsx

@@ -1,8 +1,9 @@
-import { useEffect, useRef } from 'react'
+import { useRef } from 'react'
 import Link from 'next/link'
-import { gsap } from 'gsap/dist/gsap'
+import { gsap } from 'gsap'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 import Nav_HamburgerNav from '@nav/Nav_HamburgerMenu'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 gsap.registerPlugin(ScrollTrigger)
 
 export default function Navbar() {
@@ -37,7 +38,7 @@ export default function Navbar() {
   }
 
   //scrolly stuff
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     gsap.set(logo.current, { y: -140, scale: 0.8 })
     gsap.set(logoWrapper.current, { height: 80, width: 300, ease: 'back.inOut' })
     gsap.set(line2.current, { scale: 0.75, x: -26, y: -12, duration: 0.25 })

components/nav/Navigation_Store.tsx

@@ -1,13 +1,14 @@
 import useCart from '@hooks/useCart'
 
 gsap.registerPlugin(ScrollTrigger)
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import Link from 'next/link'
-import gsap from 'gsap/dist/gsap'
+import gsap from 'gsap'
 import { ScrollTrigger } from 'gsap/dist/ScrollTrigger'
 import Nav_HamburgerNav from '@nav/Nav_HamburgerMenu'
 import cn from 'classnames'
 import Nav_FullscreenMenu from './Nav_FullscreenMenu'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 const Navigation_Store = () => {
   const [isHamActive, setHamToggle] = useState(false)
   const { data: cart } = useCart()
@@ -52,7 +53,7 @@ const Navigation_Store = () => {
   }
 
   //scrolly stuff
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     let boxes = [box1.current, box2.current, box3.current, hamRef.current]
     gsap.to(el.current, {
       autoAlpha: 1,

components/pageSpecific/contact/Contact_HangOut.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from 'react'
 import StrokeText from '@parts/StrokeText'
 import Link from 'next/link'
 import PageSection from '@parts/PageSection'
@@ -7,8 +6,9 @@ import H2 from '@typography/H2'
 import cn from 'classnames'
 import gsap from 'gsap'
 import SocialUrls_Contact from '@data/SocialUrls_Contact'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 function Contact_HangOut() {
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     gsap.set('.animate-horizontal', { x: 0 })
     const headerTL = gsap
       .timeline({ repeat: -1 })

components/pageSpecific/home/Home_WhoTheHeck.tsx

@@ -44,7 +44,7 @@ function Home_WhoTheHeck() {
           <div className='hidden md:block absolute w-full h-full z-10 bg-cream top-0 left-0'>
             <div className='relative w-full h-full'>
               <ReactPlayer
-                url={`${process.env.NEXT_PUBLIC_IMG_PREFIX}/img/pixel_bakery_reel_bg.mp4`}
+                url={`${process.env.NEXT_PUBLIC_IMG_PREFIX}/img/pixel_bakery_reel_bg_1.mp4`}
                 width='100%'
                 height='100%'
                 playing={true}

components/pageSpecific/onboarding/Onboarding_Expectations.tsx

@@ -3,10 +3,10 @@ import PageSection from '@parts/PageSection'
 import H2 from '@typography/H2'
 import Onboarding_ExpectationsRow from './Onboarding_Expectations_Row'
 import { gsap } from 'gsap'
-import { useEffect } from 'react'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 
 function Onboarding_Expectations() {
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     gsap.set('#expectation-1 .expect-numb', { y: -200, rotation: gsap.utils.random(0, 15) })
     gsap.set('#expectation-2 .expect-numb', { x: -100, rotation: 5 })
     gsap.set('#expectation-3 .expect-numb', {

components/pageSpecific/work/Work_Portfolio_Card.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import { useEffect, useState } from 'react'
+import { useState } from 'react'
 import Image from 'next/image'
 import gsap from 'gsap'
 import Link from 'next/link'
@@ -8,6 +8,7 @@ import cn from 'classnames'
 import dynamic from 'next/dynamic'
 const ReactPlayer = dynamic(() => import('react-player'), { ssr: false })
 import Shimmer from '@lib/Shimmer'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 // type MediaType = HTMLVideoElement | HTMLAudioElement
 function Work_Portfolio_Card({ project }) {
   const [isHovered, setHover] = useState(false)
@@ -22,7 +23,7 @@ function Work_Portfolio_Card({ project }) {
     setHover(!isHovered)
   }
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     tl.from(`#${projID_title} .detail`, {
       stagger: 0.25,
       y: 30,
@@ -46,7 +47,7 @@ function Work_Portfolio_Card({ project }) {
     }
   }, [])
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (isHovered) {
       tl.play()
     } else if (!isHovered) {

components/parts/carousel/Carousel_Modal.tsx

@@ -1,26 +1,8 @@
 import { DownloadIcon, CopyIcon } from '@images/UI_Icons'
 import Close from '@images/Close'
-import { useEffect } from 'react'
 import Image from 'next/image'
 
 const Carousel_Modal = ({ alt }) => {
-  useEffect(() => {
-    // if (!isActive) {
-    //   document.body.classList.remove('overflow-y-hidden')
-    //   gsap.to(fsNavRef.current, {
-    //     autoAlpha: 0,
-    //   })
-    // } else {
-    //   gsap.to(fsNavRef.current, {
-    //     autoAlpha: 1,
-    //   })
-    document.body.classList.add('overflow-y-hidden')
-    // }
-    // return () => {
-    //   gsap.killTweensOf(fsNavRef.current)
-    //   gsap.killTweensOf(el.current)
-    // }
-  }, [])
   return (
     <div className=' fixed left-0 top-0 bottom-0 right-0 h-screen w-screen z-50 bg-wine-400 bg-opacity-75 backdrop-blur-md '>
       <div className='z-50 absolute right-4 top-4 '>

components/store/Store_TheGoods.tsx

@@ -1,9 +1,9 @@
-import { useEffect } from 'react'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 import gsap from 'gsap'
 
 const Store_TheGoods = () => {
   // BEGIN GSAP
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     gsap.set('.anim-header .anim-span', { y: 20 })
     const tl_loadingModal = gsap.timeline({
       defaults: {

components/utility/BackToTop.tsx

@@ -1,12 +1,13 @@
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import gsap from 'gsap'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 
 function BackToTop() {
   const [showTopButton, setShowTopBtn] = useState(false)
   const elem = useRef(null)
   const pointer = useRef(null)
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     // Button is displayed after scrolling for 500 pixels
     const toggleVisibility = () => {
       if (window.pageYOffset > 500) {
@@ -19,7 +20,7 @@ function BackToTop() {
     return () => window.removeEventListener('scroll', toggleVisibility)
   }, [])
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (!showTopButton) {
       gsap.to(elem.current, 0.75, { autoAlpha: 0 })
     } else if (showTopButton) {

hooks/useLoadingModal.tsx

@@ -1,9 +1,9 @@
 import gsap from 'gsap'
-import { useEffect } from 'react'
+import { useIsomorphicLayoutEffect } from '@lib/useIsomorphicLayoutEffect'
 
 export default function useLoadingModal() {
   // BEGIN GSAP
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     gsap.set('.modal-loading .modal-loading-span', { y: 20 })
     let tl_loadingModal = gsap.timeline({
       defaults: {

lib/useIsomorphicLayoutEffect.ts

@@ -0,0 +1,3 @@
+import { useEffect, useLayoutEffect } from 'react'
+
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect