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
Hi Federica, we went through GSAP only smooth scrolling in another forum thread.
Here is the final demo. I have also added a scrolltrigger for each box and all markers are aligned correctly even with the smooth scrolling.
See the Pen PoZLpbp by ihatetomatoes (@ihatetomatoes) on CodePen
Please note that smooth scrolling or scrolljacking is not something ScrollTrigger has been build for, but as you can see from the above it is doa
