reapply layout effect fix for timeline cleanup
This commit is contained in:
@@ -3,7 +3,7 @@ import { useGSAP } from '@gsap/react'
|
|||||||
import gsap from 'gsap'
|
import gsap from 'gsap'
|
||||||
import { SplitText } from 'gsap/SplitText'
|
import { SplitText } from 'gsap/SplitText'
|
||||||
import { ScrollTrigger, GSDevTools } from 'gsap/all'
|
import { ScrollTrigger, GSDevTools } from 'gsap/all'
|
||||||
import { createContext, useCallback, useContext, useEffect, useRef, type ReactNode } from 'react'
|
import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useRef, type ReactNode } from 'react'
|
||||||
|
|
||||||
gsap.registerPlugin(useGSAP)
|
gsap.registerPlugin(useGSAP)
|
||||||
gsap.registerPlugin(ScrollTrigger)
|
gsap.registerPlugin(ScrollTrigger)
|
||||||
@@ -38,7 +38,7 @@ export const useTimeLine = (dep:any,all?:boolean) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},[dep])
|
},[dep])
|
||||||
useEffect(() => {
|
useLayoutEffect(() => {
|
||||||
return () => {
|
return () => {
|
||||||
gsapContext?.resetTimeline()
|
gsapContext?.resetTimeline()
|
||||||
}
|
}
|
||||||
@@ -72,10 +72,7 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
|
|||||||
}, [])
|
}, [])
|
||||||
useGSAP(() => {
|
useGSAP(() => {
|
||||||
if (!tl.current) {
|
if (!tl.current) {
|
||||||
tl.current = gsap.timeline({ paused: true, id:'mainTimeline', onComplete: ()=>{
|
tl.current = gsap.timeline({ paused: true })
|
||||||
console.log('timeline revert')
|
|
||||||
gsap.getById('mainTimeline')?.revert()
|
|
||||||
} })
|
|
||||||
}
|
}
|
||||||
return () => { console.log("gsap cleanup") }
|
return () => { console.log("gsap cleanup") }
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user