DEV Community

Brayden W ⚡️
Brayden W ⚡️

Posted on

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

Top comments (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 ⚡️

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 ⚡️

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

Collapse
 
tomoyanime 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 ⚡️

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 ⚡️

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 ⚡️

Cool, thanks for the tip!