Smooth scroll to whole page and trigger animations
Hello everyone.
What i'm trying to achieve is to have a smooth scroll effect applied to a .main div that wraps the whole page.
The effect i reached is great but in the moment in which i add triggers inside, the position of them is wrong and seems affected by the smooth effect in a wrong way.
This is the code for the page smoothing part:
gsap.to(".container", {
yPercent: -100,
y: "100vh",
scrollTrigger: {
scrub: 1,
trigger: ".container
https://www.w3schools.com/howto/howto_css_hide_scrollbars.asp
I don't think the overflow: hidden mentioned first on that page will be an option, since that helper function leverages native browser scrolling, so you couldn't just 'de-activate' it like that.
Your best shot will probably be to do it via CSS (as mentioned on the page linked above) best as you can.
See the Pen RwxMjoo by akapowl (@akapowl) on CodePen
