Can you help me differentiate between these concepts?

[shoshodunno]

Whats the difference between "stagger" and "label+=1"?

And the difference between gsap.set and gsap.from? I'm confused if gsap.set sets an initial value, so whats the use of from that defines a starting point of a tween?

For example, instead of set legs , why don't they use"gsap.from" ?

Thanks!

See the Pen BaaQqKL?editors=1010 by sdras (@sdras) on CodePen

[GreenSock]

Welcome to the forums, @shoshodunno. 

 

I'd encourage you to poke around the docs - I think you'll find them super helpful. They explain all these distinctions. 

 

A stagger is for staggering the start times when you have multiple targets you're feeding into a tween. Like:

gsap.to(".box", {
  x: 500,
  stagger: 0.1
});

If there are 5 elements with the "box" class applied to them, they'll all animate to x: 500 but in with 0.1 seconds between their start times (staggered). 

 

"label+=1" is a position parameter - that's what you use to tell GSAP precisely where to place an animation into a timeline. In this case, find the label named "label" and insert this animation 1 second after that. 

let tl = gsap.timeline();
tl.addLabel("label", 2); // add a label at exactly 2 seconds
tl.to(".box", {x: 100}, "label+=1"); // this animation will start at 3 seconds.

See 

 

40 minutes ago, shoshodunno said:

And the difference between gsap.set and gsap.from? I'm confused if gsap.set sets an initial value, so whats the use of from that defines a starting point of a tween? For example, instead of set legs , why don't they use"gsap.from" ?

Please read this: 

https://greensock.com/docs/v3/GSAP/gsap.from()

 

A .set() is NOT an animation. It's technically a zero-duration tween, but the whole idea is that it immediately sets the value. Done. But a .from() is an animation, just like a .to(). The only difference is that you're defining the STARTING values instead of the ending ones. 

 

Any tween needs to know the starting and ending values. In most cases, animators think in terms of "go from wherever it is now TO this new value", so the starting values are whatever they happen to be NOW. But a from() is super handy when you're animating things to where they currently are, like imagine you've got your elements in their final positions on the page when it loads, but you want to slide or fade them into place or something. So you might want to say "animate from an opacity of 0" (fade in) or "from a y of -500" (drop things into place). In this case, you're telling GSAP to use whatever the current values are as the END ones, and the values you're feeding into the tween as the STARTING ones. 

 

I hope that clears things up. 

 

You might want to check out the getting started guide at

or maybe even consider taking @Carl's video courses at https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484

 

Good luck with your learning journey! Once you get the hang of it, I think you'll really love what you can do with the tools.  

[shoshodunno]

Thank you. This is super helpful as I'm new to web animation!