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

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

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

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