PG1 Posted August 31, 2021 Share Posted August 31, 2021 As you can see in the en, I am using a generate() function to generate a timeline by appending two other timelines to it. My aim is to start passing in custom delays but that is proving complicated. I've stripped the problem back to this: I now have a single timeline to which I append two others. In my head this means that they should run sequentially - the spinning of the right hand square followed by the moving of the left hand square, as that is the order the are appended in. But they do not. The spin initiates first, but the move happens around the middle of the spinning animation. Why are they crossing over? From there I hope I can build out my other parts. See the Pen f216578054531e1fcdef26b956520f03?editors=1111 by petegarvin1 (@petegarvin1) on CodePen Link to comment Share on other sites More sharing options...
Solution nico fonseca Posted August 31, 2021 Solution Share Posted August 31, 2021 Hey @PG1 you need to change this : tl.add(spinAnimation); tl.add(moveAnimation); to this: tl.add(spinAnimation()); tl.add(moveAnimation()); 🙌 Link to comment Share on other sites More sharing options...
PG1 Posted August 31, 2021 Author Share Posted August 31, 2021 Thanks that's awesome - whats the theory there - if i wasn't adding them as functions then how were the animations even being triggered? Link to comment Share on other sites More sharing options...
nico fonseca Posted August 31, 2021 Share Posted August 31, 2021 When you call the add function, it expects any of these parameters: Quote .add( child:[Tween | Timeline | Label | Callback | Array], position:[Number | String | Label] ) : self [override] Adds a tween, timeline, callback, or label (or an array of them) to the timeline. if not, simply pass it and execute your function. If you want to use a simple tween, you can use something like this: const tween = gsap.to(el,{...}); const tl = gsap.timeline(); tl.add(tween); Btw, I'm not sure how this works internally but @GreenSock can correct me if I'm missing something . 🙂 Link to comment Share on other sites More sharing options...
OSUblake Posted August 31, 2021 Share Posted August 31, 2021 These are just callbacks. It calls the provided function when the timeline reaches that spot. Callbacks don't return values, so anything you return is ignored by the timeline. If you create an animation inside a callback, it will of course run, but it won't be added to timeline. tl.add(spinAnimation); tl.add(moveAnimation); The parentheses executes the function, which in this case returns an animation, which will add it to the timeline. tl.add(spinAnimation()); tl.add(moveAnimation()); Same as doing this. tl.add( gsap.timeline() .to(".card0", { x: "-30px", duration: 0.5, ease: "power4.inOut" }).to(".card0", { x: "0px", duration: 1, ease: "power2.inOut" }) ) 6 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now