Animations, Layout & Design
Building an Expanding Article Stack in Framer
Building an Expanding Article Stack in Framer
Building an Expanding Article Stack in Framer
Wes
·
13:14
·
3.7K views
·
About this lesson
In this tutorial, you’ll learn how to build a collapsible article stack in Framer that pulls live content from your CMS and fits neatly into a hero section.
We’ll design a CMS-connected article card, add hover interactions, and create an expanding stack effect with open and closed states. This pattern is perfect for editorial websites, blogs, and landing pages that want to showcase recent articles without cluttering the layout.
By the end, you’ll have a reusable Framer component that updates automatically from your CMS and works seamlessly inside a hero section.
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=0s - Intro & Demo
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=20s - Building the Article Card
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=290s - Styling Text
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=354s - Creating a Component
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=410s - Adding a Hover State
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=545s - Building the Card Stack
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=605s - Building the Closed State
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=722s - Linking Hover States
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=752s - Adding to the Hero Section
https://www.youtube.com/watch?v=WvFGFXd5M8U&t=768s - Outro & Preview
Sign up: https://framer.link/yt
Follow: https://framer.link/yt-x
0:00So, check out this clean way of0:01showcasing your latest articles on your0:04hero section. It works really well for0:06editorial websites and blogs. Plus, it0:09updates [music] straight from your CMS.0:11It seems fairly advanced,0:14but I'll let you in in a secret. It's0:17not. Let me show you how simple it is to0:19build. So, I've got a hero section here0:21as well as the default blog CMS0:23collection. and I just switched out the0:26default titles and images to fit the0:28theme of this online magazine type of0:31site. So, the first thing we're going to0:33do is build our article card. And since0:35we want it to be connected to our CMS,0:37let's go to insert CMS collections.0:41Then, we'll just drag the articles0:43collection right next to the breakpoint0:45so we have some room to build. Right0:47now, you can see three CMS items. And0:50you might see even more than that. You0:51might see 10 depending on how many items0:54you have inside of your CMS collection.0:56We just want one. So, let's set the0:58limit on the article stack to one. Now,1:02let's select the article stack and give1:04it a width of 380 and a height of 140.1:08It's starting to look a little bit more1:10like an actual card now. Let's set the1:12padding to 10,1:14the fill to white, and the radius to 15.1:19Then select the image, lock the aspect1:23ratio so that it stays square shaped,1:25and set the height to fill.1:28Let's also set the radius of the image1:30to five so that it's nice and snug and1:33align with the radius of the card. We1:36should probably give the text a bit of1:37love now. So, let's set its width to1:40fill and then wrap it in a stack.1:44This stack is going to hold all the1:45details in it, like the article name for1:48instance. So let's just name the layer1:50details.1:52Then we'll set the height to fill,1:56distribute to space between, and align2:00to left. Now this text is our title, but2:03we also need a bit of text underneath it2:05that says what kind of content it is. So2:08we'll duplicate it, unlink its content2:11variable,2:12and write article.2:15Then we'll wrap it in a stack.2:17Change the direction to horizontal.2:20And then we're going to name this layer2:21bottom details. And now you could leave2:24it like this. It doesn't look bad. But2:26to make sure it's really obvious that2:28this takes you to a new page, like2:30somewhere else when you click it, let's2:32add an arrow icon. Go to insert icons2:36and drag the material one into the2:39bottom details stack. Then we're just2:41going to change the size to 12. and we2:44want the icon that's called arrow2:46forward.2:48So, we've got our arrow and it's looking2:50pretty good. Again, we could leave it2:52here, but the design that we're trying2:54to build has a circle that pops up2:56behind the icon when you hover over it.2:59So, let's build that. Wrap it in a3:01stack, then shift A to fit the content.3:05This is the icon wrapper, so let's name3:08the layer that. Select the frame tool3:11and draw a frame inside the icon3:14wrapper. Then set the width and height3:16to 20 and lock the aspect ratio. Then3:20let's set the fill to one. Yes, just3:22one. Not all the way black. It's just I3:26don't know. It's I like it. [laughter]3:29Then we just add a 10 pixel radius to3:32make it a circle. We'll name this layer3:34background.3:36We actually want this to be behind the3:38arrow. So, let's switch the position to3:40absolute,3:42then pin it to the center.3:45Now, you'll notice that that unlocked3:47our aspect ratio. It's fine. Guess we'll3:49just do it again. So, lock it again and3:52switch the size back to 20. Now, trust3:55me, it looks like a square, but you3:57know, it's a circle. It just looks like3:59a square right now because it's being4:01cut off. The shape is being cut off by4:04all the parent layers. So to fix that,4:06we'll just switch the overflow of all4:09the parent layers to visible until we4:11can see the circle.4:14All right, it's looking good. We got our4:16circle back, but uh now the arrow is4:18completely missing. It's still there.4:20It's just behind the background layer.4:23So let's fix that. So let's switch the4:25zindex of the background to zero. And4:28we'll need to add zindex to the arrow by4:31clicking styles zindex. and we want it4:35set to one so that it's above the4:37background which is zero. Then if we4:39just change the fill to white, we'll be4:41good to go. Okay, make the icon a little4:44bigger. Let's do 15 pixels.4:47And now we're good to go. Now let's4:49style the text. So select the bottom one4:51first. Unplug the text style. Change the4:54weight to medium,4:57the color to nine. All nines, right? I5:00like it simple. It's just a nice gray5:02color that's easy to punch in. Just5:04press 9 once and then hit enter. The5:06size to 14, letter to 0035:11and line to one. Now we can style the5:14title. So select it and unplug the text5:17style like we did with the last one.5:20Change the weight to extra bold,5:24size to 18,5:26letter to 03,5:29and line to 1.2. We'll also top it off5:32by adding a shadow to the article layer.5:34We'll make the color opacity 10%.5:38And we just want the blur to be 10 and5:40everything else is zero. So now we have5:43our card fully built and connected to5:45the CMS. But right now it's just static.5:48There's no interactivity, no hover5:51state, no nothing. So let's add just5:54that. With the parent layer selected,5:56we'll turn it into a component and name5:58it article card.6:01We want three variants, so create two6:04more.6:06We'll name them article one,6:08article 2, and article 3. Select article6:13two, click content, start offset. Now,6:17this one should actually be one. So,6:19that's perfect. Then we'll do the same6:21thing with article three except it6:23should start at two. So now we have6:26three separate articles being displayed6:28here. And what we want to do is we want6:30to make sure that article one is the6:31most recent, article two is the second6:33most recent and article 3 is the third6:36most recent. So select article one,6:39click sorting6:42date,6:43new to old. So now this works. So it6:46sorts from newest to oldest. All right.6:49So let's create a hover state for the6:51primary variant now. And there are three6:53parts to this. We want the image to zoom6:56in when we hover. We want the text to6:59change color. And there's also a little7:01animation that we want to set up for the7:03arrow. So let's start with the image. So7:06to make the image zoom in when we hover,7:08we literally we're just going to make7:10the image bigger, but we're going to7:11wrap it in a container that stays the7:13same size so that it looks like it's7:15zooming in. So select the image on the7:17hover state. Click transforms7:21scale7:23and then set it to 1.1.7:26Then select the image on the default7:28state, wrap it in a frame. This is a7:31better time than any to name the layer.7:33We'll name it image wrapper.7:36Set the overflow to clip7:39and then set the radius to five. So7:42let's check the preview. And it's7:44looking good. So we can move on to the7:46text now. Literally, this is going to be7:47so easy. You just click the title in the7:50hover variant and change the color to7:53any color. Now, I'm going to paste in a7:56hex code for a nice orange.7:59And it's literally just that simple.8:01We're just changing the color. Okay. So,8:03next is the animation for the arrow8:06icon. The arrow icon itself and the8:09background. We want the background to8:11basically scale up from nothing. Um, so8:14let's select the icon background in the8:17default state and we'll set the scale to8:20zero.8:22But now we can't see the arrow. So let's8:25make the arrow darker.8:28Then we'll go to the hover state and put8:30them back to what they were. So the8:32arrow will be white8:34and the background scale is going to be8:36one. Now here's the fun part. We get to8:40do the same thing that we just did for8:43the hover state of variant one. We get8:45to do that for variant two and three.8:47Now, it's so fun that I'm going to do it8:50off of camera so I can8:53soak it in. So, now we have three8:55article cards with hover states all8:57hooked up to the CMS and showing the8:59three latest articles. So, we can just9:01back out of the component and we can9:04start to turn it into a collapsible9:05stack. There's two states to this9:07interaction. a closed state where it's9:10collapsed into a stack of cards and an9:12open state where all the cards are9:14spread out above each other. Now, we're9:16going to start by building the open9:19state first. So, with the component9:21selected, we're going to hit shift A9:23twice. The first one wraps it in a stack9:26and the second one sets the width and9:27the height to fit. So, we're also going9:29to rename the layer to articles. Then,9:32select the card and duplicate it twice9:34so that there's three cards in total.9:36Now, we obviously don't want them to9:38stack sideways like this. So, switch the9:41direction of the article stack to9:43vertical. While we're here, we can set9:45the overflow to visible so that the9:48shadows from the cards aren't being cut9:50off. Then, we can set the variance so9:52that the bottom is article one, which is9:54the most recent, and then middle is two9:59and the top one's three.10:02This is our open state. So let's turn it10:06into a component and make a new variant.10:10This is going to be our closed state. So10:12let's name the first one open10:16and the second one closed. Okay, I've10:18got some science to show you. Got this10:20book here. Now the science isn't in the10:22book. The science is the book. So just10:26bear with me. I hold this close to you.10:28How big is it? I hold it far away from10:31you. Now how big is it? Now keep this in10:34mind. I'm not going crazy. Neither are10:36you. Don't worry. It's relevant. Just10:37hang on. Okay. So, in the closed10:39variant, select the top and middle card10:42and then set the scale to 0.9. Then just10:46set the middle card, just the middle10:47card alone, just set the scale to 0.95.10:50Does this make sense now? Right. So,10:53we're creating depth between the cards.10:55So now when we actually stack them, it10:57really does feel gives the illusion that10:59we can tell that the back one is further11:03away than the front one. And it just it11:05makes more sense to our brains. Okay. So11:09now select them both again and set the11:11position to absolute. Now they're11:14stacked in front of each other exactly11:15like we want, but according to the11:18science that you and I just explored, uh11:21we want the smaller ones to be in the11:23back. So in the primary variant, select11:25the bottom card and click styles11:29zindex and set it to three since this is11:32the front one. Then the middle, set it11:34to two11:36and then set the top card to one.11:40Right now it just looks like a single11:41card. So to make it obvious that there11:43are cards behind this one, let's select11:45the middle card and move it up using the11:49arrow keys until the image is just11:51peeking out over the top.11:53And then we're going to select the top11:54card and do the same thing.11:58And that's it. So we now have our open12:00and our closed state. So now we can just12:03link up our interactions by selecting12:05the closed variant, hitting L, and12:08clicking the open variant. And we want12:10it to trigger on mouse enter. And then12:13we just link open to closed12:16on mouse leave.12:18Let's give it a preview. See if it's12:20working.12:21Oh yeah, that's looking schmick.12:24I don't remember the last time I said12:26schmick. I'm going to try real hard to12:28make sure I never do it again. Okay,12:30let's back out. Drag this component onto12:33the page. Set the position to absolute.12:38Pin it to the bottom right by 20 pixels.12:42Switch the variant to closed. And now12:45you just you just stand back and you12:47just admire a job well done. So, you've12:50got a clean, collapsible stack of12:52articles that pull straight from your12:54CMS. Super cool effect, but as usual,12:57very powerful. So, just promise me12:59you'll use it wisely and I'll see you13:02next time.
More in this topic
2:05Framer Update: Logo Shaders
Framer Update12K views · 1 month ago
4:198 Framer shortcuts you're probably sleeping on
Layout & Design3K views · 2 months ago
1:46Framer Update: Holo Shader
Framer Update6K views · 2 months ago
2:16Framer Update: Stack Sorting and Bento Grids
Framer Update7K views · 2 months ago
1:56Shader: Chromatic Aberration
Framer Update7K views · 2 months ago
2:28Framer Shaders
Announcement23K views · 2 months ago
3:41Sharing Vector Sets Across Projects (Vectors Lesson 7)
Layout & Design1K views · 3 months ago
3:38Connecting Vector Sets to the Framer CMS (Vectors Lesson 6)
Layout & Design2K views · 3 months ago