button animation updates

dsmooot · Sep 27, 2024 · d630384 · d630384
1 parent fa8a8af
commit d630384
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -37,16 +37,39 @@ const Home = () => {
   useGSAP(() => {
     if (!containerRef.current) return
     tlRef.current = gsap.timeline()
-    tlRef.current.to(containerRef.current, {
-      opacity: 1,
-      duration: 1,
-      ease: 'power1.inOut',
-      onStart: () => {
-        triggerEvent({
-          type: 'home-transition-in',
-        })
-      },
-    })
+    tlRef.current
+      .to(containerRef.current, {
+        opacity: 1,
+        duration: 1,
+        ease: 'power1.inOut',
+        onStart: () => {
+          triggerEvent({
+            type: 'home-transition-in',
+          })
+        },
+      })
+      .set('#buttons', { opacity: 1 })
+      .to(
+        '.cta',
+        {
+          width: isMobile ? '200px' : '250px',
+          // borderRadius: '100px',
+          opacity: 1,
+          duration: 0.5,
+          ease: 'power3.inOut',
+          stagger: 0.1,
+        },
+        1.1,
+      )
+      .to(
+        '.cta',
+        {
+          color: 'white',
+          duration: 0.5,
+          ease: 'power1.inOut',
+        },
+        1.2,
+      )
 
     if (!loaded) return
 

diff --git a/src/components/dom/common/LoadingScreen.tsx b/src/components/dom/common/LoadingScreen.tsx
@@ -36,8 +36,8 @@ const LoadingScreen = () => {
           triggerEvent({ type: 'loaded' })
         },
         onComplete: () => {
-          containerRef.current.style.display = 'none'
           setVisible(false)
+          if (containerRef.current) containerRef.current.style.display = 'none'
         },
       })
       return