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.