Start for free
Search
Get Started
Build your first site
Layout & Sizing
Breakpoints
Import from Figma
Components
Copy from HTML
effects
start
Scroll
Scroll Targets
Sticky Scrolling
Scroll Animations
Scroll Transforms
Scroll Variant
scroll
Navigation
Desktop Menu
Mobile Menu
Mobile Menu: Fade-In
Horizontal Side Scroller
Scroll Direction
Relative Overlays
Responsive Dropdown Menu
navigation
Effects
Page Effects
Component Effects
Creative Effects
Rotating Grid on Scroll
Wave Animation
Apple Zoom Scroll Effect
Canvas-like website
Overlays
CMS
Overview
Import
Filtering
Date Filtering
Conditionals & Transforms
Scroll Sections
Localization
Bold & Italic
Code Blocks
Reference Collections
cms
Insert Menu
Carousel
Cookie Banner
Input
Slideshow
Ticker
insert
Settings
Metadata
Password Protection
Custom Code
Custom Domains
Redirects
Staging & Versions
Analytics
Version History
management
Code
Progress Feature Section
code
Courses
Fundamentals
Documentation Site
Mastering Code Overrides
courses
Academy
Spice up your designs with stunning effects and animations.
Built on top of the View Transitions API, Framer is the first tool in which you can explore page to page animations visually.
In this video, we introduce effects in components. This is a major update that will make it easier to create reusable and animated components.
Light effects make it incredibly easy to add high-fidelity interactions and animations to your site.
In this video, you’ll learn how to create a rotating grid of videos as you start scrolling down the page.
Get ready to make a splash with this wave-tastic tutorial.
Go from a full-screen video to a slideshow of videos by scrolling down the page.
Create a canvas-like website by making the entire website draggable and include elements you can drag around.
Learn how to create video overlays in the following tutorial.