DEV Community

loading...

How do I make a scrolling animation like this?

Brayden W ⚡️
Developer 💻 • Designer 🎨 • Freelancer 💪🏼 • Creator 💭
・1 min read

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!!

Discussion (10)

Collapse
alvaromontoro profile image
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.

Collapse
braydentw profile image
Brayden W ⚡️ Author

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

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

Collapse
kotaid profile image
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/

Collapse
braydentw profile image
Brayden W ⚡️ Author

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

Collapse
tomoyakuroda profile image
Tomoya Kuroda

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

Collapse
braydentw profile image
Brayden W ⚡️ Author

That's super cool! Thanks for sharing :)

Collapse
rufataliy profile image
Rufat Aliyev

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

Collapse
braydentw profile image
Brayden W ⚡️ Author

Agreed. I'll keep that in mind :)

Collapse
devmoustafa97 profile image
Moustafa Mahmoud

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

Collapse
braydentw profile image
Brayden W ⚡️ Author

Cool, thanks for the tip!