Slower than expected animation

[NickWoodward]

I'm sure this is just a simple mistake that I can't work out after a long day, but I really can't see why the animation below is going so slowly?

Am I wrong in thinking the default duration tl value should be inherited by each animation added?

What have I missed? 🙃

(*sorry for the styling in the embedded pen )

 

See the Pen bGvqBPN?editors=0011 by nwoodward (@nwoodward) on CodePen

[SteveS]

I don't know how fast you expect it to be but probably because your stagger is 0.1. That means if you are staggering 10 elements it will take at least 1 second if I'm not mistaken.

[GreenSock]

@NickWoodward no, defaults only get applied to things that are directly added via the convenience methods like timeline.to(), timeline.from(), timeline.fromTo(). In your example, though, you are creating your tweens COMPLETELY outside of the timeline, thus they already have the global default applied as their duration (or whatever) BEFORE you're adding them to your timeline that has defaults declared. At that point the defaults don't matter because the tweens are already created with a particular duration. It doesn't suddenly force those durations to change when you .add() them to the timeline. That'd be weird and problematic. 

 

Make sense? 

 

In other words...

let tl = gsap.timeline({ defaults: {duration: 0.1} });
tl.to(...); // will use defaults

tl.add(func());
function func() {
  return gsap.to(...); // will NOT use timeline defaults!
}

 

So you could easily adjust your code so that your functions accept a duration parameter or something, and use that inside the functions so the durations get set properly. 

 

Good luck! 

[NickWoodward]

27 minutes ago, GreenSock said:

@NickWoodward no, defaults only get applied to things that are directly added via the convenience methods like timeline.to(), timeline.from(), timeline.fromTo(). In your example, though, you are creating your tweens COMPLETELY outside of the timeline, thus they already have the global default applied as their duration (or whatever) BEFORE you're adding them to your timeline that has defaults declared. At that point the defaults don't matter because the tweens are already created with a particular duration. It doesn't suddenly force those durations to change when you .add() them to the timeline. That'd be weird and problematic. 

 

Make sense? 

 

In other words...

let tl = gsap.timeline({ defaults: {duration: 0.1} });
tl.to(...); // will use defaults

tl.add(func());
function func() {
  return gsap.to(...); // will NOT use timeline defaults!
}

 

So you could easily adjust your code so that your functions accept a duration parameter or something, and use that inside the functions so the durations get set properly. 

 

Good luck! 

Ah ok, that makes sense, thanks!

[NickWoodward]

52 minutes ago, SteveS said:

I don't know how fast you expect it to be but probably because your stagger is 0.1. That means if you are staggering 10 elements it will take at least 1 second if I'm not mistaken.

Hi Steve, yeah it was more the speed of the other individual animations - were way too slow to be 0.1