Building an Expanding Article Stack in Framer

Quick Overview

The tutorial successfully implements a collapsible article stack component in Framer by utilizing CMS collections, component variants for open/closed states, applying absolute positioning for layering effects, and setting up hover interactions to trigger the state changes, resulting in a dynamic list where cards stack vertically when closed and spread out when open.

Key Points: The tutorial demonstrates creating a collapsible article stack component using Framer's CMS and Component Variants. The initial setup involves creating an 'Articles' CMS collection containing three articles, which are then dynamically displayed in a list component. Article cards are styled with specific dimensions (300x140px, 15px radius) and the text elements are styled (e.g., title in Inter Bold, article text in Inter Medium) and colored. A custom animation is created for the arrow icon within the card's bottom details layer, setting its Z-index to 0 and its scale to 0 on hover for the closed state, and 1.1 on hover for the open state. The component is built with two main variants: 'Open' (stack vertical, overflow hidden) and 'Closed' (stack horizontal, scale applied to background layer). Interactions are set up: hovering over the primary variant triggers the 'Hover' variant (which shows the arrow icon scaled up), and clicking the card transitions between the 'Open' and 'Closed' states for the entire component. The final result allows users to collapse the stack of articles vertically when closed, maintaining visual hierarchy, and spread them out horizontally when open, revealing more content.

Context: This tutorial, presented by Wes Ambler (Education at Framer), focuses on building an advanced, interactive UI element: a collapsible stack of article cards within the Framer design tool. The goal is to integrate dynamic content pulled from a CMS collection into a component that can switch between a compact, stacked state (closed) and an expanded, side-by-side layout (open) triggered by user interaction, specifically hover and click events.