Framer Update, Animations

Framer Update: Flow Effect

Benjamin

3:49

16K views

Dec 11, 2025

About this lesson

Introducing the Flow Effect, a simple yet powerful new addition that lets you animate sections in response to any interaction or component. A common example is an accordion in a FAQ where the question rows expand or collapse smoothly, but adjacent sections jump instantly, breaking the illusion and lowering the overall fidelity. To avoid this, people typically nest multiple sections inside components just to force everything to animate, which makes sites heavier and editing more complicated. The Flow Effect solves this. Add it to your Page and the wrapping Stack of your component, and all sections will automatically animate together. https://www.framer.com/updates/flow-effect

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

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

0:00[music]0:05[music]0:11Yo, my name is Benjamin and this is the 0:14flow effect. A simple yet powerful 0:17effect that lets you animate other 0:20sections on your page in response to any 0:23interaction or interactive component.0:26The best example of this is designing an 0:29accordion, one that can expand and 0:32collapse on click. These typically have 0:36rows with questions that are often set 0:38up like this. The primary variant is the 0:42expanded state, ensuring we can freely 0:45edit the layout without creating 0:47accidental overrides. [music] And here 0:50we want height set to fit. Whereas on 0:53the closed variant we can set height to 0:56fixed. This in turn lets us animate out 1:00the answer without causing any layout 1:03jumps. The answer is a simple stack 1:07containing text. [music] And within the 1:10closed variant, we also apply a blur 1:13effect onto [music] this stack. And then 1:16we&#39;re preventing said layout jumps by 1:18only hiding the text or the question 1:22using opacity, not visibility. And we 1:25can even apply unique transitions to 1:28each of these layers. And of course, the 1:31parent stack here, which is just the 1:34variant itself, clips its content using 1:37overflow clip. Now on the main page, we 1:41have each of these question instances in 1:45a stack. However, if we now give this a 1:48preview, the rows animate, but nothing 1:51else on our simple page here respects 1:55that transition. The rest of the page 1:58jumps instantly, which kind of [music]2:00breaks the illusion and leads to a lower 2:03fidelity feeling interaction. This is 2:07where our new flow effect comes in. I&#39;ll 2:10simply select my break point. Head over 2:13to the effects panel. And this will now 2:16give me the option to add a flow effect.2:20This is a super simple effect. And all 2:23it really does is let the nested 2:26sections of this page animate along 2:29interactions like the accordion we just 2:32made. [music] And we can customize the 2:34transition values it uses to do this.2:38This would already work if our 2:40interactive component was directly 2:42placed within the break point. But 2:45because I also have a stack wrapped 2:48around my questions in this setup, I 2:51will also add it to this stack ensuring 2:55it animates along. In these cases, we 2:58will automatically grab the transition 3:00values from the page level effect and 3:04apply them as the defaults. [music]3:06And now, in just a few clicks, we&#39;ve 3:09made all content on this page adapt 3:13beautifully to our interactive 3:15components without having to resort to 3:18deeply nested components just to get 3:22other sections to animate along, leading 3:25to lighter pages that are much easier to 3:28customize. And soon, we&#39;re also adding 3:32this effect to layout templates. That&#39;s 3:34it for [music] this video. Thank you so 3:37much for watching and stay tuned for 3:40more updates coming soon.

TeachesComponent Effects Component Variants

Also coversComponents Layout Templates Sizing Stacks Templates Transitions & Easing

Watch on YouTube ↗

‹ Triggering video playback on scroll in Framer

Framer Update: Localized Page Paths ›