Updates
What’s new.
Introducing Masonry Grids in Framer. Turn any Grid into a packed masonry grid with a single click. The Masonry toggle is available under the Grid properties, and enabling it lets you craft masonry layouts. These types of layouts use fixed columns but flexible row heights, so items stack tightly, creating a brick-like pattern driven by each layer’s content or height. This works especially well with our recently introduced Fit Image feature, letting you design Pinterest-like layouts directly in Framer. You can also design new masonry grids from scratch, by selecting Masonry from the Layout Menu in the Toolbar. Masonry Grids play nice with our CMS, where using Effects like Stagger and Lightbox unlock all kinds of new animations and interactions. Watch the video on YouTube to learn more about designing with Masonry Grids in Framer.
The sixteenth Framer Font Drop™ adds Tiny 5×3, Xx Stardust, Wavetosh, and St. Martin to our curated Open Source font collection. All of these typefaces are now available in the Font Picker and ready to use in your next template or website. Would you like to see your own open source font featured in Framer? Please feel free to reach out, we’re always looking for more additions.
Tiny 5×3 by Jack Halten Fahnestock
Stardust by Studio Mucho Gusto
St. Martin Carl J. Kurtz
Wavetosh by GGBot
Meet the Ticker Effect, a new way to design continuous animations for text, images, and beyond. We’ve completely re-imagined Tickers in Framer. This new Ticker Effect now works with the CMS, can be applied to any Stack, supports unique settings for each Breakpoint, and is even faster and more accessible. You can find it in the Effects menu, and it can be applied to any CMS Collection List or Stack. No more messy canvas, duplicated collections with filters, or hidden duplicates for responsiveness. Plus, it brings all-new features, like draggable support and automatic orientation detection, unlocking new workflows and more creative interactions. We think you’ll love it. Watch the video here to learn more. The highest-fidelity animation and interaction tools. Only in Framer.
Today we’re rolling out Relative Dates, a very popular feature request for the CMS. You can now display dynamic date values like Today, Yesterday, or 1 week ago, making your content feel more natural and up to date. To give it a try, select any date connected to your CMS Collection, open the Text Transform popout, and choose Relative as the Display type. You can also fine-tune the look by adjusting Capitalization and picking between Short, Medium, or Long styles. Relative dates are fully compatible with localization, so they’ll automatically adapt to your site’s language.
Introducing Auto Rename, a new AI-powered way to rename your layers. Just select the layers you wish to rename, and hit ⌥ + R on macOS or ALT + R on Windows, and we will magically rename the layers. This helps keep your projects clean and manageable, without any manual effort required. Framer checks what your layers represent, and we come up with clean names. See our short overview video on YouTube to get a sense of the layer names this can generate.
This performance update makes all CMS-based Framer sites interactive up to 150% faster. For your visitors, it means features like buttons and scroll effects start working much sooner after page load. It also reduces bandwidth usage of JavaScript and other network resources per visitor. We’ve achieved this by intelligently embedding data into the final HTML during the optimization step, which React then re-uses during page hydration to skip data fetching.