Framer Update, Animations

Framer Update: Lightbox Effect

Benjamin

2:16

14K views

Sep 22, 2025

About this lesson

Introducing the Lightbox Effect, the easiest way to add high-fidelity lightbox interactions to your images in Framer. On click, your images will seamlessly animate from their current position to an overlay. Perfect for portfolios and galleries. The Lightbox Effect also works with the Framer CMS, letting you add these interactions to all images with a single click. Simple, smooth, and seamless.

https://www.framer.com/updates/lightbox-effect

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

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

0:00Yo, my name is Benjamin and in this 0:02video I'm excited to introduce a brand 0:05new effect. Meet the lightbox effect.0:09This is a popular interaction pattern on 0:12the web and we've made it incredibly 0:15easy to add this to your sides in 0:17Framer. Here's how. On our canvas here,0:20we have a collection list. So, our 0:23content is sourced from the CMS. I'll 0:26select the first item in the list and 0:28I'll head over to the effects panel and 0:31I'll add our new lightbox effect. This 0:35gives us a few properties to customize 0:38like the maximum width of our image when 0:40opened, the padding around our image,0:43the Zindex aka the visual hierarchy, the 0:48color of the backdrop behind the image,0:51and of course the transition where we 0:53can customize the animation. I'll set 0:56bounce to 15. And then let's give this a 1:00preview. And just like that, with a 1:03single click, we have added a lightbox 1:06effect to all of our images. Framer 1:10gives us seamless transitions with 1:12incredible fidelity. This new effect is 1:15so easy to add and yet it's completely 1:19customizable. Unlike many other 1:21solutions, our lightbox keeps your 1:24images sharp when opened without 1:27sacrificing optimization or performance.1:30Plus, we let you animate properties like 1:33radius and border. And we make sure that 1:36animations still work even when your 1:39images are placed inside of a layer that 1:42would normally clip it. And we provide 1:44the highest fidelity transitions where 1:47you can control the spring or easing 1:50curves. That's the lightbox effect in 1:53Framer. It works seamlessly with our 1:56recently released sizing option and it 1:59even works with animated images as well.2:02And that's it for this video. Thank you 2:05so much for watching and stay tuned for 2:08more updates coming soon.

TeachesComponent Effects

Also coversCollection Lists Collections Sizing Spacing Transitions & Easing

Watch on YouTube ↗

‹ Framer Update: Stagger Effects

Animating transitions between pages in Framer (Animation Lesson 14) ›