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!