Motion Slide Cards — Animated cards with side text effects.

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.