File size: 920 Bytes
f77069a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
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) // check if the component is mounted
{
const ctx = gsap.context(() => {
timelineRef.current = gsapTimelineFactory();
timelineRef.current.pause();
}, animationScopeRef);
return () => ctx.revert();
}
}, [animationScopeRef.current]);
useEffect(() => {
if (animationScopeRef.current) // check if the component is mounted
if (timelineRef.current) {
timelineRef.current.seek((frame) / fps);
}
}, [frame, fps,animationScopeRef.current]);
return animationScopeRef;
};
|