Animations & 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.

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.

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.

Creative Effects make it incredibly easy to add high-fidelity interactions and animations to your site.

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.

Design smooth CSS-based carousels that can be scrolled, swiped, and navigated between using either arrows or dots.

Design your own slideshows with custom spring transitions with ease.

Create infinitely scrolling sections that connect seamlessly powered by Motion.

Learn how to define Scroll Sections within CMS Collection Lists.

Make your mobile menu animations more interesting by adding custom transitions.

Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down.

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Add high-fidelity effects and animate variants within specific sections.

Design expressive landing pages with complete control over the scroll position.

Learn how to create engaging and dynamic phone content that adapts as you scroll through different sections.