JebJebTheUnblemished
KPCKevin Powell - Community
•Created by JebJebTheUnblemished on 4/3/2024 in #front-end
How to fix this snap dynamic horizontall scroll effect?
I'm trying to make an effect where you firstly scroll verticall, then when reaching a certain point goes horizontally, but then goes back to scrolling vertically, but purely using normal HTML, CSS, and Javascript.
So in my code i have 4 sections,
When scrolling from section 1 to section 3, vertical scroll is enabled and horizontal scroll hasn't taken effect yet.
On reaching section 3, I set up a class with a width of 500vh, split into 5 rows of each 100vh.
When reaching section 3, I want the screen to snap (and stop scrolling vertically) and switch to scrolling horizontally.
I want the horizontal scroll to scroll from the beginning of the 500vh class (0% completion) to the end of the 500vh class (100% completion - from left 0% to right 100%).
So once this horizontal scroll has reached 100% (completed), the screen snap is unlocked and I can scroll properly down to section 4 again.
Now my current code is kind of half-baked. The snapping effect is kind broken.
Firstly, it doesn't snap perfectly (sometimes snaps when in the middle of section 2 and 3, section 3 and 4). I want it to snap once I fully enter section 3.
Secondly, when im finished with scrolling horizontally it does switch to vertical scrolling but it becomes like laggy and stuck because the vertical scrollbar keeps appearing and dissapearing. This also leads to scrolling back up from section 4 to section 3 very hard.
Please help me!
Also this snap dynamic effect inspiration comes from this website: https://duo-studio.co/
my replit: https://replit.com/@jebjebyeet/Dynamic-vertical-to-horizontal-scroll-changes?v=1
1 replies