ScrollTrigger not pinning

[S3BASTIAN]

Hi everyone! Thanks in advance for your help. I've read lots of examples and videos but I guess I'm not understanding the main concept of something here.

 

I want to have this carrousel spin as it is, but it happens way too fast, it does not let you see each slide properly. In every example I saw, each "slide"covers the whole view area, but I want to maintain this small slides, and I want to leave the section below it (the footer) attached below it (guess that with pinSpacing: true may help... don't know really.

I would like to have the horizontal scroll pinned in place until you reach the last slide, so I can have time to read each one.

 

MAYBE watching this codepen example in full screen show better the problem

 

Again, many thanks for your help!

Sebastian

See the Pen vYVYWPB by soporo123 (@soporo123) on CodePen

[mvaneijgen]

Hi @S3BASTIAN welcome to the forum! 

 

Indeed it is a bit weird to wrap your head around. Normally in GSAP things work based on durations, but with ScrollTrigger that all gets thrown out the window (not really it still matters if you have multiple animations), but in ScrollTrigger the whole animation gets played over the scroll distance you've set.

 

Now was your scroll distance not that big. You'd it set to start at the top of .hscroll and and 90% of its height, which was around 100px and in that space you move the container 3000px, which as you figured out is really fast! So what if we set the scroll distance to be also 3000px? Much slower right?

 

See the Pen gOBOyar?editors=1000 by mvaneijgen (@mvaneijgen) on CodePen

 

But now we have weird gaps in our work, it would be better if we could pin everything in place and then move the element, so why not do that? Pin can be true, or it can be an element (see the docs for more info ScrollTrigger docs). So what if we wrap your whole page in an element called .pinMe and set that as the pin. An other option would be to wrap the .hscroll element and the footer in an element called .pinMe and have the header do scroll away and only keep the element and the footer on screen, but I'll leave that to you. Hope it helps and happy tweening! 

 

See the Pen mdzdgrV?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[S3BASTIAN]

Dear @mvaneijgen thanks for your help and clear explanation!!

Yes, I saw the first demo that it  left some weird spaces on top and botton of the carousel that in a website made it look weird and had no clue how to solve it!

Thanks again for your time and help.

Have a great week,

Sebastian