June 6, 2024
Today we’re introducing CMS Pagination, supporting both Infinite Scrolling and a manual Load More button. To add Pagination, simply select your Collection List, click on Pagination, select one of the two options, then pick how many items to load. Pagination also works with existing Limits and Start Offsets. Both the Spinner and Button are completely customizable, and you can pick any Variant for their Loading states. The Spinner itself is just a layer with a conic gradient and a Loop Effect, so you get full control. Adding Pagination helps make your blogs and changelogs much faster to load, especially when they contain dozens of items.
Infinite Scrolling with custom Spinner component
Load More Button with custom Button component
Enjoy freeform positioning of both components
Design your own Loading and Hidden states
Make your CMS Pages much faster to load
June 4, 2024
This update introduces a series of advanced site performance optimizations, especially for larger websites. Optimizing your site is now up to 5× faster. Further enhancements include faster loading times, improved handling of nested links and HTML errors, and improved Core Web Vitals. Additionally, page preloading has been streamlined to reduce network usage and energy consumption, ensuring faster interactivity post-page load. See the full list below.
Site Optimization
We’ve made optimization up to 5× faster on bigger sites
We now catch more nested links and invalid HTML errors
Core Web Vitals
Improved INP by working around a React bug with suspending during hydration
Fixed an obscure issue affecting LCP on text-heavy sites with Breakpoints
Mobile Images
Added lossless image resolution, for cases with visible image artifacts
Added
<img decoding="async">to keep animations smooth on loadWe’ve made
<img sizes>more precise in various edge casesFixed
<img loading="lazy">not always working in FirefoxFixed
<img sizes>not always working in Safari
JavaScript Loading
We’ve made page preloading smarter by preloading only links visible on the screen, and only on fast networks and devices. This results in loading up to 50% less JavaScript, and makes Framer sites consume less energy and network, further reducing CO2 emissions.
We’ve ensured scripts added into
<head>can no longer delay Framer JavaScript bundles, which is important for fast interactivity (think menus and components) after the page loadsWe’ve lowered network priorities of scripts and script preloads, allowing browsers to prioritize images while loading pages, resulting in a much better loading experience
May 30, 2024
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.
May 29, 2024
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.
May 28, 2024
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.
May 23, 2024
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: 0Fixed 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
Delayon Transitions in ComponentsFixed a bug where 3D rotation could be incorrectly animated
Fixed a bug where Interaction overrides wouldn’t be removed