June 27, 2024
The June update brings over 20 additions, improvements, and bug fixes. It introduces the Text Balance property, which lets the browser visually balance your headings for you. Plus, you can now sort your Pages and Folders alphabetically, animate between solid colors and gradients, reset Stack order from a Breakpoint, make Text layers auto-sized with the ⇧A
shortcut, and more. Watch the video above to learn more, and see all changes below.
Added
Added the Balance property to Text layers
Added support for color and gradient animations
Added support for Text Stroke animations in Variants
Added all Stack layout options to layers with min-sizing
Added ability to sort Pages and Folders alphabetically
Added a new auto-sizing shortcut for Text layers:
⇧A
Added all compositing properties to gradient Masks
Added a new Component errors to the publishing sheet
Added ability to disconnect Google Account via Settings
Improved
Improved naming between Tap and Click in interactions
Improved property focus and blur states of dropdowns
Improved the default min size of grids from 200 → 50
Fixed
Fixed bug causing double Home pages
Fixed Text Strokes not working with Styles
Fixed Preview shortcuts working on Canvas
Fixed rotation input not working on Shapes
Fixed 3D rotation input not resetting 2D properly
Fixed Color Variables breaking animations in Variants
Fixed the
ul
tag breaking padding of Collection ListsFixed the Transition row showing accidentally in Variants
Fixed letter spacing not working properly on Form Inputs
Fixed Form submissions breaking for non-latin characters
June 20, 2024
We’re incredibly excited to introduce Forms. Enjoy 10+ input types and a uniquely freeform editing experience. Design your own inputs, focus states, checked states, loading states, success states, and so much more. Send your data via email, connect to Google Sheets, or set-up your own custom Webhook. Forms in Framer are secure too, with spam protection, rate limiting, and a fallback email. We think you’ll love it. Learn more about Forms here.
4 Input Categories: Text, Checkboxes, Radio Groups, and Select Controls
8 Text Types: Text, Text Area, Email, Number, Phone, URL, Date, and Time
Design your own Inputs, complete with custom Focus and Checked states
Freeform experience with infinite layouts, including editable Text Labels
Reusable via Components, complete with Variant and Variable support
Connected with customizable emails, Google Sheets, and Webhooks
Customize the email content, like Recipient, Name, Subject, and Body
Safe and secure with Spam Protection, Rate Limiting and Fallbacks
Redirect on Submit, show an Overlay, or update the Button or Form
Customizable input icons out of the box, with great Framer defaults
Create high-fidelity motion-based input interactions using Variants
Design your own Invalid states and write your own error messaging
Refreshed all standalone Input components available within Insert
June 12, 2024
Today we’re introducing performance improvements to project loading. When opening your projects today you might see a little modal asking you to optimize your project. This is safe, and we won’t touch your layers or content. It will make your projects up 30% faster to load. Framer used to do some heavy computation when loading projects, mainly computing hashes for SVG graphics, so we knew which ones were unique. With this new update we can now skip these, resulting in a big speed-up. Please let us know if you encounter any issues.
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.