Skip to content

Instantly share code, notes, and snippets.

@dghez
Created January 11, 2023 16:17
Show Gist options
  • Save dghez/47d33ed61fa1eb275f77254c5321d380 to your computer and use it in GitHub Desktop.
Save dghez/47d33ed61fa1eb275f77254c5321d380 to your computer and use it in GitHub Desktop.
Sync useFrame with gsap ticker
import React, { useEffect } from 'react'
import gsap from 'gsap'
import { useFrame } from '@react-three/fiber'
// sync gsap raf to r3f raf
gsap.ticker.remove(gsap.updateRoot)
export const GsapTicker = () => {
const pg = React.useRef(0)
gsap.ticker.remove(gsap.updateRoot)
useFrame((_, delta) => {
pg.current += delta
gsap.updateRoot(pg.current)
})
useEffect(() => {
return () => {
gsap.ticker.remove(gsap.updateRoot)
}
})
return null
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment