[[React + GSAP] Timeline don't start everytime.]

lol, just a random video with a lot of motion. I'm creating a code sansbox right now. one sec

 

[[React + GSAP] Timeline don't start everytime.]

No, it's running locally.

[[React + GSAP] Timeline don't start everytime.]

There are three animated elements in the page. I was setting all of them as hidden just to show when the animation start. Now you can see them. (three divs inside of a div called dynamicstage)
 

[[React + GSAP] Timeline don't start everytime.]

`Yes, take a look. now they aren't hidden.

 

[[React + GSAP] Timeline don't start everytime.]

No errors or different logs when works or not work.

The console.log with the myanimated.div shows up normally when it works and when doesn't.

Here's the demo. if the text doesn't show up, try reload a couple of times:

https://4c4ad1189c38.ngrok.io

 

[[React + GSAP] Timeline don't start everytime.]

Hi Zach!

Yeah, I'm trying to match perfectly with the video, and 30 fps wasn't doing the job. And since the video is 29.97fps I thought to change this. Do you think this could be bad practice?

 

I deleted the Lite stuff, thanks for the tip.

 

I also added a console.log(videoRef.current.currentTime / videoRef.current.duration);

in the setInterval.

and shows 0 every 1000/29.97 of second.

until I play the video. When the video plays, the number starts to change (0.014247899821901252, .....) . but sometimes the animation doesn't show.

 

And I changed: tl.to(myAnimatedDiv.current, 0.1, { x: 182, y: 101,visibility: "visible"});

to:

tl.to(myAnimatedDiv.current, {duration: 0.1,  x: 182, y: 101,visibility: "visible"});

 

 

[[React + GSAP] Timeline don't start everytime.]

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>
    )
}