component
Motion Slide Cards
By Aidan Looker
Details
- Aidan LookerAuthor
- componentType
- $14.00Price
- 2026-04-21Published
- 2026-06-13Updated
- 2026-04-13Added
- CardsCategories
Summary
What is Motion Slide Cards?
Description
What is Motion Slide Cards? Motion Slide Cards is a high-end animated card component that pairs a content-rich card with an animated side text display. Each slide transitions with staggered motion — counters animate up, images scale in, and text sweeps in with a progressive wave effect. Ideal for travel landing pages, portfolio showcases, product highlights, SaaS feature breakdowns, and conversion-focused hero sections. Core Features Cinematic side text animation with three distinct modes: Color sweep, Fade Up, and Blur reveal Animated count-up statistics with customizable prefix, suffix, and arrow indicators Five built-in gradient themes (Warm Amber, Ocean Blue, Violet Night, Emerald) plus a fully custom color mode with 12 color controls Per-slide content: labels, badges, titles, descriptions, background images, and pill image galleries Per-slide linking on labels, titles, and arrow buttons using native Framer link controls Organic 5-layer gradient background with GPU-accelerated blur and smooth orbital animation Every content section toggleable on or off — side text, top bar, statistic, title, description, images — with adaptive spacing that reflows automatically Auto-play with configurable interval, plus manual dot navigation Controls inside Framer Content Default Side Text (with per-slide overrides) Text Side (Left / Right) Up to 8 slides, each with: label, badge, stat value, prefix, suffix, title, description, background image, and two pill images Per-slide Label Link, Title Link, and Arrow Link Themes and Colors Theme selector (Warm Amber, Ocean Blue, Violet Night, Emerald, Custom) Side text base and highlight colors Custom Colors group: gradient start, mid, end, text primary, text secondary, stat color, accent, icon circle, badge fill, badge border, nav active, nav inactive Card Style Card radius, width, padding, and gap Images Show / Hide toggle Pill image radius and height Auto Play Enabled toggle Interval (seconds) Animation Text Effect mode (Color, Fade Up, Blur) Counter animation duration Blur amount (when Blur mode is active) Typography Side Text Font (extended controls) Label Font Statistic Font Title Font Description Font Visibility Toggles Side Text Top Bar (label + badge + arrow) Statistic Stat Arrow Title Description Best use cases Travel and hospitality landing pages showcasing destinations with statistics and imagery SaaS product pages highlighting key metrics and feature sets with animated counters Portfolio and agency sites presenting case studies with rich visual cards Marketing hero sections that need premium motion and strong visual hierarchy Drop it onto any Framer page and have a polished, conversion-ready card section in under a minute. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .
Introduction
Animated cards with side text effects.
Rank history
Daily rank per list, from the first snapshot — lower is better.
- All · #8027