How to create a CSS Scroll Snap in sync for text and sections

Design help Animations & Interactions
1

Hello,

I am trying to create a snap scroll using CSS for both the sections of a website and a static scroll box.

I can get them to work individually for each one but not in sync together.

For the snap sections I used these instructions: https://www.youtube.com/watch?v=o_lWNEevHJo

And did the same thing for the static text section but can’t get them to sync. I used CSS for the text because I noticed the the interaction “while scrolling in view” doesn’t work with CSS for the sections jointly and that seems to be reflected in the comments as well.

Here is my public share link: Webflow - build_

2

Since you’ve already got all the different elements working separately, you’re halfway there!

For syncing your sections and the static scroll box, you’ll need to ensure that both are part of the same scroll container and have the same snapping points. This often involves a bit of trial and error to get the alignment just right.

One thing you could try is to wrap both the sections and the static text box in a single container. Then apply your CSS scroll snap properties to this container. This way, as you scroll, both the sections and the text box will adhere to the same snapping points.

Hope this helps!

3

That’s great advice! That’s what I was thinking to do next but also have some piece of the text as static and only need to rotate 1 distinct word so it makes it a little bit more complex.