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:
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?
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?
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: Webflow - Bey House
And published site: https://bey-house.webflow.io/