[[Solved] callback onComplete restart everytime]

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

[[Solved] callback onComplete restart everytime]

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

[[Solved] callback onComplete restart everytime]

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

  };

 

[[solved] How to set the position of an element with motionPathPlugin]

Hello,

 

like you see i got a spaceship attach to the start of the path, well everything is fine.

 

But i need to center the path element, for that i put in (CSS) comments "transform: translate(387px, 422px);"

So the spaceship is not plug to the path anymore even if i tried to change the coordinate with transformOrigin in GSAP.

 

not sure to entirely understand how it works.

 

hope everything is correctly explain

 

edit: I didn't see that we can use viewbox...

See the Pen MWYmwKB by mrfouine (@mrfouine) on CodePen