This update allows you to restore fully responsive layouts from the past. When using Version History to copy a section, Framer now automatically imports its breakpoints too — and if the existing ones are different, they will be automatically updated. The update also makes loading versions in the panel faster, as well as optimizing the viewing experience of older versions. Watch the video overview to see the Version History and the new copy paste behaviour in action, or read more about how it works.

This release introduces our completely rewritten Appear Effects. Leveraging the magic of Framer Motion and the performance of the Web Animations API, we now ensure Appear Effects run sooner when loading your website. This makes a big difference on both user experience and SEO. Visitors on slower connections will now enjoy animation start time improve from 6s → 0.5s. And for SEO metrics that measure perceived load speeds, like LCP from Google’s PageSpeed Insights, we’ve seen jumps from 50 → 85 on our templates on mobile. If you’re already using Appear Effects on your website, simply editing and republishing will give you these improvements. Design incredible high-fidelity animations with cutting edge performance across multiple browsers. Only in Framer. Available now.

This release adds support for Scroll Sections to be defined within CMS Collection Lists. This means you can now link to specific sections within your CMS Content, as well as apply Scroll Effects like Animations and Transforms, unlocking all new creative use cases and making existing ones a lot simpler to set up. Be sure to watch the overview video above to learn more, or remix the demo here.

• Add Scroll Sections to any layer within Collection Lists

• Support for multiple Scroll Sections within Collection Lists

• Dynamically target Sections within Collection Lists with Variables

• Use Scroll Animations using Section In View with CMS content

• Use Scroll Transforms using Section In View with CMS content

This latest Framer update adds the ability to copy and paste single Styles from any layer to another. Simply right-click on any style within your property panel to copy it, then paste it onto any other layer. We currently support Opacity, Visible, Fill, Radius, Overflow, Rotation, Border, Shadows, Cursor, Pointer Events, Z Index, User Select, Blending, Blur and all Filters. See a full list of changes below.

• Added the ability to copy and paste individual Styles

• Added support for Scroll Sections on Text layers

• Fixed Effects Panel incorrectly showing on Graphics

• Fixed a bug where Layout could be removed from Collection Lists

• Fixed a bug where a linked Frame could break Section in View Effects

• Fixed a bug that would show Guides on non-supported layers

• Fixed a bug disabling Copy SVG on Graphics with background images

• Fixed a bug where Scroll Sections made in breakpoints wouldn’t work

• Fixed a crasher on Firefox when copy pasting from Text layers

• Fixed a total 8 crashers, improving editing reliability

  
  

Introducing Insert 2.0—featuring Pages in the Insert Panel, a new addition that allows you to easily insert single-page templates into your project. With a variety of templates for common layouts such as landing pages, portfolios, and teasers. These new insertable Pages & Sections are minimally styled and designed to form a solid foundation for your Framer site—while still being fully customizable to fit your creative vision. Open the Insert Panel on any project and add these new Pages & Sections with just a click. See the full changelog below.

• New Insert-focused App Tour

• 14 new insertable Page templates

• Refreshed insertable Sections

• Image placeholder for empty image layers

• Add Section button for easy section additions

• Insert-focused new project experience

• Improved CMS collection pasting flow

This Slideshow update introduces dragging support and new layout options for your controls, plus a bunch of smaller tweaks. Create auto playing and infinitely looping slideshows that can be slowly dragged or quickly swiped. Powered by Framer Motion—so you can design your own spring transitions with ease. Find the Slideshow component in the Insert Panel, under the Interactive section. To grab this update in your existing project, go to the Assets Panel, and hit Update next to the Slideshow component. See a full list of changes below.

• Adds drag support with velocity and offset

• Adds new layout options for arrow controls

• Adds support for negative offsets for all controls

• Adds support for showing arrows on hover

• Fixes issues where padding would not be applied

• Fixes issues where radius would not be be applied

• Improves default settings for better performance

• Improves accessibility for screen readers

  
  

With this release, you can now view a list of all of the changes in your project since the last deploy, making it easier to decide whether the site is ready to be updated or not. Simply click on the Publish button and you will see a list of all of the updated pages, components, and CMS items below your domains. You will be able to see who has made the changes, and click on each item to view the corresponding element.

With this release, we’ve greatly improved the optimization and loading times of your websites. Sites now build and load faster because the CSS is minified with esbuild instead of csso. esbuild is much faster and better at de-duplicating certain advanced CSS rules, which means you will experience significantly lighter CSS files for complex pages. For our own site, we saw a 60% improvement in CSS size and a 4x speed up for optimization times. To get the same advantages, re-publish your site.

The Quick Actions menu now makes it a breeze to add Components to your site. Simply hit ⌘K on macOS or ⌃K on Windows, type the name of the Component you want to insert, and hit Enter. Looking to edit your Component instead? Edit actions will appear right below insert for easy access. This new feature makes it even faster to work on larger sites in Framer. See all updates below.

• You can now insert components via the Quick Actions menu

• You can now access Version History via the Quick Actions menu

• Updated the default state with the Project section

• Fixes double selection issues for matching search results

• Fixes the ‘Replace With’ action from obscuring other results

  
  

This release adds Version History to your projects, as well as the ability to copy paste layers from the past. To do so, go to the main app menu and navigate to File → Version History, or hit ⌘⇧H. You can select and copy any layer while browsing versions. When pasting in the project, you’ll be offered the option to add it as new layer or, if the same layer is found, to replace it in one go. Check out this article to learn more about what’s included and what’s coming next.

This latest Framer update brings a host of quality-of-life improvements and bug fixes, making it even easier to invite collaborators and edit content in the CMS.

• You can now hit ⌥ESC to go back to the Page from within a Component

• You can double-click on the Canvas to go up a level from within a Component

• Scroll Animations now also work when exclusively defined in Breakpoints

• Added back the System Default typeface with multi-platform defaults

• Added all recently introduced shortcuts to the Keyboard Shortcuts modal

• Added an Edit Fields action to the CMS toolbar for easier access

• Cleaned up deprecated export options from the Desktop app

• Updated and refreshed icons in Pages, Insert, and more

• Updated the CMS sidebar button to point to the latest tutorial video

• Updated the main toolbar with a standalone Invite button

• Fixed a bug where dots within links would be removed

• Fixed a bug where the color picker shortcut wouldn’t work

• Fixed the naming of the Video component in the Assets panel

• Fixed a bug where Stack buttons received unwanted styling

Sections are the newest addition to the Insert Menu. They allow you to easily insert pre-made headers, footers, common layouts, and more into your designs, making it faster and easier than ever to get started on your next site. Sections are minimally styled, which means you can focus on making them fit you creative vision rather than building the layouts from scratch.

We’ve optimised the Section inserting experience for building out pages quickly. When inserting a section, the Insert Menu will stay open and automatically zoom your webpage, allowing you to compose pages in a single view. Plus, pages will automatically convert to a Stack with auto-height when needed.

Introducing Scroll Transforms in Framer. Design expressive landing pages with complete control over the scroll position. Transform any style while scrolling, or select specific sections for fine-grained control. Scroll Transforms in Framer are powered by Motion, the best animation library on the web. And for the first time ever, you can unleash its full potential right from within Framer, without having to write a single line of code. It’s magic. Be sure to watch the video to learn more.

• New Effect: Scroll Transforms

• New Effect Trigger: On Scroll

• New Viewport control for all Effects

• Scroll Transforms can be nested

• Scroll Transforms can be sequenced

• Mix with Scroll Animation and Appear

• Mix with Interactive Components

With this update you can now copy and paste Web Pages across projects, allowing you to add new Pages to your site faster than ever. Copy a Page by selecting the Breakpoints you want to copy or use the context menu in the Pages Panel, then paste in any project. Along with this feature, Layers now retain Breakpoint Overrides on paste within the same project or across projects and Text Styles now automatically flatten when pasted across projects. You are now able to copy & paste the following across projects:

• Web Pages

• Breakpoints

• CMS Collection Lists

• CMS Detail Pages

This update is all about animation performance. We’ve made many optimizations to Framer Motion, the magic engine that powers all animations on your websites. The updates ensure your site animations perform incredibly well on many more devices—especially older ones—and we have more updates here on the way too.

• Up to 4X higher animation framerates on low-powered devices

• All animations are more energy efficient on mobile devices

• More low-powered devices now enjoy 60FPS animations

• Magic Motion animations are 20% quicker to start

• Smart Component animations are 20% quicker to start

This update brings UI and UX updates to Pages and Breakpoints, plus a set of big performance improvements to your websites. We’ve focused on simplifying the properties we surface on Breakpoints, avoiding common issues with properties like Opacity, and making Breakpoints easier to differentiate from Frames. Plus, we’ve shipped new Motion optimizations that will make your animations even more performant—and we have more performance improvements coming soon.

• Removed Opacity, Visible and A11Y from Breakpoints

• Hidden Border and Shadow from Breakpoints

• Improved property ordering within Breakpoints

• We brought back the ⇧S shortcut for Stacks

• Added parent selection shortcuts to the context menu

• Fixed Layout Guides being broken on Breakpoints

• Fixed issue where images could not be overridden in Breakpoints

• Fixed Component name jumping upon renaming in isolation

• Fixed a Component creation bug with Effects

• Fixed a layout bug within Components containing links

• Added tooltips on hover to the left panel tabs

• Up to 25% memory improvements for published sites

• Many Framer Motion performance improvements

This update brings the magic of Motion to Framer with Scroll Animations. Add high-fidelity effects and animate variants within specific sections, like switching your topbar to a different theme on your landing page, or playing a video only when it’s visible. This unlocks a new level of interactivity, and we’re very excited to see what you’ll be able to create with it. Find a full list of changes below.

• Added Scroll Animations with Section support

• Renamed Scroll Targets to Scroll Sections

• New indicators for named Sections in the Layer Panel

• Improved naming of Effect Triggers, like In Layer View

• Scroll Variants are now always visible in the Effects menu

• Offset Y can now also be used as offsets for Scroll Animations

This quality update brings canvas and layer panel improvements. We’ve updated the Component symbol throughout the app to differentiate it from Grids. Plus, we’ve made Primary Breakpoints and Variants more distinct in the left panel, making it easier to see if you’re editing the primary or an instance. Breakpoints will now also show the ranges in the layer panel. See the full changelog below.

• New Component icons throughout the app.

• New UI for differentiating primaries from instances.

• Adding new Styles now shows previously added ones.

• We now show tooltips when hovering truncated Text Styles.

• We added 2 new CMS conditionals: Greater Than and Less Than.

• Fixed Frame names changing to Round when hidden.

• Fixed selection boxes on displays with a non-rounded DPR.

• Fixed the Discord community link in the main menu.

• Fixed a bug preventing copying layers in View Only mode.

• Fixed the ‘Learn More’ link in the Variables modal of Components.

You can now select a custom CSS cursor for any element of your site. To do so, select a layer and click the ➕ menu in the Styles panel, then choose Cursor and pick one of your liking. Once the site is published, hovering on the element will display the custom cursor, which overrides the browser’s default.

This CMS update introduces Conditionals and Transforms, unlocking a new level of control and flexibility. This allows you to do much more with your content, like only displaying banners or videos on specific posts, adding prefixes and suffixes to your text variables, formatting dates, and more. Showing and hiding content per item now requires less unique fields, making your collections more scalable and easier to maintain. Be sure to watch the video above to learn more, or remix the demo project to give these new features a go. Happy publishing!

In this release, we’ve updated the font picker with previews of your web fonts, making it easier to decide which typeface to pick for your site. We’ve also simplified the UI, providing more emphasis on web and custom fonts. Lastly, we enriched text styles with alignment options.

• The font picker now supports previews for web fonts.

• Web fonts are now prioritized when designing sites.

• Local fonts are still available on canvas pages.

• Text styles now include text alignment options too.

• Removing a text style doesn’t reset properties anymore.

Today’s release enables you to add YouTube videos in the CMS. Click the button in the Rich Text toolbar or paste a YouTube URL to add your favourite YouTube videos alongside your content. It utilises our blazing fast YouTube component from the Insert Menu – with customization options for thumbnail quality, tint color and corner radius.

This update brings automatic image optimization to your CMS images—ensuring faster loading times. We also now support alt text attributes for CMS images, increasing the accessibility of your blogs, changelogs, portfolios, and more.

• CMS images are now optimized, improving loading performance.

• CMS images now support Alt Tags for accessibility.

• We updated the Image Fill control with property labels.

• Grid gap values now respect your nudge settings.

• Fixed issue where layers with effects became hidden on resize.

• Improved handling of backdrop and z-index within overlays.

• Updated the generation of your website to include less JavaScript.

This update adds the ability to copy and paste layers and styles between multiple projects—even between your browser and the Framer desktop app. We’ve also made it easier to replace and customize images. See all changes below.

• You can now copy and paste layers between projects via the context menu.

• You can now copy and paste layer styles between your projects.

• You can now copy and paste between your browser and the desktop app.

• Pasting an image with a Frame selected will now set its Image Fill.

• Double-clicking a Frame with an Image Fill will open the Image pop-out.

• Images pasted via context menu will now be inserted below your cursor.

  
  

The Slideshow component allows you to create infinitely-looping and auto-playing slideshows with ease. You can find it in the Insert Panel, add it to your website, and connect it to content on the canvas to get started. Add controls like arrows and dots, or customize the layout, style, and transition options. Looking for an example? Have a look at our demo project, which you can remix freely. This component joins the Carousel and Ticker family of interactive components, and you can learn more about the differences between the three in this article. In short, the Slideshow auto-plays and loops infinitely. It shares layout options with the Carousel, but it also allows you to customize the transition options, and pick the current item to start with. It also gives you control of Overflow, which is a powerful way of creating more flexible slideshows, as is shown in the video above, and something the Carousel can’t do. And unlike the Ticker, it includes manual controls and page snapping. Be sure to watch the video or join the Discord if you have questions.

This update brings many experience improvements, small yet impactful quality-of-life features, and general bug fixes. We’ll list some of the highlights below.

• The Layout tool includes 2 new Grid presets: Grid Row and Grid Span.

• The Layout tool has new shortcuts for the most common presets.

• The default layout of any Frame turned Stack has been simplified.

• Breakpoints turned Stacks have better default layout options.

• Effects can now be edited and customized across breakpoints.

• Creating Fixed or Absolute layers no longer prevents layout inheritance.

• Switching between Stack and Grid now maintains your Stack layout.

• When deleting pages, we now allow you to replace all links.

• Fixed issues when combining Scroll Speed and Scroll Appear effects.

• Using CMS Colors or Numbers for styling now works in published sites.

• Changing text content in variants no longer causes unwanted animations.

• We’ve simplified the linking property panels within Components.

• We’ve added keyboard shortcuts for alignment and distribution.

• We’ve added a setting to align to the parent or the selection.

• We’ve simplified the navigation components in the Insert Menu.

• We’ve refreshed the educational tooltips within the property panel.

• We’ve improved website generation to prevent layers becoming hidden.

This release adds support for Bulleted and Numbered Lists in Text Layers and the CMS. You can now structure your content in new ways with Lists that integrate seamlessly with your existing Text Styles and CMS content.

To start writing a list you can type a hyphen ("-") or any number, then hit space. Lists can be nested as deeply as you’d like, and will automatically match the color of your text. To exit out of a list, you can hit enter twice, or use Shift+Tab.

We have significantly upgraded the HTTP capabilities of our hosting. We have added HTTP/2 support to the Framer subdomains (e.g. framer.website), and all sites will now always automatically be redirected to HTTPS. In addition, we’ve upgraded our CDN to support HTTP/3 in order to improve performance. This should make websites load up to 30% faster in modern browsers.

We updated our Carousel component with two new Sizing options: Columns and Rows. This allows you to make responsive Carousels, as you can choose to show a fixed amount of content per breakpoint. For example, you can set Columns to 3 on Desktop, 2 on Tablet and 1 on Phone. The component now also includes a Radius property, allowing you to clip the contents within if you have Padding set to 0. If you want to play around with these new properties, you can remix our demo here.

This Framer update brings support for Viewport Height. Design expressive landing pages with sections that adapt to the height of your browser, for consistent browsing experiences across various devices. Combined with existing features, like Sticky positioning and Scroll Speed Effects, it allows you to design entirely new types of websites.

With this update you can now use CMS variables for your page title and description, improving SEO performance and results of your Framer site. By setting up your site Titles and Descriptions with data from your CMS entries, each individual article will have unique relevant metadata for SEO and useful information when sharing.

In addition to Title and Descriptions – CMS variables can now be used in Custom Code fields. This allows you to implement Structured Data using JSON-LD, giving your pages special search result features and enhancements for content like events, articles, books, and more.

This release adds support for Fixed and Absolute positioning within Stacks, unlocking all-new layout setups and simplifying existing ones. Pin layers to the Viewport regardless of your page set-up, or use absolute positioning within Stacks to break out of its flow.

Redirects are useful if you need to permanently route traffic from an old path to a new URL. There are several use cases, such as reorganising the URL structure, replacing pages with a new design or layout and securing alternative paths in the case of a typo. You can now create redirects directly inside of your Site Settings. Simply input the old URL and input the path you wish to redirect it to.

We’re excited to introduce two brand new interactive components: Carousel and Ticker. Both can be found in the Insert Panel, within the Basics section. Simply drag them onto your web page, connect them to layers on your Canvas, and customize the properties to get going. Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots. Or, use the Ticker component to create infinitely scrolling sections that connect seamlessly. Both are highly customizable, and powered by Motion. Bring your websites to the next level without writing any code.

Framer offers built-in analytics to help you gain insight on the performance of your website. These analytics are privacy compatible, live, and accurate. However, in order to gain a more detailed overview of activity within your sites, you may want to consider integrating another tool such as Google Analytics and combine the insights together. You can now integrate GA with a single click by pasting the tracking ID into your settings. Framer will automatically generate the script for you, which means you no longer require any code knowledge!

This update brings new Linking features and workflow improvements. You can now create links that smoothly animate to any section on your page, and define whether or not to open them in new tabs. Additionally, we’ve added helpful little indicators to layers with links, and you can now use the L key to quickly add a link to any selected layer—allowing you to add links solely using your keyboard. This makes linking in Framer faster than ever.

We have improved the pasting of text in Framer to improve your writing experience. From copy-pasting between Text elements in Framer to bringing your own structured copy from editors like Notion, we’ve covered the most used workflows for long- and short-form text editing using your semantic HTML, Inline Styles, and Text Styles. This also includes pasting text from online resources. For example, you can copy your essay from Notion and paste it into an empty text element, and we style it according to the default or even your own defined Text Styles. The pasting functionality will always respect the HTML structure of your pasted text and map it to your project’s Text Styles.

Introducing the new Quick Actions menu. Easily navigate around your project, find specific pages, jump between components, change preferences, invite collaborators, and discover new actions and their respective shortcuts. Open the menu from anywhere by hitting ⌘K on macOS or ⌃K on Windows. Use the cursor or the arrow keys (↑ and ↓) to select items, then hit enter. You can even publish your website, or open any specific web page you are currently viewing on the Canvas.

We’ve added the ability to filter your collection lists in the CMS. This allows you to keep your content in a single collection, yet customize how that collection is presented on each of your web pages. For example, if you’re creating docs for your app, you might want to filter articles per topic on your homepage. Or when creating a blog, you might want to filter your blog posts per category. Watch the short introduction video above to learn more, or check out our free template to get started.

Today’s release adds the ability to add Overlays to content in a CMS Collection List. This is especially useful for websites like portfolios, where you might like to show a full-sized version of your art of photography on click. We’ve prepared a simple template for you to get started with. It includes a grid-based layout of photos, each with a subtle hover state and an overlay. Because all content is sourced from the CMS, all edits made to the first item will instantly apply to the entire grid. This makes it incredibly easy to iterate and play with hover states, overlays, and effects. Try this free template to see it in action.

We’ve rebuilt our YouTube integration to load up to 10x faster, based on the Lite YouTube Embed project from Paul Irish. Instead of loading all YouTube embeds instantly, we now load an optimized preview image. This can save up to 800kb per instance, making your site load much faster! This new component is now available from within our Insert Panel. If you’re already using YouTube videos on your web page, you can simply update them via the Assets panel (see below).

The new YouTube integration comes with two new properties: Thumbnail and Color. If you enable Thumbnail, we’ll load an image as a thumbnail prior to loading the entire embed, which means faster loading times for your web page. The Color property allows you to customize the YouTube embed tint from red to white, which will affect the hover state of the play icon too. We’re using the component on this very Updates page—as well as on our Learn page. We’d love to hear your thoughts! Let us know on Discord.

Framer now supports a new type of shadow: realistic. Realistic shadows are automatically layered for you, whereas, unlike box shadows where you have to add individual shadows to a layer. This lets you design higher fidelity, lifelike shadows using Diffusion and Focus. Diffusion allows you to control the ‘elevation’ of the layer. Lower values replicate the shadow of a layer sitting closer to the page, and vice versa. Focus allows you to define the overall blurriness of the layered shadows. Don’t worry if this doesn’t click right away—the easiest way to learn is by playing around with these values.

All Text layers now support three fill types: solid colors, linear gradients, and radial gradients. Simply select any text layer, head over to the Color property, pick between one of the three available fill types and customize as you see fit.

You can use the on-canvas controls to select the color stops and edit your gradients. You can also use Shared Colors as your color stops to sync your text gradients across your web pages.

Alongside the Framer Sites launch, we introduced a new Layout tool that allows you to design flexible, responsive layouts. Pick from one of our presets: Columns, Rows, Wrap or Grid, draw your layout onto your Desktop breakpoint, then customize further via the property panel.

Today, the Framer Sites Beta is coming to an end. We’re rolling all features into the main version so that everyone can enjoy publishing, breakpoints, effects, CMS, styles — and so much more. Check out the launch page we made to celebrate the release! And you’d do us a huge favor by helping spread the word. We’d really appreciate an upvote on Product Hunt or retweet on Twitter.

We’ve added support for Overlays to Framer Sites, allowing you to design video overlays, modals, toasts, banners, slide-in sidebars and much more. Select a layer on your web page, then click on Overlays near the top of your property panel. This brings you into an edit mode, where you can customize your overlay. You’ll notice a backdrop being applied by default, and you can pick between a bunch of animation presets too. Note that each layer you draw or paste onto your Overlay can have their own Enter and Exit animations too, allowing for expressive customization. Be sure to give the playground demo a try too!