Scrolltrigger Vertical Scroll

[pedromeneses97]

Hello,
I've been re-creating an effect like this website: https://solace-store.com/products/funyl-lamp

It locks the container inplace and only scrolls images , i did a minimal demo to show my tests. 
I think the problem is with my calculations, still didnt figure it out yet how they work properly.
I think my Y = () needs to be the -scrollheight of the container 
and end when the scrollheight of the container ends.
 

If i try to add pinSpacing:false, it breaks the section under the pinned section.

For more info:
x is the Product text
galeria is the div holding all the images
section is a container holding all of the section.

let x = document.getElementById("infoProduto");

let galeria = document.getElementById("scrollGaleria");

let section = document.getElementById("containerAround");

See the Pen eYyRKdp by pedromeneses97 (@pedromeneses97) on CodePen

[akapowl]

Hello Pedro.

 

I think it is more of a CSS-Styling issue than a ScrollTrigger one, you are having.

 

All I did was add this specific

 

#containerAround {
  height: 100vh;
  overflow: hidden;
}

#scrollGaleria {
  height: fit-content;
}

 

and a general

 

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

 

into your CSS and got it to work without the large whitespace below that section - which is there because you tween the content that is actually supposed to be there up to the top - so there is that blank space where that content was before. Thus the addition to the CSS. 

 

See the Pen rNpwrLY by akapowl (@akapowl) on CodePen

 

 

 

Now you will see, that when unpinning (even when scrolling with a rather normal speed), your twenn will most likely not be finished yet because of the scrub: 1 - which basically tells the tween to take 1 second to catch up to the actual scrollposition.

 

If you want to prevent that, you might actually have to do things a bit different, like on the page you linked to as a referral. They don't actually tween the left section of the page but what they do instead is only pin the right part and let the left side scroll freely. Something like this:

 

See the Pen mdpwKGQ by akapowl (@akapowl) on CodePen

 

 

 

On that page it looks smooth because they probably use a smooth scrolling library of some sorts. I just quickly threw in the ScrollTrigger native smoothScroll() helper function into the mix (which you can find in the docs for .scrollerProxy() - first example on this page) to show the difference it makes. I hope all that will help a bit. Happy scrolling!

 

See the Pen XWVgBpZ by akapowl (@akapowl) on CodePen

 

[pedromeneses97]

@akapowl i forgot to add my * css but you are right.
I'm very thankfull for your response as it helped me and my project.