| import gsap from 'gsap'; |
| import {useEffect, useRef} from 'react'; |
| import {useCurrentFrame, useVideoConfig} from 'remotion'; |
|
|
| export const useGsapTimeline = (gsapTimelineFactory) => { |
| const animationScopeRef = useRef(null); |
| const timelineRef = useRef(); |
| const frame = useCurrentFrame(); |
| const {fps} = useVideoConfig(); |
|
|
| useEffect(() => { |
| if (animationScopeRef.current) { |
| |
| const ctx = gsap.context(() => { |
| timelineRef.current = gsapTimelineFactory(); |
| timelineRef.current.pause(); |
| }, animationScopeRef); |
| return () => ctx.revert(); |
| } |
| }, [animationScopeRef.current]); |
|
|
| useEffect(() => { |
| if (animationScopeRef.current) |
| if (timelineRef.current) { |
| |
| timelineRef.current.seek(frame / fps); |
| } |
| }, [frame, fps, animationScopeRef.current]); |
|
|
| return animationScopeRef; |
| }; |
|
|
