Framer Update, Animations

Framer Update: Flow Effect in Layout Templates

Benjamin

2:12

10K views

Feb 20, 2026

About this lesson

The February Updates brings Flow Effect support to Layout Templates. The Flow Effect lets you animate sections in response to interactions or components. Useful for things like Accordions in FAQ sections. Today, we’re bringing this effect to Layout Templates, unlocking new navigations and instant usage across all pages. Watch the video to learn more. Plus, a lovely set of fixes: https://framer.com/updates/february-update-2026

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

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

0:00Yo, my name is Benjamin and in this 0:03release, we're bringing the flow effect 0:05to layout templates. The flow effect is 0:08something we shipped a few months ago 0:10that lets you animate sections on your 0:12page in response to other interactions 0:15or animations. This is especially useful 0:18for components like accordians. Today,0:21we're bringing this effect to layout 0:24templates, which unlocks a ton of new 0:28use cases. The biggest one being new 0:31navigations. Here we have a simple top 0:34bar navigation that turns into a menu on 0:38the phone breakpoint. When we give this 0:40a preview, you can see that the 0:42navigation itself animates, but the 0:45contents on my page do not. In this 0:48case, you might be better off just 0:50making the navigation instant as this 0:53doesn't feel right. If we take a look at 0:56my setup here, you can see that the 0:58navigation instance [music]1:00within the layout template has height 1:02set to fit. This is good as we want the 1:05navigation to animate its height. And 1:08within the navigation itself, we have a 1:11transition between the two variants.1:14Now, instead of setting this to instant,1:16we're going to keep this nice spring 1:19transition. And we're going to go back 1:21to the layout template. And now we can 1:24simply apply a flow effect to the 1:27primary break point in our template. And 1:30we can make sure we use the same values 1:33as we use in the navigation, which in 1:36our case are just the default spring 1:39values. And if we now give this another 1:42preview, our entire page now animates 1:45along with the height changes of our 1:48navigation. And because we're using a 1:51layout template, this will now work on 1:53every single page of our site. And it 1:56only took a few clicks [music] to set 1:58up. That's it for this video. Thank you 2:01so much for watching, and stay tuned for 2:04more updates coming soon.

TeachesComponent Effects Layout Templates

Also coversBreakpoints Component Variants Components Templates Transitions & Easing

Watch on YouTube ↗

‹ Framer Sites: Min Max and Aspect Update

Customizing Vectors with Variables in Framer (Vectors Lesson 4) ›