Motion Slide Cards

Premium Interactions Component by Aidan Looker

Show PreviewBuy for $14
Motion Slide Cards

About Motion Slide Cards

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.