Design pages and interactions
Learn how to upload and use custom fonts in Framer when the typeface you need isn’t available in the font picker.
Learn how to add, embed, and customize videos in your Framer projects.
Prevent users from selecting a specific layer in Framer by adjusting its user select property.
Framer lets you create stunning, high-performance animations and effects without coding. The animation library behind Framer, Motion, powers these animations with smooth, efficient performance.
How to add clickable email, phone, and SMS links to elements in Framer.
How to add a scroll-to-top button in Framer to improve navigation on your website.
Playing a video when it comes into view on your Framer page is a straightforward process that can be achieved without any coding.
Learn how to easily and efficiently update your components in Framer.
Learn what the Clip overflow setting does, how it differs from Hidden, and when to use it in your layouts.
In this guide, we explain how to add components to your library and use them across all projects in your Workspace. You'll learn how to share, insert, update, and import components efficiently.
To edit components created in another project, you’ll need to unlink them first. This article explains the unlinking options available in Framer and how to use them.
Events in Framer allow actions in components to trigger changes in parent component or on the canvas, such as opening and closing overlays. This guide explains how to add events to create seamless interactions across components.
Learn how to create reusable page layouts with shared navigations, footers, and sidebars across your site.
Learn how to create, apply, and manage reusable text styles.
Show overlays and switch component variants based on visitor behavior, conditions, and interactions.
Learn why text style breakpoints behave differently inside components.