Snap scroll and scrolling interaction

Design help General
1

Hi!

I am building a website for my client and I need to use a snap scroll to make sure the content of each section is centered perfectly when scrolling. When a user scrolls up/down, the header will change simultaneously (I have several heading wrappers stacked). Also the header and the footer serve as a mask so that the content goes behind them.

I have 2 problems:

  1. If I use scrollify.js it is a bit jittery and also it doesn’t support a horizontal scroll that I need for one of the sections. If I use either css or FullPage.js the “while page is scrolling” interaction is not working because the is not actually moving. Are there any workarounds or do you have any suggestions on how I can achieve the same interaction without using “while page is scrolling” interaction?

  2. In the 3rd section I have 4 columns that expand on hover. Interaction is set to increase the height of the paragraph from 0% to auto. For some reason, the heading jumps up during animation instead of moving together with the paragraph as it expands. Any clue why?

Thank you!
Any help is very much appreciated!

[UPDATE]: I found a way for #1 - using Anime.js. Still hoping to get some help with #2.

Here is my site Read-Only: https://preview.webflow.com/preview/bey-house?utm_medium=preview_link&utm_source=dashboard&utm_content=bey-house&preview=882554226bf7816b3710a1a2e0e99ccd&mode=preview

And published site: https://bey-house.webflow.io/

2

hi @Aikisander I thing this happen because paragraph is changing height and h1 is pushed up. There can be several ways how to achieve your design. One approach will be to wrap h1 and p in div and moving this div up and down.

m2c

3

@Stan Thanks for the suggestion! I think you’re right - for some reason h1 is pushed up to the p1’s original height. I tried your solution but the issue with that is each p1 is a different height. I ended up having the slide up animation last with a delay after the section has expanded.

1 Like
4

Hey Alexander,

Did you ever get a solution to using scroll snap css and have the “while-scrolling” interactions to work properly?

Thanks,
lukas