How do I make a scrolling animation like this?

Earlier today I came across this cool design agency's website:

https://sunnyatsea.se/

The first thing I noticed was how if you scroll down just a bit, it will move to the next section. Kind of like a slideshow.

I remember hearing of a cool library/animation tool that helps you with this task but I can't find it anywhere.

Does anyone have an tips on how to replicate this? (or if you know the library that would be cool to 😅)

Thanks!!

Comments

[Alvaro Montoro]

I cannot see the animation on mobile, but what you describe sounds like can be done with CSS using scroll snapping. Check the scroll-snap-type property. It would require just 2-3 lines of CSS.

[Brayden W ⚡️]

Thank you!! That's what I was looking for.

It makes sense why it doesn't work on mobile/touch screen devices. Thanks again! 🙏

[kotaid]

you have alot of options, propably one of the best if not the best is gsap from greensock, and it have a plugin for scroll animation, and the docs are great.
here's the link to there website: greensock.com/gsap/

[Brayden W ⚡️]

Thanks! I think that's what I was looking for :D

[Tomoya Kuroda]

It uses fullPage.js alvarotrigo.com/fullPage/
You can confirm it in the dev tool.

[Brayden W ⚡️]

That's super cool! Thanks for sharing :)

[Moustafa Mahmoud]

Search for AOS there's a couple of tutorials on youtube

[Brayden W ⚡️]

Cool, thanks for the tip!

[Rufat Aliyev]

Don't forget adding the scroll to top button, it is not great UX to try to scroll up again. Good luck

[Brayden W ⚡️]

Agreed. I'll keep that in mind :)