Hello!
I’m wondering how one might go about implementing a similar design and functionality using Webflow for this webpage link below. There’s a gallery CMS on the left that scrolls and you click on an image and the right panel has info and more images/link based on selection and is fixed on the right screen.
Hi Lena,
I use two basic approaches for this. One is a single collection list, plus interactions to create an “expando” type of UX. I’ve written up some details here, plus a cloneable to show the technique.
The second is more versatile, but requires some coding. You’d create two collection lists, one for the thumb/navigation, and one for the content. Interactions or GSAP can handle the hide and show. Custom code would stitch it together, so that clicking an item in the “nav” panel will handle the display of the correct item in the content panel.
The second approach is a bit easier to control layout on, so if you understand basic JS coding, I’d go with that approach to replicate this UX.
Thank you so much! Would one of these approaches be more or less ideal for say 70+ cms collection items?
That depends. If you go over 100, you’re dealing with pagination, which is collection-list-specific.
The problem there is, two collection lists can’t really be “paging synchronized”, so you might end up with items 1-100 in your nav and 101-200 in your body. That would break the scripts ability to find and click the corresponding item.
In that case, you could go with approach #1. Single list, so no pagination mis-syncs, but somewhat more challenging to get the layout perfect.