---
title: "Animated Sections — Framer component · Best of Framer"
description: "$10.00 · Framer component · by Launchly · Sections. Animated Sections is a fullscreen storytelling component that blends rich imagery, smooth transitions, and minimalist typography…"
canonical: "https://framer.elliotli.dev/component/animated-sections"
---

[Home](/)/[Components](/components)/[Sections](/components/category/sections)/Animated Sections

# Animated Sections

[View on Framer](https://framer.com/marketplace/components/animated-sections/?via=elliot-li)

![Animated Sections preview image 1](https://framer.elliotli.dev/og/component/animated-sections/cf81d779a1262da1/1600x1200.jpg)

## Summary

Animated Sections is a fullscreen storytelling component that blends rich imagery, smooth transitions, and minimalist typography to create cinematic on-scroll or autoplay…

## Description

**Animated Sections** is a fullscreen storytelling component that blends rich imagery, smooth transitions, and minimalist typography to create cinematic on-scroll or autoplay slideshows.

Each section fills the viewport with a bold background image and elegant headline, letting you showcase brand stories, campaigns, or case studies in a visually immersive way.

Whether you use it for portfolio hero storytelling, product showcases, or editorial experiences, Animated Sections brings motion and mood to your Framer page with effortless setup.

✨ **Features**

-   **Cinematic fullscreen design** — Each section fills the viewport with depth and smooth fading transitions.
    
-   **Scroll or swipe navigation** — Intuitive mouse wheel and touch support for effortless flow between slides.
    
-   **Autoplay support** — Hands-free storytelling with adjustable duration.
    
-   **Custom thumbnails & section counter** — See all slides and jump instantly to any section.
    
-   **Responsive & adaptive** — Works across all screen sizes with dynamic text scaling.
    
-   **Font customization** — Easily adjust typography using Framer’s font control.
    

💡 **Perfect for**

-   Portfolio intros or creative storytelling
    
-   Photography and film showcases
    
-   Brand campaigns and hero sliders
    
-   Case study and editorial features
    

🎨 **How to Use**

1.  Drag the **Animated Sections** component onto your Framer canvas.
    
2.  Open the **Sections** control and add your slides — each with a _title_ and _background image_.
    
3.  Toggle **Autoplay** on if you want the slides to advance automatically.
    
4.  Adjust **Autoplay Duration** for timing between slides.
    
5.  Customize the **Heading Font** to match your brand style.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5557

## Details

- **Author**: Launchly
- **Price**: $10.00
- **Published**: 2025-10-18
- **Updated**: 2025-10-18
- **Added**: 2025-10-05
- **Categories**: Sections

## More like this

-   [Project Index](/component/project-index) — Bernardo Lickfold · Free — Editorial index: hover & scroll
-   [Face Parade](/component/face-parade) — RAjan · Free — Animated team profiles
-   [Staircase Cover Flow](/component/staircase-cover-flow) — Karim Saif · $7 — editorial-inspired image gallery
-   [In Their Words](/component/in-their-words) — Majed Monem · $9 — A wall of customer quotes