LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-01-15 01:48:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix: orbit animation

Browse Source
This commit is contained in:
Nazareno Oviedo 2022-06-29 10:49:33 -03:00
parent b93ab6cc48
commit 03d1d94131
1 changed files with 14 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/sections/homepage/benefits/index.tsx
View File

@ -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']}>