Framer automatically optimizes images, resizing them to make them smaller when needed, and converting to modern formats with better compression. Today, we’re introducing support for AVIF, a new image format known for its superior quality and efficiency. The AVIF format is widely supported by modern browsers and offers smaller file sizes while maintaining high image quality, often up to 50% smaller than JPEG and even WEBP, the previous format we’ve been using. Starting today, every Framer site will automatically benefit from AVIF support. There’s no need to republish your site, the transition is seamless and will roll out gradually.

This update significantly enhances the Framer CMS, making it more robust and better equipped for handling larger sites. Now supporting collections of up to 100.000 items, it eliminates the previous errors associated with large collections, especially when uploading data from large CSVs. Additionally, the update reduces the amount of data needed to open a site, significantly boosting overall performance on larger sites. Plus, it paves the way for a lot of exciting new features currently in the works. We announced this change might bring incompatibilities with custom code components back on May 6th. The majority of third-party toolkits have been already updated since then, but if you have incompatibilities with your own code component, here’s a page with some examples on what changed.

Our open source animation library Framer Motion powers all animations in Framer. Motion already splits every animation frame into distinct read and write phases. This way, all reads and writes are batched together, as mixing them can trigger unnecessary style and layout recalculations. Today, Framer is introducing deferred keyframe resolution. This ensures that when animating unknown values or animating between different value units (think PX values and % values) we defer the start of the animation until the next animation frame and batch these reads / writes. This is similar to how CSS works in the browser, and is incredible for performance. So good, that when animating values that need to first be read from the DOM, Framer is now 2.5× faster than before. And when converting between value types, it’s a whopping 6× faster than before. Additionally, we’ve done some more work to move other features on the Motion render loop, like Relative Overlays and Custom Cursors, which all contributes to smoother animations on effect-heavy sites. To enjoy these performance improvements, simply refresh and republish your website—that’s all it takes.

The May Update brings tons of quality-of-life improvements. When wrapping Stacks around layers, they will now have width set to 1FR or 100% and height set to auto by default. Within the Preview, we’ve added a Breakpoint Switcher, as well as shortcuts to cycle between all of your Breakpoints. We’ve added new Variables for Radius, supporting Radius per corner, and Padding, supporting Padding per side. For Text layers, we’re introducing Text Stroke, a new property, and have added complete Masking support. For SEO, we’ve implemented a Google Bot property, allowing you to control exactly what content Google will display. And that’s not all. Be sure to watch the video above to learn more, and see the full changelog below.

Added

• Added a new sizing defaults to Stacks, now responsive out of the box

• Added a new Text Stroke property for Text layers, with color and width

• Added full Masking support to all Text layers, from Alpha to Luminance

• Added a new Breakpoint Switcher to the Preview, plus new shortcuts

• Added copy and paste support to all Text properties via right-click

• Added a new Google Bot tag to customize indexing per layer

• Added a new Padding variable, supporting Padding per side

• Added a new Radius variable, supporting Radius per corner

Improved

• Improved copy and pasting of Masks and Shadows

• Improved duplication of Masks and Shadows

Fixed

• Fixed Fit Text layers not being properly editable on Canvas

• Fixed a bug blocking File variables for Video Components

• Fixed 3D animations not working properly with Depth: 0

• Fixed a bug disabling the Screen dropdown on Canvas Pages

• Fixed an unlinking bug causing Variants in Effects to be lost

• Fixed sizing issues of layers in Grids when set to Absolute

• Fixed a bug where the outline of groups in Graphics was off

• Fixed breakpoint overrides not showing properly for masks

• Fixed a bug skipping Delay on Transitions in Components

• Fixed a bug where 3D rotation could be incorrectly animated

• Fixed a bug where Interaction overrides wouldn’t be removed

We’ve collaborated with the team at Contra to create a new component that links your Contra profile with your Framer site. With the Contra component, you can display the services from your Contra profile on your site and ensure that the data will always stay up to date. This can lead to more companies hiring you for your skills. You can find the Contra component in the Insert Panel under the Utilities section. This component provides you with extended design control through its properties to match the look and feel of your beautiful site, built in Framer.

The April Update brings Masking to Framer. Add masks to your layers with a single click, then customize using gradients and images. Stack multiple masks on top of one another to unlock new creative layouts. Framer supports alpha masking, luminance masking, and compositing with multiple masks. The possibilities are endless, and you can add masks to any type of layer, like images, videos, components, and more. For more details on browser support, check out our help article. For everything else that’s new, see our changelog below.

Added

• Added the masking property with gradient and image support

• Added support for multiple masks stacked on top of eachother

• Added two new masking modes: Alpha and Composite masking

• Added dynamic rotation cursors to all gradient and mask tools

• Added the ability to define a default gap value for Stacks

Improved

• Improved color stop snapping of Conic and Radial gradients

• Improved gradient editing experience when switching layers

• Improved collaboration while using different Framer versions

Fixed

• Fixed gradients not being editable within Text layers

• Fixed radial gradient stops when overlapped in Safari

• Fixed gradient stop hints showing in the wrong place

• Fixed shadow Variables not displaying Color Styles

• Fixed being unable to copy and paste any shadow

• Fixed the property panels being jumpy on Firefox

• Fixed jumpy hover effects on rotated Slideshows