I am facing animation performance/timing issue. Animations are being done in more time than required.

[Aamir Khan]

I am using reactjs and this is my code (

  if (animations) {

      animations.seek(0);

      animations.play();

      setIsPlaying(true);

    } else {

      if (gsapList.length !== 0) {

        const newAnimations = gsap.timeline();

        let totalAnimationTime = 0;

 

        for (const element of gsapList) {

          let duration =

            (element.objToPass.keyframes[1].val -

              element.objToPass.keyframes[0].val) /

            1000;

          let delay = element.objToPass.keyframes[0].val / 1000;

 

          const newTempObj = { ...element.objToPass };

          delete newTempObj.keyframes;

 

          let objPassed = {

            duration: duration,

            delay: delay,

          };

          Object.assign(objPassed, newTempObj);

          // Use the timeline to create and sequence your animations

          newAnimations.to(`#${element.elementName}`, objPassed, `<`);

 

          const endTime = element.objToPass.keyframes[1].val / 1000;

          if (endTime > totalAnimationTime) {

            totalAnimationTime = endTime;

            dispatch(addTotalAnimTimeToStore(totalAnimationTime));

          }

          // When the timeline is completed, set isPlaying to false

          newAnimations.eventCallback("onComplete", () => {

            setIsPlaying(false);

          });

 

          if (isPlaying) {

            // If it's already playing, just continue from the current progress

            newAnimations.play();

            setIsPlaying(true);

          }

 

          const timerElement: any = document.getElementById("timer");

 

          function updateTimer(progress: any) {

            const durationInSeconds = progress * totalAnimationTime;

            function formatTime(seconds: any) {

              const minutes = Math.floor(seconds / 60);

              const remainingSeconds = Math.floor(seconds - minutes * 60);

              const milliseconds = Math.floor(

                (seconds - Math.floor(seconds)) * 1000

              );

 

              const formattedMinutes = minutes.toString().padStart(2, "0");

              const formattedSeconds = remainingSeconds

                .toString()

                .padStart(2, "0");

              const formattedMilliseconds = milliseconds

                .toString()

                .padStart(3, "0");

 

              return `${formattedMinutes}:${formattedSeconds}:${formattedMilliseconds}`;

            }

 

            const formattedTime = formatTime(durationInSeconds);

            timerElement.innerHTML = formattedTime;

          }

 

          function animate() {

            const progress = newAnimations.progress();

            updateTimer(progress);

            requestAnimationFrame(animate);

          }

 

          animate();

        }

        setAnimations(newAnimations);

      }

    }

)

If total animation time that I set is 8 sec but animations  take more than 12 sec to be completed.

[Toso]

it would be awesome if you could create a minimal demo that focuses on the issue  since it's pretty hard to debug from just a code snippet

 

 

and since you are using react it will take just a few clicks to create a demo thanks to this collection 

https://stackblitz.com/@GreenSockLearning/collections

[Aamir Khan]

here is the link, please check 

https://stackblitz.com/edit/gsap-react-basic-f48716-9ted8s?file=src%2FApp.js

when I click to play animation, its not working

[Rodrigo]

Hi,

 

Sorry to hear about the issues, but your demo has over 300 lines of JS code that seems quite intricate IMHO, although I'm sure there is logic to it. Unfortunately we don't have the time resources in these free forums to comb through all your code and understand what, when and how you're doing things in your app, in order to find the possible issue(s). That's why we always emphasize in a minimal demo.

 

The one thing I can notice is that you're not using GSAP Context in your app:

https://gsap.com/docs/v3/GSAP/gsap.context()

 

Also we recently added a useGSAP hook that simplifies things a bit as well:

https://www.npmjs.com/package/@gsap/react

 

Please reduce your demo to simple JS code and just a few colored divs that reproduce the problem you're experiencing. My main guess is that something in all the logic you have there must be causing this or perhaps is just the fact that you're not doing some proper cleanup, which is critical in React's StrictMode.

 

Happy Tweening!