Hey Guys!
I am making a React application using GSAP. Everything is working fine, although I'm noticing that when I save my code in vscode and look to the reloaded page, in the browser, the animation doesn't always work.
I tried to open a new window to check if isn't the hot reload of react or something, but the behaviour is the same. I always need to reload the page a random amount of times, until works.
My application is an animation synced with a video.
When I press play, the animation sometimes starts and sometimes don't.
Here's an (very detailed) sudo code, showing everything I'm doing with GSAP in my app:
import React, { useEffect, useState } from "react";
import { gsap, TimelineLite, TweenLite } from "gsap";
export default function oi() {
let myAnimatedDiv = React.createRef();
let videoRef = React.createRef();
let tl = gsap.timeline({
paused: true,
duration: 0.1
});
gsap.ticker.fps(29.97);
useEffect(() => {
tl.to(myAnimatedDiv.current, 0.1, { x: 182, y: 100, visibility: "hidden" });
tl.to(myAnimatedDiv.current, 0.1, { x: 182, y: 101});
tl.to(myAnimatedDiv.current, 0.1, { x: 182, y: 101,visibility: "visible"});
....(more 300 times)...
setInterval(() => {
tl.progress(videoRef.current.currentTime / videoRef.current.duration);
}, 1000/29.97);
gsap.ticker.lagSmoothing(0);
tl.time(videoRef.current.duration, true);
},[]);
return (
<div>
<video ref={videoRef} src="videos/full_30fps.mp4" type="video/mp4" playsInlin
onPlay={() => {
tl.time(videoRef.current.currentTime, true);
tl.progress(videoRef.current.currentTime / videoRef.current.duration);
}}
></video>
<div className="animated-div" ref={myAnimatedDiv}></div>
</div>
)
}