Stop infinite loop, then display text doesn't problems

[Guest]

Hello, I'm new to GSAP, so for you my problem can be just stupid but I spent 2 days trying to solve this.
So I want to create a Spinner animation, that stops when backend responses and then the text is being displayed. But, at the beginning, I can't stop the animation on state change. My last attemt code is there:
 

  const spinnerTl = gsap.timeline({ repeat: -1 });
  console.log(isLoading);

  useEffect(() => {
    if (formik.isSubmitting) {
      const anim = document.getElementById("loader-animation");
      spinnerTl.to(anim, {
        rotation: "+=90",
        ease: "none",
        duration: 0.25,
        delay: 0.3,
      });
    }
  }, [formik.isSubmitting]);

  useEffect(() => {
    if (formik.isSubmitting && !isLoading) {
      const text = document.getElementById("loader-text");

      spinnerTl.willStop = true;
      let repeats = Math.floor(spinnerTl.totalTime() / spinnerTl.duration());
      console.log(Math.floor(spinnerTl.totalTime()));
      console.log(spinnerTl.duration());

      repeats += 1;
      console.log(spinnerTl);

      spinnerTl.repeat(0);

      const tl = gsap.timeline();
      gsap.set(text, { autoAlpha: 0 });
      tl.to(text, { delay: 0, autoAlpha: 1 });
    }
  }, [isLoading, formik.isSubmitting]);

You know, user submits the form, animation displays, on response he get text e.g. "it's ok, go to homepage". I found this solution on gsap forum, but for me totalTime() is always 0 so I tried to set spinnerTl.repeat(repeats), but repeats were always NaN, I tried setting repeat to 0 but it doesn't even change anything for my spinner timeline. i tried
onComplete: () => { isLoading && spinnerTl.pause() };

but it doesn't work too. Could anyone can help and explain what I do wrong?

[OSUblake]

Welcome to the forums @hisashin

 

You should never define an animation outside of a hook as closures do not work in React. I would recommend going through our React guides first, and if you need any additional help, just pop in a minimal demo so we can see what you're doing. You can also use CodeSandbox instead of CodePen for the demo.