Jump to content
Search Community

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

Leinad test
Moderator Tag

Recommended Posts

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

 

 

Link to comment
Share on other sites

Hey Vettor and welcome to the GreenSock forums!

 

46 minutes ago, Vettor said:

gsap.ticker.fps(29.97);

That's a very specific number, haha :) 

 

FYI you don't have to import any Lite/Max stuff. Just use gsap (you don't even use the Lite stuff in the psuedo-code you provided). We also recommend putting the duration inside of the vars parameter - what you have above would be a great time to use GSAP 3's timeline defaults. See the migration post for more info.

 

Can you check and see if the setInterval is running when the timeline fails to play?


It's pretty hard for us to help when we can't modify a demo for ourselves.

Link to comment
Share on other sites

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

 

 

Link to comment
Share on other sites

22 minutes ago, Vettor said:

Do you think this could be bad practice?

No, just uncommon.

 

There are no warnings in the console?

 

Maybe try console.logging myAnimatedDiv.current to see if it exists when the timeline is first set up.

 

Again, it's hard to help debug when we can't see a demo.

Link to comment
Share on other sites

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)
 

Link to comment
Share on other sites

  • 2 months later...

Hi guys, loving gsap atm, doing some animation stuff that I thought would be incredibly difficult!

 

Just wondering if there had been any solution to this - I'm running into a very similar problem where (in React too) the SVGs that I'm animating (which animate via ScrollTrigger) sometimes don't actually appear when the page hotreloads. I then have to refresh a random number of times until they do load. There are also times when only a few SVGs appear.

 

In comparing my code to @Leinad's, my animation run in a `useEffect` too. I can also confirm that when I comment out all the gsap usage (ie literally the whole `useEffect`, all SVG's load fine.

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...