Jump to content
GreenSock

Leinad

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

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

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

 

Link to comment
Share on other sites

Hmm, I'm not seeing text on any load. How can I find it in the DOM?

Link to comment
Share on other sites

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

 

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

Is this demo editable by us somehow?

Link to comment
Share on other sites

Hmm. It'd be helpful if we could run it ourselves (if you want to switch out the video for a public one that's fine). 

 

By the way the video is pretty neat.

Link to comment
Share on other sites

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

 

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

@pxls Hello and welcome to the GreenSock forums. You're much more likely to get a helpful response if you make a minimal demo of your issue for us to take a look at:

 

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.
×