fix: orbit animation

src/components/sections/homepage/benefits/index.tsx

@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import { useRealViewport } from 'next-real-viewport'
 import { useTheme } from 'next-themes'
 import * as React from 'react'
 
@@ -57,6 +58,8 @@ interface Props {
 const Benefits = ({ data }: Props) => {
   const { theme } = useTheme()
 
+  const { vw } = useRealViewport()
+
   const mobileImg01Ref = React.useRef<HTMLImageElement>(null)
   const mobileImg02Ref = React.useRef<HTMLImageElement>(null)
 
@@ -86,7 +89,7 @@ const Benefits = ({ data }: Props) => {
   }, [])
 
   useIsomorphicLayoutEffect(() => {
-    if (isMobile || typeof isMobile === 'undefined') return
+    if (isMobile || typeof isMobile === 'undefined' || !vw) return
     if (!ballRef.current) return
 
     const timeline = gsap.timeline({
@@ -96,8 +99,11 @@ const Benefits = ({ data }: Props) => {
 
     timeline.to(ballRef.current, {
       ease: 'power2.inOut',
+      overwrite: true,
       motionPath: {
-        path: 'M3.99988.5S35.5 437.5 456.999 457C895.558 477.289 1013.5 653.5 1013.5 653.5',
+        path: `M3.99988.5S35.5 437.5 456.999 457C895.558 477.289 ${vw * 45} ${
+          vw * 30
+        } ${vw * 45} ${vw * 30}`,
         align: 'self'
       },
       scrollTrigger: {
@@ -107,7 +113,12 @@ const Benefits = ({ data }: Props) => {
         scrub: 1
       }
     })
-  }, [isMobile])
+
+    return () => {
+      timeline.kill()
+    }
+  }, [isMobile, vw])
+
   return (
     <Section className={s['section']}>
       <Container className={s['header']}>