Framer
Copy
Logo as SVG
Brand
Guidelines
Academy
Search
Fundamentals
Learn
Courses
Insert Menu
Layout & Design
Navigation
Animations & Effects
Scroll
CMS
Forms
Localization
Publishing & Settings
Templates
Spice up your designs with stunning effects and animations.
3:52
Add Motion to your Text layers with Text Effects
Animate characters, words, lines, and elements with real-time previews. Choose presets or create custom effects with properties like Scale, Blur, and Offset. Trigger animations on Appear, Layer In View, or Section In View.
16:54
Design interactive cursors with infinite ways to customize
Design interactive cursors using components, with infinite ways to customize. Tap into the power of Variants, Effects, and Transitions to design interactions with an incredible fidelity.
Page Effects (View Transitions)
Built on top of the View Transitions API, Framer is the first tool in which you can explore page to page animations visually.
Component Effects
In this video, we introduce effects in components. This is a major update that will make it easier to create reusable and animated components.
Creative Effects
Creative Effects make it incredibly easy to add high-fidelity interactions and animations to your site.
Create a Stunning Wave Animation
Get ready to make a splash with this wave-tastic tutorial.
Creating zooming scroll effects like Apple.com
Go from a full-screen video to a slideshow of videos by scrolling down the page.
Creating a canvas-like website with draggable elements
Create a canvas-like website by making the entire website draggable and include elements you can drag around.
Create beautiful interactive Carousels
Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots.
Create auto playing and infinitely looping slideshows.
Design your own slideshows with custom spring transitions with ease.
Create infinite sliders with the Ticker Component.
Create infinitely scrolling sections that connect seamlessly powered by Motion.
CMS powered Scroll Sections
Learn how to define Scroll Sections within CMS Collection Lists.
12:47
Scroll Animations
Add high-fidelity effects and animate variants within specific sections.
10:44
Design mobile menu’s with custom fade-in animations.
Make your mobile menu animations more interesting by adding custom transitions.
3:10
Hide navbar based on scroll direction.
Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down.
10:20
Relative Overlays
Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.
17:06
Scroll Transforms
Design expressive landing pages with complete control over the scroll position.
8:18
Dynamically show content using Scroll Variant.
Learn how to create engaging and dynamic phone content that adapts as you scroll through different sections.