Framer Update, Animations

Framer Update: Stagger Effects

Benjamin

2:32

12K views

Sep 25, 2025

About this lesson

Introducing Stagger, a new property for Appear Effects in Framer. Stagger is now available on any layer within a Collection List, so it’s ideal for CMS-based layouts. You can find it within the Transition properties. Just like the Lightbox Effect before it, this lets you benefit from using the CMS in your designs, as you can now add sequenced animations with a single click. A simple editing experience for your content, with the flexibility to add motion. Available now in Framer. https://framer.com/updates/stagger-effects

Follow: https://framer.link/yt-x

Learn: https://framer.link/yt-academy

0:00[Music]0:00Yo, my name is Benjamin and this is 0:04Stagger for appear effects, a new 0:07property that unlocks appear animations 0:09for CMS-based setups. You see, as we 0:13were building light box, a new effect 0:16that works especially well with 0:18collection lists in Framer, we realized 0:21that our most popular effect, the appear 0:24effect, doesn't work so well when used 0:26within CMS-based setups. As you can see 0:29right here, there's no way to animate 0:32each item individually. That's why we're 0:35adding the stagger property. When adding 0:38an appear effect to an item in a 0:41collection list, you can now find 0:43stagger within the transition 0:45properties. I'll set time to 8, bounce 0:49to 04, delay to.1, and stagger to 0.04.0:57And now when I refresh a few times, you 1:00can see that each individual image 1:02animates in gently with a small delay in 1:06between. So to clarify, delay is for the 1:09initial delay, the starting delay of the 1:12entire animation. And stagger is for the 1:16delay per item for each item in your 1:20collection list. And adding this to 1:22other layers in a collection list is as 1:25easy as copy and pasting it. As we can 1:28rightclick on the effects header to 1:31paste it onto our text layer. And now 1:34when we give this a preview, you can see 1:37we have created this gentle appear 1:39animation that is completely 1:42customizable and we did it in just a few 1:45clicks. This also unlocks new 1:47interactions and animations when dealing 1:50with CMS pageionation. Here on our 1:54images and the text layers, we have set 1:57the stagger property to 0.1. And on the 2:00collection list, I'm using pageionation 2:03to only show five items at a time. This 2:07means whenever we click load more, all 2:11new items animate in individually. Let's 2:14play that one more time. So, this 2:17release brings new animation 2:20capabilities for CMS driven layouts.2:23That's stagger in appear effects.

TeachesStagger Appear Effect

Also coversCMS Pages / Dynamic Content Collection Lists Collections Transitions & Easing

Watch on YouTube ↗

‹ Creating persistent animations between pages in Framer (Animation Lesson 15)

Framer Update: Lightbox Effect ›