Jump to content
Search Community

[Solved] callback onComplete restart everytime

bat test
Moderator Tag

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 = () => {
    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: () => {
          onCompleteParams: {}

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

  useEffect(() => {
  }, []);

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

      <WayToMars animStart={animStart} changeState={toggleStartAnim} />

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 = () => {



Link to comment
Share on other sites

hey, thanks !

here you can find the same logic




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) {
      .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.


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.
  • Create New...