Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
PG1

Appending tweens to timeline is throwing off animation timings

Go to solution Solved by nico fonseca,

Recommended Posts

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

  • Solution

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

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

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

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

 

  • Like 6
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.
×