How to use pinSpacing and some other questions

[WakuWakuCodingu]

Hi, I recently just started learning gsap  and still a beginner in coding.

I followed the scrollTrigger tutorial and kinda stuck when learning it.

 

Attached with the is a code I created.

 

I would like to know(if possible, show demo):

1)How to recreate the code with "pinSpacing: false, "  only?

2)How to recreate the code with "gsap.utils.toArray" included?

3)Is there any need to change to css code to make it more cleaner?(for example, "overflow:hidden" is not needed since it is already come with certain property)?

 

My english isnt that good, any help will be appreciated!  Thank you!

 

See the Pen ExJEwYq by WakuWakuCodingu (@WakuWakuCodingu) on CodePen

[mvaneijgen]

Hi @WakuWakuCodingu welcome to the forum!

 

Looks perfect to me I would not change a thing! Certainly not if this if your first time using the tool.

 

Pin spacing is needed for ScrollTrigger to do its magic, so you can really remove it. You can but then all your further sections will overlap you animation

 

You could use gsap.utils.toArray, but you can also just feed a query selector to the GSAP tween and it will also get all the elements. In this case I've set all your .innerBox elements and add a stagger to the animation so they come in one by one. I've also move the ScrollTrigger logic to the timeline, so now it is even more clear what ScrollTrigger is controlling.

 

Indeed in this case is it not strictly necessary to set overflow: hidden; but it also doesn't harm anything. 

 

See the Pen bGJvLZz by mvaneijgen (@mvaneijgen) on CodePen

 

I've written a guide how to create the kinds of card stacking effect, yours works perfectly, but maybe you can get some knowledge from it. 

 

 

Hope it helps and happy tweening! 

 

 

[WakuWakuCodingu]

Hi @mvaneijgen. Thanks for replying and the guide!

 

However, I wanted to recreate my code with "pinSpacing:false" and without "end" just like in the video tutorial "Introducing ScrollTrigger for GSAP"(around 14.30min) shown in the documentation.

 

Is the any changes need to be done to css or others?

[Rodrigo]

Hi,

 

We don't have the time resources to follow video tutorials and replicate effects that users see elsewhere and are trying to replicate. That being said this is mostly about CSS to begin with. Right now you have your elements with position absolute, inside a parent element with overflow hidden, so there are a few things that need changing in your CSS to make this work with a different approach.

 

This should be a good starting point:

See the Pen xxeWQbd by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[WakuWakuCodingu]

Hi, Rodrigo, thanks for the reply and advice!

 

I was able to learn something more about gsap coding today!