Hi!
I’ve run into an issue with an scroll to section interaction that is driving me crazy. Here’s how the my portfolio section works:
See All State – Default state
A curation of all projects are being shown, this is just a section with all the selected projects.
This is the default state, but if the user switched to the filtered state, they can return here by clicking “see all”
Filtered state – Shown only if user filters for something
In this state the “see all state” section is hidden, and the filtered state section is revealed from it’s hidden position. This contains the sorted projects based on their type (Branding, Book covers, Album Covers).
How it is supposed to work
So if the user is in the default state where they see all, and they click "Book Covers" for example 3 things are supposed to happen.
- The “See All State” is set to hide
- The “Filtered State” is set to flex box (so that it’s visible)
- The page should scroll down to the section “Book covers”
The issue
When the user clicks one of the filter buttons, the Steps 1, 2, 3 happens at the same time.
Meaning that the page is trying to scroll to a section that is at the moment hidden, and this results in the page scrolling to the top.
NOTE: The filter function (which is simply a scroll to section) works once the Filtered state is active.
Is there any way to put a delay between Step 2 and Step 3? Or is there any other solution that could work?
Thank you for your help!
Ákos
The read only version doesn’t seem to work at all, so that’s why I’m sharing the live version:
Here is my site Read-Only (just in case):
https://preview.webflow.com/preview/akosdesign?utm_medium=preview_link&utm_source=designer&utm_content=akosdesign&preview=18d77d3587478457a460626deb6bc791&workflow=preview)