Change section height

[Ops srl]

Good morning, I've tried changing the height of the .hero section and the result is that the individual images are not aligned at the top. How can I do to get the top alignment?

Thank you

See the Pen wvQYYVR by Ops-Studio (@Ops-Studio) on CodePen

[Rodrigo]

Hi @Ops srl and welcome to the GreenSock forums!

 

Thanks for being a Club GreenSock member and supporting GreenSock! 💚

 

Since version 3.12 you can clamp your triggers to avoid that:

smoother.effects(".hero__image-cont", {
 speed: () => ( `clamp(${gsap.utils.random(0.55, 0.85, 0.05)})`)
});

From the ScrollSmoother docs:

clamp() speed effects
Have you ever had an element that you natively placed toward the very top of your page but when you apply a data-speed, it starts out shifted from its native position? That's because by default, speed effects cause elements to reach their "native" position when centered vertically in the viewport, so they'll likely start out offset. Starting in version 3.12, you can wrap your speed value in "clamp()" to make them start out in their native position if they're "above the fold" (inside the viewport when scrolled to the very top). Under the hood, data-speed effects are driven by ScrollTrigger instances, so this a way to employ ScrollTrigger's clamp() feature that prevents the start/end values from "leaking" outside the page bounds (never less than 0 and never more than the maximum scroll position). 

Here is a fork of your demo:

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

 

That's a very nice effect, great work!

 

Hopefully this helps.

Happy Tweening!