# Building an Expanding Article Stack in Framer Source: https://www.youtube.com/watch?v=WvFGFXd5M8U Recap page: https://rapidrecap.app/video/WvFGFXd5M8U Generated: 2026-02-03T18:08:05.191+00:00 --- ## 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. ![Screenshot at 00:20: The initial view of the Framer canvas showing the live website preview with the 'Stories from the Table' hero section featuring the three article cards stacked vertically on the right side.](https://ss.rapidrecap.app/screens/WvFGFXd5M8U/00-00-20.jpg) **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. ## Detailed Analysis The tutorial walks through creating a collapsible article stack component in Framer, starting with a static design and progressively connecting it to the CMS and adding interactive variants. First, the static article card is designed, including styling for the image, title, and bottom details (which contains the word 'ARTICLE' and an arrow icon). The speaker then connects this card design to the CMS 'Articles' collection, limiting the display to one item initially. Crucially, the structure for the collapsible effect is built using component variants: a 'Primary' (or 'Open') state where articles are stacked vertically, and a 'Closed' state where they are stacked horizontally and scaled down. Specific styling adjustments are made to achieve the visual difference: in the 'Closed' state, the background layer of the card is scaled down to 0.9, creating a visual stacking effect, while in the 'Open' state, the background scale is set to 1. For interactions, hovering over the primary card triggers the 'Hover' variant, which applies a scale transformation (zoom in) to the article image and changes the arrow icon's fill color to white. Clicking the card transitions the main component between the 'Open' and 'Closed' variants. Finally, the Z-index of the arrow icon's background layer is set to 0 in the closed state to ensure it appears behind the next card when stacking occurs. ### Initial Setup and CMS Connection - Showing the 'Stories from the Table' landing page setup - Dragging the 'Articles' CMS collection onto the canvas - Setting the limit to 1 item initially ### Article Card Design and Styling - Setting card dimensions (300x140px) and corner radius (15px) - Styling the title (Inter Extra Bold, size 18) and article text (Inter Medium, color #999999) - Styling the arrow icon (size 12x12, color white on hover) ### Creating Variants (Open/Closed) - Creating three variants in the component for Article 1, 2, and 3 based on date sorting (New to Old) - Naming the primary variant 'Open' and the second variant 'Closed' - Setting the 'Closed' variant to stack articles vertically and scale the background to 0.9 ### Interaction Setup - Linking the primary variant to the 'Hover' interaction, which transitions to the 'Open' state variant - Linking the 'Hover' variant back to the 'Closed' state variant on Mouse Leave - Linking the 'Article Card' component on click to transition between 'Open' and 'Closed' states ![Screenshot at 00:04: The presenter introducing the topic while showing the initial design featuring the article list on the hero section.](https://ss.rapidrecap.app/screens/WvFGFXd5M8U/00-00-04.jpg) ![Screenshot at 00:20: The screen showing the Framer interface with the Articles CMS collection instance on the canvas, displaying the three articles stacked vertically.](https://ss.rapidrecap.app/screens/WvFGFXd5M8U/00-00-20.jpg) ![Screenshot at 01:42: The step where the title element's parent container \('Stack'\) is created to manage the vertical arrangement of the title and detail text.](https://ss.rapidrecap.app/screens/WvFGFXd5M8U/00-01-42.jpg) ![Screenshot at 05:58: The component dialog box appearing after selecting the Article Card component instance, prompting the user to name the new component 'Article Card'.](https://ss.rapidrecap.app/screens/WvFGFXd5M8U/00-05-58.jpg) ![Screenshot at 10:07: The component interaction setup showing the connection between the 'Primary' \(open\) variant and the newly created 'Variant 2' \(closed\) variant, triggered by a Mouse Enter interaction.](https://ss.rapidrecap.app/screens/WvFGFXd5M8U/00-10-07.jpg)