Toplist
- Staggered
- Animation
Toplist
- Staggered
- Animation
Toplist
- Staggered
- Animation
3 Ways to Creating Staggered Animations in Framer
In this Framer blog, I'm showcasing 2+1 ways to build staggered animations in Framer. The first technique is the OG. It's how we always used to create these kinds of effects. The second way is pretty new and it makes our lives SO MUCH easier. The third way is something I only shared because I was in a good mood. It shows how you can achieve the same staggered effect within components.
Posted by
Nandi
Table of contents
1. Manual stagger using appear effects
We’ll start with a simple hero section, some text, a button, and a heading stacked vertically.
Here’s the trick:
Select all the elements you want to animate (for example, the stack, the text, and the button).
In the right panel, go to Effects → Appear.
Define how they come in — maybe from 0 opacity and a slight movement from the bottom.
1. Manual stagger using appear effects
We’ll start with a simple hero section, some text, a button, and a heading stacked vertically.
Here’s the trick:
Select all the elements you want to animate (for example, the stack, the text, and the button).
In the right panel, go to Effects → Appear.
Define how they come in — maybe from 0 opacity and a slight movement from the bottom.
1. Manual stagger using appear effects
We’ll start with a simple hero section, some text, a button, and a heading stacked vertically.
Here’s the trick:
Select all the elements you want to animate (for example, the stack, the text, and the button).
In the right panel, go to Effects → Appear.
Define how they come in — maybe from 0 opacity and a slight movement from the bottom.
Manual staggering with appear effects.
Manual staggering with appear effects.
Manual staggering with appear effects.
When you preview this, all elements will fade in together. It looks fine, but not great.
To create that signature staggered feel:
Select the first element and add a small delay (like 0.1s) to its appear transition.
Then select the next one and increase the delay (e.g. 0.15s), and the next (e.g. 0.2s).
Now, when you preview the animation again, everything flows in naturally, one after another. This manual method works perfectly for static pages or smaller sections like hero banners or feature cards.
2. Automatic stagger for CMS collections
Until recently, staggered animations weren’t possible for CMS-driven content in Framer, like blog posts, project cards, or product listings. But now there’s a new property that changes everything.
When you preview this, all elements will fade in together. It looks fine, but not great.
To create that signature staggered feel:
Select the first element and add a small delay (like 0.1s) to its appear transition.
Then select the next one and increase the delay (e.g. 0.15s), and the next (e.g. 0.2s).
Now, when you preview the animation again, everything flows in naturally, one after another. This manual method works perfectly for static pages or smaller sections like hero banners or feature cards.
2. Automatic stagger for CMS collections
Until recently, staggered animations weren’t possible for CMS-driven content in Framer, like blog posts, project cards, or product listings. But now there’s a new property that changes everything.
When you preview this, all elements will fade in together. It looks fine, but not great.
To create that signature staggered feel:
Select the first element and add a small delay (like 0.1s) to its appear transition.
Then select the next one and increase the delay (e.g. 0.15s), and the next (e.g. 0.2s).
Now, when you preview the animation again, everything flows in naturally, one after another. This manual method works perfectly for static pages or smaller sections like hero banners or feature cards.
2. Automatic stagger for CMS collections
Until recently, staggered animations weren’t possible for CMS-driven content in Framer, like blog posts, project cards, or product listings. But now there’s a new property that changes everything.
Auto stagger for CMS.
Auto stagger for CMS.
Auto stagger for CMS.
Here’s how it works:
When you add an Appear effect to a CMS Collection Frame, you’ll see a new option under the Transition settings called “Stagger.” This property automatically offsets each item’s animation based on its position in the collection.
So instead of adding individual delays manually, you can just set something like 0.05s or 0.1s, and Framer will handle the rest. Each CMS item will now appear with a perfectly timed delay, giving your grids, lists, and galleries that refined, “designed” feel with zero extra effort.
3. Triggered stagger animations inside components
What if you want a staggered animation that doesn’t play when the page loads, but when someone interacts with your site?
Let’s say you have a “Start Learning” button. When clicked, you want it to disappear and reveal two text elements, one after another.
Here’s the move:
Wrap everything inside a Component and create two Variants:
Start (button visible, texts hidden)
Show (button hidden, texts visible)
Animate between these two variants by connecting the button’s onClick to the “Show” variant.
Now, to add a stagger, select the text elements in the “Show” variant.
Go to the Transition settings and add a delay (for example, 0.1s for the first, 0.2s for the second).
Preview it, and there it is: the text appears beautifully one after another when you click the button.
This approach is awesome for interactive reveals, component transitions, or dynamic sections where animations need to respond to user actions instead of just page load.
Wrapping up
So, here’s what we learned today:
Method 1: Add delays manually for static sections like hero banners.
Method 2: Use the new Stagger property for CMS collections to automate the process.
Method 3: Apply delays inside component variants for interactive, click-triggered animations.
Whether you’re building static pages, CMS-driven layouts, or interactive components, staggered animations will instantly make your site feel more polished, intentional, and premium.
Here’s how it works:
When you add an Appear effect to a CMS Collection Frame, you’ll see a new option under the Transition settings called “Stagger.” This property automatically offsets each item’s animation based on its position in the collection.
So instead of adding individual delays manually, you can just set something like 0.05s or 0.1s, and Framer will handle the rest. Each CMS item will now appear with a perfectly timed delay, giving your grids, lists, and galleries that refined, “designed” feel with zero extra effort.
3. Triggered stagger animations inside components
What if you want a staggered animation that doesn’t play when the page loads, but when someone interacts with your site?
Let’s say you have a “Start Learning” button. When clicked, you want it to disappear and reveal two text elements, one after another.
Here’s the move:
Wrap everything inside a Component and create two Variants:
Start (button visible, texts hidden)
Show (button hidden, texts visible)
Animate between these two variants by connecting the button’s onClick to the “Show” variant.
Now, to add a stagger, select the text elements in the “Show” variant.
Go to the Transition settings and add a delay (for example, 0.1s for the first, 0.2s for the second).
Preview it, and there it is: the text appears beautifully one after another when you click the button.
This approach is awesome for interactive reveals, component transitions, or dynamic sections where animations need to respond to user actions instead of just page load.
Wrapping up
So, here’s what we learned today:
Method 1: Add delays manually for static sections like hero banners.
Method 2: Use the new Stagger property for CMS collections to automate the process.
Method 3: Apply delays inside component variants for interactive, click-triggered animations.
Whether you’re building static pages, CMS-driven layouts, or interactive components, staggered animations will instantly make your site feel more polished, intentional, and premium.
Here’s how it works:
When you add an Appear effect to a CMS Collection Frame, you’ll see a new option under the Transition settings called “Stagger.” This property automatically offsets each item’s animation based on its position in the collection.
So instead of adding individual delays manually, you can just set something like 0.05s or 0.1s, and Framer will handle the rest. Each CMS item will now appear with a perfectly timed delay, giving your grids, lists, and galleries that refined, “designed” feel with zero extra effort.
3. Triggered stagger animations inside components
What if you want a staggered animation that doesn’t play when the page loads, but when someone interacts with your site?
Let’s say you have a “Start Learning” button. When clicked, you want it to disappear and reveal two text elements, one after another.
Here’s the move:
Wrap everything inside a Component and create two Variants:
Start (button visible, texts hidden)
Show (button hidden, texts visible)
Animate between these two variants by connecting the button’s onClick to the “Show” variant.
Now, to add a stagger, select the text elements in the “Show” variant.
Go to the Transition settings and add a delay (for example, 0.1s for the first, 0.2s for the second).
Preview it, and there it is: the text appears beautifully one after another when you click the button.
This approach is awesome for interactive reveals, component transitions, or dynamic sections where animations need to respond to user actions instead of just page load.
Wrapping up
So, here’s what we learned today:
Method 1: Add delays manually for static sections like hero banners.
Method 2: Use the new Stagger property for CMS collections to automate the process.
Method 3: Apply delays inside component variants for interactive, click-triggered animations.
Whether you’re building static pages, CMS-driven layouts, or interactive components, staggered animations will instantly make your site feel more polished, intentional, and premium.
