Jump to content
GreenSock

bat

[Solved] callback onComplete restart everytime

Recommended Posts

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);

  };

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 :)

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