added useGsap hook

Remotion-app/src/HelloWorld/Components/GsapAnimation.jsx

@@ -1,4 +1,4 @@
-import { useGsapTimeline } from '../../../lib/useGsapTimeline'
+import { useGsapTimeline } from '../../lib/useGsapTimeline'
 import { AbsoluteFill } from 'remotion';
 import gsap from 'gsap';
 

Remotion-app/src/lib/useGsapTimeline.js

@@ -0,0 +1,32 @@
+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;
+};