[Solved] callback onComplete restart everytime

[bat]

Hello greensockers,

 

I got a little problem here.

 

So the onComplete function recall every time the toggleStartAnim function, and not just once.

 

 So I do not understand why...  normally the cycle is finish, any idea...

 

here some of my code :

import React, { useEffect, useState } from "react";
import GifFusee from "../assets/gif/fuseeQuiGalere.gif";
import { gsap, MotionPathPlugin, TimelineMax } from "gsap/all";
import WayToMars from "./WayToMars";
import "../assets/stylesheets/Intro.css";

const Intro = () => {
  let currentTimeScale;
  const [animStart, setAnimStart] = useState(false);
  // gsap.registerPlugin(MotionPathPlugin);
  const takeTime = () => {
    // currentTimeScale = gsap.globalTimeline.time();
  };
  const tl = new TimelineMax({
    onUpdate: takeTime,
    yoyo: false,
    repeatDelay: 1
  });

  const toggleStartAnim = () => {
    setAnimStart(!animStart);
    console.log("toggleStartAnim pop");
  };

  function test2() {
    return new Promise(resolve => {
      tl.set(".intro-container", { autoAlpha: 1 })
        .set("#takeoff", {
          autoAlpha: 1
        })
        .to("#takeoff", 5, {
          rotation: 360,
          ease: "linear"
        })
        .set("#fuseehop", { autoAlpha: 1 })
        .set("#fuseeKiDecol", { autoAlpha: 1 })
        .to("#fuseeKiDecol", {
          y: -10,
          scaleY: -0.1,
          scaleX: -0.1,
          duration: 10,
          onComplete: () => {
            toggleStartAnim();
            resolve();
          },
          onCompleteParams: {}
        });
    });
  }

  useEffect(() => {
    test2().then(() => {
      console.log("test2 done");
    });
    console.log(animStart);
  });

  useEffect(() => {
    gsap.globalTimeline.pause();
  }, []);

  return (
    <div>
      {/* Debut intro */}
      <div className="intro-container">
        {/* Debut decollage fusee */}
        <div id="fuseehop" className="container-fusee">
          <img
            alt="fuseekidecol"
            id="fuseeKiDecol"
            className="container-fusee"
            src={GifFusee}
          />
        </div>
        {/* Debut rotation terre */}
        <div className="takeoffplanet">
          <div id="takeoff" />
        </div>
      </div>

      <WayToMars animStart={animStart} changeState={toggleStartAnim} />
    </div>
  );
};

export default Intro;

 

Edit: problem solved in an other way:

 

set the hooks by false like that i'm sure that even if the function is anormally call every x time,

i'll set it by true in the child component after

 

really i do not understand why onComplete repeat every time if everybody got an idea why :s

 const toggleStartAnim = () => {
    setAnimStart(false);

  };

 

[ZachSaucier]

Hey bat and welcome to the GreenSock forums. 

 

I'm not sure exactly what you're asking. Could you recreate the same logic without any additional fluff in a CodePen or something like that?

[bat]

hey, thanks !

here you can find the same logic

 

https://frontarm.com/demoboard/?id=32a41208-526a-4aba-b651-7793985baaaf

 

look at :

console.log("should not restart onComplete:",animStart);

it looks like it restart every time and so toggle animStart

(you need to wait a bit before the function is call again ~15sec)

and the animation does not restart

 

for me the onComplete should not recall the function

or maybe i misunderstood

[ZachSaucier]

I'm still not 100% sure what you're trying to do, but it seems like you need to use the boolean that you're changing to see whether or not to run the animation?

useEffect(() => {
  if(!animStart) {
    test2()
      .then(() => {
      console.log("test2 done");
    });
    console.log("should not restart onComplete:",animStart);
  }
});

Also note that you don't need to create a promise inside of the test2 function. You can call .then() on any GSAP tween or timeline.

https://frontarm.com/demoboard/?id=6da05a8e-e98f-4981-bc3c-1beffa2ec7c5

[bat]

oh well

i wanted to set a boolean to start an other animation in an other component

maybe it was not the wrong way, but i had no idea to do in an other way

 

animStart was pass in props (you can see it on my first post)

   <WayToMars tl={tl} animStart={animStart} changeState={toggleStopAnim} />

thx for the promise in fact i dot not use it anymore