I recently saw a video by Timothy Ricks on creating interactive layout switches (Grid view/List v...

I recently saw a video by Timothy Ricks on creating interactive layout switches (Grid view/List v...I recently saw a video by Timothy Ricks on creating interactive layout switches (Grid view/List v...

The network for creativity

Join 1.25M professional creatives like you

Connect with clients, get discovered, and run your business 100% commission-free

Creatives on Contra have earned over $150M and we are just getting started

Back to feedPost

Abi Rana

pro

• Dec 20

I recently saw a video by Timothy Ricks on creating interactive layout switches (Grid view/List view) in Webflow. It's such a great way to improve user experience!

Inspired by his build, I wanted to see if I could push the concept further by optimizing the structure. I wanted to see if I could achieve similar result using just one CMS Collection List. My goal was to make it even easier to manage by having a single instance of layout.

I tested my ideas with Webflow Native GSAP Interactions and achieved it using a combo class technique. This version also uses only one set of interactions.

Check out the cloneable here: https://webflow.com/made-in-webflow/website/grid-view-list-view-toggle

Thanks to Timothy for the initial spark!

If you have any feedback, I'd love to hear it.

Webflow webdev interactions

webflow.com

Gird View / List View Toggle - Webflow Native Interactions - Webflow

Highlights: - Easy to manage structure (two styles with combo class) - Only one CMS Collection to manage - Only one Set of Webflow Native GSAP Interactions - Seamless layout switching Inspired by a recent tutorial/cloneable from Timothy Ricks, I wanted to see if I could push the concept further by optimizing the structure. I wanted to see if I could achieve similar result using just one CMS Collection List. My goal was to make it even easier to manage by having a single instance of layout, which I achieved using a combination of smart class structures and Webflow Native Interactions. If you have any queries, feel free to reach out at support@abirana.com