Have some question regrading Gsap.set and From

[momo12]

Guys I have some questions.

-When do we need to use Gsap.set and when we need to use From? Aren't they the same?

- I saw somewhere on Codepen... Someone used a duration for Gsap.to (SrcollTrigger). What does the duration do? Isn't it supposed to work based on the scroll percentage? So, how does the Duration work with ScrollTrigger?

- When we have a GSAP.To and want to play some elements on scroll --> What's the best way to add delay between them? they don't have the same class name and stagger is not a solution here. I'm adding a few pixels to the start point but do you have a better solution?

[mvaneijgen]

8 hours ago, momo12 said:

-When do we need to use Gsap.set and when we need to use From? Aren't they the same?

 

Immediately sets properties of the target(s) accordingly - essentially a zero-duration to() tween with a more intuitive name.  See the docs for more info

 

8 hours ago, momo12 said:

- I saw somewhere on Codepen... Someone used a duration for Gsap.to (SrcollTrigger). What does the duration do? Isn't it supposed to work based on the scroll percentage? So, how does the Duration work with ScrollTrigger?

ScrollTrigger is a plugin for GSAP that animates timelines based on the scroll position. If you add a timeline to a ScrollTrigger, in theory the duration does nothing anymore, except determines the timing on scroll. If you have a ScrollTrigger that is a 1000px long and have 10 tweens of each a second, each animation will play over 100px.

 

8 hours ago, momo12 said:

- When we have a GSAP.To and want to play some elements on scroll --> What's the best way to add delay between them? they don't have the same class name and stagger is not a solution here. I'm adding a few pixels to the start point but do you have a better solution?

Play with the position parameter or add an empty tween to your timeline between the tweens that needs a delay tl.add(() => {}, "+=1") this does nothing for 1 second or it's scroll distance equivalent

[momo12]

13 hours ago, mvaneijgen said:

 

 

Immediately sets properties of the target(s) accordingly - essentially a zero-duration to() tween with a more intuitive name.  See the docs for more info

 

ScrollTrigger is a plugin for GSAP that animates timelines based on the scroll position. If you add a timeline to a ScrollTrigger, in theory the duration does nothing anymore, except determines the timing on scroll. If you have a ScrollTrigger that is a 1000px long and have 10 tweens of each a second, each animation will play over 100px.

 

Play with the position parameter or add an empty tween to your timeline between the tweens that needs a delay tl.add(() => {}, "+=1") this does nothing for 1 second or it's scroll distance equivalent

Thanks a lot for your answers! I now understand better how it works. Thank you again!