Building Interactive CMS Collection-Based Web Pages in Webflow

Welcome to lesson four of this Webflow tutorial series! If you've been following along, you've likely gained a good understanding of Webflow basics. In this lesson, we'll leverage our knowledge to build a visually engaging CMS collection-based web page with position: sticky elements.

Setting Up a Collection List

To start, we'll need to set up our collection list within Webflow. When building with native Webflow interactions, a common approach is to have one collection list containing the image inside the collection item, with the image positioned absolutely to the right corner of the screen. However, in this case, the image needs to be positioned sticky while we scroll past the list. To address this, we'll create two collection lists, both pulling from the same set of items sorted in the same order. One list will contain all the cards, and the other will contain all the images. The images need to be stacked directly on top of each other, so we'll set the position of the collection images to absolute, covering their full parent.

Creating Animations

Next, we'll create the animations by adding and removing combo classes ("current") from our items. For the grid cards, we'll initially turn the opacity of the text down significantly and then leave the CSS transition at 400 milliseconds. We'll then add a "current" combo class that restores the opacity to its original state.

For the images inside the grid items, we'll start by applying a transform that scales the image by 1.2 and anchor its transform origin to the top. When the "current" combo class is added, the image will scale back to its original state. Additionally, the parent item will have the overflow set to hidden to crop off the image, and we'll also apply a "move" transform to the image, moving it down by 4 em and turning the opacity down. When the "current" combo class is added, the opacity will increase, and the image will move back up to 0 em.

Initial States on Page Load

On page load, we want just the first item in the list to have the "current" combo class to highlight the text. We can achieve this by setting the initial states using jQuery. We'll set the trigger type as "on page load" and navigate to the first card item in the collection list, adding the "current" class to highlight the text. Similarly, we'll set the initial states for the first grid item and the first image to be featured on page load.

Implementing Hover States

Moving on to hover states, we'll be working on adding hover effects to the titles. By using the jQuery builder, we can set the trigger to "on hover" of any of the grid cards. When hovering over a grid card, the "current" class will be added to the card. To ensure the class is removed from the other grid cards when hovering over a new one, we'll create an additional step to remove the "current" class from all existing cards before adding it to the hovered card.

Furthermore, we'll add functionality to find and add the "current" class to the corresponding image when hovering over a specific grid card. This is achieved by retrieving the number of the grid card and using it to apply the "current" class to the corresponding collection item and image.

Implementing Hover State in Webflow

After setting up the desired hover states using the jQuery builder, the entire script can be pasted into the page settings of Webflow within open and closing script tags. By saving and publishing the changes, you can observe the live interactions and hover effects on the web page.

In conclusion, this tutorial has provided an in-depth walkthrough of building interactive CMS collection-based web pages in Webflow. By using the power of Webflow’s design capabilities and jQuery for interactions, you can create visually appealing and dynamic web pages. From setting up collection lists to implementing hover states, this tutorial has covered the essential steps required to bring your designs to life. With a strong foundation in Webflow and jQuery, you can now create engaging and interactive web experiences for users. Happy designing!

If you've enjoyed and found value in this tutorial, be sure to subscribe to stay updated with more Webflow tips and tutorials. Thank you for tuning in, and see you in the next lesson!