Cyango

Have you tried it in a VR headset or with WebXR chrom plugin (https://chromewebstore.google.com/detail/webxr-api-emulator/mjddjgeghkdijejnciaefnkjmkafnnje) ? Because is there that it fails, because raf plays differently inside a XRsession, see here: https://developer.mozilla.org/en-US/docs/Web/API/XRSession/requestAnimationFrame

Hi, can it be codesandbox? Here i have put a demo: https://codesandbox.io/p/sandbox/natuerlich-spatial-ui-example-forked-hhg6h9 You might need to install the WebXR plugin for chrome if you don't have any VR headsets. Then just click VR button.

I bumped into this post because I wanted to make sure gsap works in immersive mode with WebXR. Because the browser cancels any rAF and uses it's own vr session raF. Is it compatible?

Yes that's why I'm liking gsap, because of it's flexibility. I don't need to have precision in the sync, but at least syncing in a seconds precision, could that be possible? So what I need to build is possible with gsap? About the example i gave earlier, do you think this is the correct approach in my case? I just needed an onPause callback somehow...

I'm still grasping the power of GSAP, I need to learn more about it. But I have many questions regarding my identical need on this topic. First one: Isn't a single master timeline enough to control every video and other animations in nested or different tree components (assuming a React and state management is being used)?

The project is actually very dynamic in terms of how many videos, audios and three.js elements it has. The goal is to have a master timeline (like Adobe After effects for example) that controls the videos and audios playback (if they exist in the canvas) and control three.js meshes and so on, where i can play/pause, delay and add keyframes for example to the current elements instantiated. I need to have the ability, for example, to play a video and be able to create a new keyframe of a mesh rotating and in sync with the video playback at the custom defined time. Is GSAP able to achieve something like this? Because if so, I'm willing to go comercial license with it.

Trying to achieve something similar. Basically use gsap as a video player (that allows to animate other elements concurrently for example). Was there any solution?

Thanks for the quick reply. I already have those issues handled in the code before, and the video was not muted. To give you a bit more context, i'm using React and Zustand to set the timelineInstance so I can use it anywhere. This is where i initialise it (in a component): useGSAP( () => { const options: gsap.TimelineVars = { paused: true, onComplete: () => { setPlayingMode(PlayingModes.STOPPED); }, onUpdate: () => { const elapsedTime = timeline.current?.time() || 0; setElapsedTime(elapsedTime); }, }; timeline.current = gsap.timeline(options); setTimelineInstance(timeline.current); // zustand action }, { dependencies: [activeScene?.id], scope: gsapContainerRef }, ); and then in another component i was now trying to set the currentTime: useGSAP(() => { if (timelineInstance && mediaPlayerRef.current) { const animation = gsap.to(mediaPlayerRef.current, { currentTime: 10, duration: 10, ease: 'none', }); addAnimationToTimeline(animation); } }, [timelineInstance, mediaPlayerRef.current]); But i understand the video is not actually playing only setting the currentTime, so i now tried to do something like this: useGSAP(() => { if (timelineInstance && mediaPlayerRef.current) { const animation = gsap.to(mediaPlayerRef.current, { duration: 10, ease: 'none', onStart: () => { mediaPlayerRef.current?.play().catch((error) => console.log(error)); }, onComplete: () => { mediaPlayerRef.current ?.play() .then(() => { mediaPlayerRef.current?.pause(); }) .catch((error) => console.log(error)); }, }); timelineInstance.add(animation); } }, [timelineInstance, mediaPlayerRef.current, props.asset]); The issue I'm having now is that even calling timelineInstance.pause() somewhere else, the video doesn't pause. Am I doing this react flow with gsap correctly? My goal is to have a global timeline that commands the video playback and other html elements in sync always.

Hi, I'm new to GSAP, I'm trying to implement the second option of this thread. But I wanted also the audio from the video to play, but somehow is not playing, maybe not possible when setting the currentTime. Other question i would like to know is: using GSAP as a video player using a special playhead, similar to the video editors out there. Is this possible with GSAP? if so is it possible to keep the running the video with its original FPS? I assume this is probably not possible, but worth questioning. The audio is not playing like this: useGSAP(() => { if (timelineInstance && mediaPlayerRef.current) { const animation = gsap.to(mediaPlayerRef.current, { currentTime: 10, duration: 10, ease: 'none', }); addAnimationToTimeline(animation); } }, [timelineInstance, mediaPlayerRef.current]);