Layout & Design · TOPIC

Stacks

Every Framer lesson that teaches or touches on Stacks

Lessons that teach this

11 lessons teach this topic

6:25

Creating a fixed footer reveal in Framer

Layout & Design

6.7K views

February 4, 2026

13:14

Building an Expanding Article Stack in Framer

Animations, Layout & Design

3.7K views

February 3, 2026

5:09

Fading the edges of a Ticker in Framer

Layout & Design

8.2K views

January 16, 2026

7:46

Stacks vs Grids in Framer (Fundamentals Lesson 8)

Layout & Design

59K views

November 20, 2024

7:37

Sizing to Fill and Fit Content in Framer (Fundamentals Lesson 7)

Layout & Design

65K views

November 4, 2024

8:05

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)

Layout & Design

88K views

October 22, 2024

3:33

Framer Update: Stacks, Breakpoint Switcher, Text Stroke

Framer Update, Layout & Design

14K views

May 23, 2024

2:37

Framer Update: January 2024 with Layout Menu

Framer Update, Layout & Design

6.9K views

January 30, 2024

4:17

Framer Update: Stack Variables

Layout & Design

17K views

December 7, 2023

19:49

Make A Responsive Navigation With Dropdown Menus From Scratch

Layout & Design, Navigation

63K views

October 20, 2023

2:16

Framer Update: Stack Sorting and Bento Grids

Framer Update, Layout & Design

6.9K views

March 31, 2026

Where it comes up

284 moments across 74 lessons

Stacks and Relative Positioning in Framer (Fundamentals Lesson 6)Joseph

0:00Stacks allow us to create rows or 0:18the browser change size Stacks not only 0:30lesson we're going to look at how stacks 0:56now I want to get you thinking in Stacks 1:00a stack is a frame but a frame with a 1:19stack and automatically arranges its

Practice: Designing Fluid Layouts in Framer (Fundamentals Lesson 24)Joseph

1:40width of the breakpoint and stack one 5:50have a stack layout. But because it's 5:57to turn that into a stack. So, I'm just 6:08the left side is not a stack, but that's 7:22horizontal stack that is set to 10:14adding a stack layout and then setting

Stacks vs Grids in Framer (Fundamentals Lesson 8)Joseph

0:00stacks and grids are two powerful layout 0:15Stacks but now let's talk about how 0:27the difference between stacks and grids 0:32Stacks are used to arrange elements in 0:41a single Direction Stacks automatically 0:52CSS Stacks are based on Flex box grids

Building an Expanding Article Stack in FramerFramer

0:58limit on the article stack to one. Now,1:02let's select the article stack and give 1:40fill and then wrap it in a stack.1:44This stack is going to hold all the 2:15Then we'll wrap it in a stack.2:39bottom details stack. Then we're just

Sizing to Fill and Fit Content in Framer (Fundamentals Lesson 7)Joseph

0:00Stacks not only allow us to create rows 0:26side Stacks can also be set to fit 0:45stack of text boxes for a minimalist 0:58time let's say we're Crea a stack of 1:26positioned layers within a stack or grid 2:10horizontal stack each set to one FR

Make A Responsive Navigation With Dropdown Menus From ScratchBenjamin

0:14have a navigation stack and all it 0:17currently contains is a stack with an 0:30text layer onto this stack then I'll 0:55and I'll right click to add a new stack 1:37add stack and then I'll right click 5:30the direction of the phone stack itself

Absolute Positioning in Framer (Fundamentals Lesson 5)Joseph

0:43content in a stack or grid fixed where 4:57going to dive into stacks and relative 5:00come across a stack I want you to be 5:09vertical stack layout which means each 5:15stack so dragging simply rearranges the 5:26stack doesn't mean I can't head over to

Creating a fixed footer reveal in FramerJoseph

0:48and I'm going to choose to add a stack 0:53with a stack layout. And then I'm going 1:03got my main stack of content on the 1:09also a stack. And that's going to allow 4:30stack and it's fitting itself to the 4:32content of the stack. Anything that's

Styling Frames in Framer (Fundamentals Lesson 16)Joseph

4:42Shadow to a frame you can stack them up 5:46stack several Shadows that give us a 7:39going to wrap them in a stack I'm going 7:45stack so now I have two of these cards 7:50we've got a stack of three cards now if 8:15with Stacks grids anything with relative

Navigations: Desktop MenusBenjamin

2:01variant and select the wrapping stack of 2:39this logo and button stack that is 2:47space in our stack it will always be 2:56the navigation itself is a stack so 3:15items right click and I'll hit add stack 3:22this stack to fill I'll also set a line

Framer Update: Flow EffectBenjamin

1:03jumps. The answer is a simple stack 1:13effect onto [music] this stack. And then 1:31parent stack here, which is just the 1:45a stack. However, if we now give this a 2:45because I also have a stack wrapped 2:51will also add it to this stack ensuring

Importing from Figma and the Web to Framer (Fundamentals Lesson 14)Joseph

3:43layout I've established a stack so now 3:47that this is a stack theoretically each 3:53vertical stack and it's set to 3:57top uh of a vertical stack the other 4:29stack of features that are comprised of 10:52stack layout because these things are

Framer Community Show & Tell August 3, 2023—Jia Yu Hong from LottieFiles and Paul LapkinFramer

36:00and these are both nested inside a stack 36:06you need to kind of put create a stack 36:29horizontal scroll stack 39:09stack here that I created for the title 39:51stacks for line one line two and line 41:24need to make sure that the uh the stack

Framer Update: Stack Sorting and Bento GridsBenjamin

0:11row and column tools into a single stack 0:24stack sorting with the goal of making it 0:38any layer in a stack will also feel 0:50any layer from any stack to any other 0:53stack. No more copy and pasting 0:57supported within the parent stack of

Framer Update: Ticker EffectBenjamin

1:52it to [music] any stack in Framer. So 1:55this stack has the ticker effect applied 2:15stacks and on hover it slows down and 3:18any [music] stack, and can be customized 3:54our stack here to indicate this section

Practice: Creating Breakpoints in Framer (Fundamentals Lesson 25)Joseph

5:34by switching it from a grid to a stack 5:36and making it a vertical stack. Pretty 8:17the stack. And that actually did not 15:08this. We could change this from a stack 15:19horizontal stack, we could just enable

Form Input Variants and Validation in FramerJoseph

1:32parent frame is a vertical stack and the 1:37meaning it follows the flow of the stack 1:44with the bottom of the stack it's in by 1:46changing the stack to distribute from 1:50vertical stack means from bottom rather

Navigations: Mobile MenusBenjamin

0:47and it is contained in this shared stack 0:55hide that again next we have this stack 1:06links pointing to framer.com this stack 1:45and the direction of this stack to be 1:57and then we'll stretch out this stack by

8 Framer shortcuts you're probably sleeping onJoseph

1:56Number five. Stacks normally set their children to relative positioning so 2:41and height to fit. As a bonus, if the frame isn't already a stack, it'll au 2:59It'll instead wrap the selection in a stack and make it full with, which is 3:23We just talked about a few ways to wrap a layer in a frame or stack, but wh 3:46the hierarchy is a stack, the unparanted layers will shift into the flow of

Min and Max Sizing in Framer (Fundamentals Lesson 11)Joseph

1:44cards and a horizontal stack that wraps 3:56stack this wraps a new frame around our 3:59selection adds a stack layout sets the 5:40vertically centered in the stack the

Framer Update: January 2024 with Layout MenuBenjamin

0:09I'll select rows one of the stack 0:21preset I get a horizontal stack with two 0:33fully containing them the stack tool is 1:26make stacks more flexible in daily use

Fading the edges of a Ticker in FramerFramer

0:38whatever you select in a stack and it 0:59Now we've got these two stacks, but a 1:51images. So, with both ticker stacks

Animating between variants on scroll in Framer (Animation Lesson 10)Joseph

1:18long stack of these text frames and then 2:06stack that has the phone in it and then 2:08has that stack of text frames next to

Fixed, Relative, and Viewport Sizing in Framer (Fundamentals Lesson 10)Joseph

1:23example let's say I've got a stack of 5:54a stack or grid fixed where the position 6:25fill within a stack or grid fit content

4 Ways to Update Form Status in FramerJoseph

3:17aren't Stacks so we'll have to use 4:48variant has a vertical stack layout 4:57stack let's actually switch the position

Framer Update: Stacks, Breakpoint Switcher, Text StrokeBenjamin

0:03what's new in the May update first stack 0:13stack we will now try to automatically 0:32contents within your stack this is one

Framer Update: MaskingBenjamin

4:50pattern this is a stack of images and we 5:31and just like that we have a stack of 6:06stack multiple masks we allow you to

Framer Update: Component EffectsBenjamin

5:01parent stack and I'll add a scroll 5:16homepage you can see that this stack 5:33stack set the viewport to Center and

Navigations: Mobile Menus 2Benjamin

1:23stack by setting opacity to 1.6:33so first let's select the link stack in 8:16animate this parent stack as well and we

Framer Update: Quick InsertBenjamin

1:24collection list and a horizontal stack 1:28within it with the stack selected I'll 1:42that it gets added onto our stack this

Framer Sites: Min Max and Aspect UpdateFramer

0:54of an image in a stack nor could you 1:19even if it's in a stack 2:37text so i can select this parent stack

Scaling a clipped image on hover in FramerJoseph

1:36it in a stack. Make sure the width is 3:13wrap it in a stack. The most important

Triggering video playback on scroll in FramerJustin

1:14into a stack. This sets both the width 1:23we'll rightclick our stack and select

Framer Update: Zooming, Layout, and moreBenjamin

0:11sizing stack second I can now use enter 0:22canvas either in a stack or a frame we

Fixed and Sticky Positioning in Framer (Fundamentals Lesson 9)Joseph

1:31flow of the stack this means it'll no 2:41stack or grid and every parent frame all

Framer Update: October 2024Benjamin

2:10Stacks here we have a simple navigation 2:31the stack very useful for Rapid layout

Framer Update: Text Balance, Page Sorting, and moreBenjamin

0:29your breakpoint is a stack and you 1:17stack I'll set direction to horizontal

Framer Update: FormsBenjamin

0:49are just stacks and they serve to 3:37stack then I'll quickly set overflow to

Creating your first form in FramerJoseph

0:53stack layout applied by default which 1:03this is a regular stack that we can

Framer Update: Custom CursorsBenjamin

15:30stack and the component itself is a 15:33stack that simply changes the distribute