not even sure

app/(pages)/(components)/page-transition/transition.context.js

@@ -0,0 +1,25 @@
+'use client'
+
+import gsap from 'gsap'
+import { createContext, useState } from 'react'
+
+const TransitionContext = createContext({})
+
+const TransitionProvider = ({ children }) => {
+  const [timeline, setTimeline] = useState(() =>
+    gsap.timeline({ paused: true }),
+  )
+
+  return (
+    <TransitionContext.Provider
+      value={{
+        timeline,
+        setTimeline,
+      }}
+    >
+      {children}
+    </TransitionContext.Provider>
+  )
+}
+
+export { TransitionContext, TransitionProvider }

app/(pages)/(components)/wrapper/index.js

@@ -1,29 +1,37 @@
 import cn from 'clsx'
 import { Lenis } from 'libs/lenis'
 import { Canvas } from 'libs/webgl/components/canvas'
+import { forwardRef } from 'react'
 import { Footer } from '../footer'
 import { Navigation } from '../navigation'
 import s from './wrapper.module.scss'
 
-export function Wrapper({
-  children,
-  theme = 'light',
-  lenis = true,
-  lenisOptions = {},
-  webgl = false,
-  className,
-}) {
-  return (
-    <>
-      {lenis && <Lenis root options={lenisOptions} />}
-      {webgl && <Canvas root />}
-      <div className={cn(s.wrapper, `theme-${theme}`, className)}>
-        <Navigation />
-        <main role="main" className={s.main}>
-          {children}
-        </main>
-        <Footer />
-      </div>
-    </>
-  )
-}
+export const Wrapper = forwardRef(
+  (
+    {
+      children,
+      theme = 'light',
+      lenis = true,
+      lenisOptions = {},
+      webgl = false,
+      className,
+    },
+    ref,
+  ) => {
+    return (
+      <>
+        {lenis && <Lenis root options={lenisOptions} />}
+        <div className={cn(s.wrapper, `theme-${theme}`, className)}>
+          <Navigation />
+          <main ref={ref} role="main" className={s.main}>
+            {webgl && <Canvas root />}
+            {children}
+          </main>
+          <Footer />
+        </div>
+      </>
+    )
+  },
+)
+
+Wrapper.displayName = 'Wrapper'

app/(pages)/home/home.module.scss

@@ -1,4 +1,18 @@
 .page {
   text-transform: uppercase;
   font-family: var(--font-ibm-plex-mono);
+
+  .inner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    flex-grow: 1;
+    width: 50%;
+    margin: auto;
+
+    @include mobile {
+      padding: 0 mobile-vw(16px);
+    }
+  }
 }

app/(pages)/home/page.js

@@ -1,10 +1,52 @@
+'use client'
+
+import { useGSAP } from '@gsap/react'
+import gsap from 'gsap'
+import { useContext, useRef } from 'react'
+import { TransitionContext } from '../(components)/page-transition/transition.context'
 import { Wrapper } from '../(components)/wrapper'
 import s from './home.module.scss'
 
+gsap.registerPlugin(useGSAP)
+
 export default function Home() {
+  const { timeline } = useContext(TransitionContext)
+  const container = useRef(null)
+
+  useGSAP(
+    () => {
+      gsap.fromTo(
+        'p',
+        { y: 30, opacity: 0 },
+        { y: 0, opacity: 1, stagger: 0.25 },
+      )
+      timeline.add(gsap.to(container.current, { opacity: 0 }))
+    },
+    { scope: container },
+  )
+
   return (
-    <Wrapper theme="red" className={s.page}>
-      {/* content  */}
+    <Wrapper ref={container} theme="red" className={s.page}>
+      <section className={s.inner}>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          Necessitatibus, nobis. Adipisci debitis maiores dolorem optio
+          architecto omnis dolor dolores autem. Vel doloribus, placeat ipsam
+          harum quasi velit cumque dignissimos doloremque?
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          Necessitatibus, nobis. Adipisci debitis maiores dolorem optio
+          architecto omnis dolor dolores autem. Vel doloribus, placeat ipsam
+          harum quasi velit cumque dignissimos doloremque?
+        </p>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit.
+          Necessitatibus, nobis. Adipisci debitis maiores dolorem optio
+          architecto omnis dolor dolores autem. Vel doloribus, placeat ipsam
+          harum quasi velit cumque dignissimos doloremque?
+        </p>
+      </section>
     </Wrapper>
   )
 }

app/(pages)/hubspot/page.js

@@ -1,14 +1,48 @@
+'use client'
+
+import { useGSAP } from '@gsap/react'
+import gsap from 'gsap'
 import { Form } from 'libs/form'
 import { getForm } from 'libs/hubspot-forms/fetch-form'
+import { useContext, useEffect, useRef } from 'react'
+import { TransitionContext } from '../(components)/page-transition/transition.context'
 import { Wrapper } from '../(components)/wrapper'
 import { Subscribe } from './(components)/subscribe'
 import s from './hubspot.module.scss'
 
-export default async function Hubspot() {
-  const { form } = await getForm(process.env.NEXT_HUSBPOT_FORM_ID)
+gsap.registerPlugin(useGSAP)
+
+export default function Hubspot() {
+  const { form } = getForm(process.env.NEXT_HUSBPOT_FORM_ID)
+  const { timeline } = useContext(TransitionContext)
+  const container = useRef(null)
+
+  useGSAP(
+    () => {
+      const targets = gsap.utils.toArray(['p', 'form'])
+
+      gsap.fromTo(
+        targets,
+        { x: 30, opacity: 0 },
+        { x: 0, opacity: 1, stagger: 0.25 },
+      )
+      timeline.add(gsap.to(container.current, { opacity: 0 }))
+    },
+    { scope: container },
+  )
+
+  useEffect(() => {
+    const currentContainer = container.current
+
+    return () => {
+      if (currentContainer) {
+        timeline.to(currentContainer, { opacity: 0, duration: 0.5 })
+      }
+    }
+  }, [timeline, container])
 
   return (
-    <Wrapper theme="red" className={s.page}>
+    <Wrapper ref={container} theme="red" className={s.page}>
       <div className={s.inner}>
         <p className={s.title}>subscribe for more Satūs</p>
         <Form

app/(pages)/layout.js

@@ -8,6 +8,7 @@ import AppData from '../../package.json'
 
 import 'styles/global.scss'
 import { fonts } from '../fonts'
+import { TransitionProvider } from './(components)/page-transition/transition.context'
 
 const APP_NAME = AppData.name
 const APP_DEFAULT_TITLE = 'Satūs'
@@ -70,7 +71,7 @@ export default async function Layout({ children }) {
       {GTM_ID && <GoogleTagManager gtmId={GTM_ID} />}
       <body>
         <RealViewport />
-        {children}
+        <TransitionProvider>{children}</TransitionProvider>
         <Debug />
         <GSAP />
       </body>

app/(pages)/r3f/page.js

@@ -1,12 +1,37 @@
+'use client'
+
+import { useGSAP } from '@gsap/react'
+import gsap from 'gsap'
 import { TheatreProjectProvider } from 'libs/theatre'
+import { useContext, useRef } from 'react'
+import { TransitionContext } from '../(components)/page-transition/transition.context'
 import { Wrapper } from '../(components)/wrapper'
 import { Box } from './(components)/box'
 import s from './r3f.module.scss'
 
-export default function Home() {
+gsap.registerPlugin(useGSAP)
+
+export default function R3fPage() {
+  const { timeline } = useContext(TransitionContext)
+  const container = useRef(null)
+
+  useGSAP(
+    () => {
+      const targets = gsap.utils.toArray(['div'])
+
+      gsap.fromTo(
+        targets,
+        { y: 30, opacity: 0 },
+        { y: 0, opacity: 1, stagger: 0.25 },
+      )
+      timeline.add(gsap.to(container.current, { opacity: 0 }))
+    },
+    { scope: container },
+  )
+
   return (
     <TheatreProjectProvider id="Satus-R3f" config="/config/Satus-R3f.json">
-      <Wrapper theme="red" className={s.page} webgl={true}>
+      <Wrapper ref={container} theme="red" className={s.page} webgl={true}>
         <Box />
       </Wrapper>
     </TheatreProjectProvider>

app/(pages)/template.js

@@ -1,5 +1,30 @@
-import { PageTransition } from 'app/(pages)/(components)/page-transition'
+'use client'
 
-export default function Template({ children }) {
-  return <PageTransition>{children}</PageTransition>
+import { useGSAP } from '@gsap/react'
+
+import gsap from 'gsap'
+
+import { useContext, useEffect, useState } from 'react'
+import { TransitionContext } from './(components)/page-transition/transition.context'
+
+gsap.registerPlugin(useGSAP)
+
+export default function Template(props) {
+  const { children } = props
+  const [displayChildren, setDisplayChildren] = useState(children)
+  const { timeline } = useContext(TransitionContext)
+
+  useEffect(() => {
+    console.log('pause', props)
+    timeline.pause().clear()
+    return () => {
+      console.log('play', props)
+      timeline.play().then(() => {
+        window.scrollTo(0, 0)
+        setDisplayChildren(children)
+      })
+    }
+  }, [children])
+
+  return displayChildren
 }

package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@darkroom.engineering/hamo": "0.6.42",
     "@darkroom.engineering/tempus": "0.0.46",
+    "@gsap/react": "^2.1.1",
     "@next/third-parties": "^14.2.4",
     "@radix-ui/react-select": "^2.0.0",
     "@react-three/drei": "^9.106.0",