I’m looking for advice or ideas on how to recreate the experience on Our Work — Humaan | Humaan: World class digital products, particularly, when a user taps on a case study / work, bottom modal / action sheets displays – the bottom modal interaction and the smooth scaling to full screen size when scrolling – also when user closes modal, modal smoothly no longer displays.
I’d like to implement something similar for my site to maintain a seamless single-page experience.
Any tips, suggestions, or guidance would be so helpful! Appreciate you all
Content storage-
Each page is separate, e.g. this work page- Rychiger | Humaan: World class digital products
The content needs to be fairly static here, i.e. not built with JS. Easily done with Webflow CMS and collection pages.
Main page-
/work acts as a directory page with the card layout and click triggers. Easily done with a Webflow static page. + collection list
Modal load-
On click, a modal is loaded and the content is JS-fetched from the work page. I’d build this using GSAP., for consistency and control.
Modal scroll-
If you begin scrolling, the modal expands to full screen and JS changes the URL displayed. You’re still on /work, but you see /work/rychiger in the URL bar. Scroll back up, that reverts to /work. Also GSAP, due to the interaction-coordinated URL bar JS.
In this setup the user can enter on the /work page, or /work/rychiger, they’ll get a page. The way Humaan has done it, if you enter on /work/rychiger, you’re only on that page directly.
This isn’t particularly difficult to build in Webflow- most of the work is in getting the modal interactions right, and the fetch timing to make it feel smooth. You might need to do e.g. fetch preloading on hover to create a smoother experience.
There is a fair bit of custom coding around the fetching and modal however. If you need help building that, drop me a message and I can send you my details.
I have created simple study example to get an idea what should be done take focus on JS. I didn’t bother with smooth animation but focused on principle.
Hope this will help you some way. Anyway, if you are not a developer I will recommend to contact @memetican as he will be able to recreate it in WF.
To recreate the Humaan-style bottom modal with smooth scaling and transitions, create a fixed-position div at the bottom of the screen with display: none as its default. Use Webflow interactions to trigger the modal: on click, set the modal to display: flex and animate its height from a small percentage (e.g., 20%) to 100vh as the user scrolls. For smooth transitions, apply easing (e.g., ease-in-out) to the animations. Add a close button or click-outside trigger to reverse the animation and hide the modal (display: none). Use scroll interactions to handle scaling seamlessly, and ensure all animations are tested for fluidity on different devices.
