---
title: "Animated Slides — Framer component · Best of Framer"
description: "$14.00 · Framer component · by Aidan Looker · Carousels. What is Animated Slides?"
canonical: "https://framer.elliotli.dev/component/animated-slides"
---

[Home](/)/[Components](/components)/[Carousels](/components/category/carousels)/Animated Slides

# Animated Slides

Cinematic split-panel hero slideshow.

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

![Animated Slides preview image 1](https://framer.elliotli.dev/og/component/animated-slides/14299795a1e0fa77/1600x1200.jpg)

## Summary

What is Animated Slides?

## Description

## What is Animated Slides?

Animated Slides is a premium split-panel hero slideshow that combines cinematic text roll-in animations with a synchronized horizontal card carousel. Each slide transition features coordinated heading, subheading, description, and CTA movement alongside a smoothly shifting image strip with a vertical progress bar. Ideal for travel sites, portfolio heroes, product showcases, and agency landing pages that demand visual impact above the fold.

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8vjwbcr2-RQLDut7AgLOovQEwgaJNpNG4n3n3B6)](https://teampixelau.lemonsqueezy.com/checkout/buy/3b016e8d-2ba4-4944-8431-e2c592334df1)

## Core Features

-   Synchronized roll-in text and carousel card transitions with configurable speed presets (Slow, Medium, Fast)
    
-   Infinite-loop auto-play with pause-on-hover and adjustable interval timing
    
-   Vertical progress bar with interactive dot indicators for direct slide navigation
    
-   Slide-fill CTA button with animated hover state, per-slide link destinations, and external link handling
    
-   Dedicated mobile layout toggle that transforms into a stacked card carousel with counter and arrow navigation
    

## Controls inside Framer

### Slides

-   Heading, subheading, and description per slide
    
-   Responsive image upload with alt-text support
    
-   Individual CTA button text and link per slide
    
-   Up to 8 slides
    

### Layout

-   Content split ratio (30–60%)
    
-   Card border radius
    
-   Card width and height overrides (0 = auto-responsive)
    
-   Mobile layout toggle
    

**Colors**

-   Background
    
-   Heading color
    
-   Subheading color
    
-   Progress bar fill
    
-   Progress track
    

### Typography

-   Heading font family and weight
    
-   Body font family and weight
    
-   Heading size (32–120px)
    
-   Subheading size (10–24px)
    

### Animation

-   Auto-play toggle
    
-   Slide interval (2–15s)
    
-   Pause on hover
    
-   Transition speed preset
    

### Button Style

-   Show/hide toggle
    
-   Border color
    
-   Hover fill color
    
-   Text color
    
-   Hover text color
    

### Visibility

-   Show/hide navigation arrows
    
-   Show/hide slide counter
    

## Best use cases

-   Travel and destination landing pages with full-width hero sections
    
-   Agency and portfolio homepages that need a cinematic first impression
    
-   SaaS and product launch pages with feature-per-slide storytelling
    
-   Real estate and hospitality sites showcasing property highlights
    

Deliver above-the-fold impact that holds attention and drives clicks — without touching a timeline.

## Questions or custom requests?

We design and build custom Framer components. Get in touch at [**contact@teampixel.com.au**](mailto:contact@teampixel.com.au).

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

-   All · #5879

## Details

- **Author**: Aidan Looker
- **Price**: $14.00
- **Published**: 2026-06-05
- **Updated**: 2026-06-13
- **Added**: 2026-06-05
- **Categories**: Carousels

## More like this

-   [3DCurvedImageMarquee](/component/3dcurvedimagemarquee) — Lera · $4 — Curved perspective double ticker
-   [Orbit Kit Carousel](/component/orbit-kit-carousel) — Khairul Fauzy Khairudin · $12 — 3D drag carousel with inertia
-   [Team Orbit](/component/team-orbit) — Ali Musa · Free — Interactive Team Showcase
-   [Glow Testimonial](/component/glow-testimonial) — Interface Studio · Free — Testimonials with a Little Glow