Leinad Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
Leinad Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
Leinad Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 Hmm, I'm not seeing text on any load. How can I find it in the DOM? Link to comment Share on other sites More sharing options...
Leinad Posted June 18, 2020 Author Share Posted June 18, 2020 `Yes, take a look. now they aren't hidden. Link to comment Share on other sites More sharing options...
Leinad Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 Is this demo editable by us somehow? Link to comment Share on other sites More sharing options...
Leinad Posted June 18, 2020 Author Share Posted June 18, 2020 No, it's running locally. Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 18, 2020 Share Posted June 18, 2020 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 More sharing options...
Leinad Posted June 18, 2020 Author Share Posted June 18, 2020 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 More sharing options...
pxls Posted September 17, 2020 Share Posted September 17, 2020 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 More sharing options...
ZachSaucier Posted September 17, 2020 Share Posted September 17, 2020 @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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now