Scroll Parallax: Premium Sections Component by Aidan Looker

Present your product features through a cinematic scroll-driven interface. Scroll Parallax pairs a sticky image panel with a vertical content rail — each feature smoothly activates as the user scrolls, with parallax transitions, animated statistics and more.

What is Scroll Parallax?

Scroll Parallax is a premium scroll-driven feature showcase component for Framer. It combines a sticky media panel with a vertically scrolling content rail, where each feature activates based on scroll position. As users scroll, images crossfade with parallax depth, statistics animate up from zero, and a progress rail tracks position — creating a polished editorial experience. Perfect for SaaS landing pages, product feature sections, portfolio case studies, and startup pitch sites.

Core Features

Scroll-driven activation with sticky image panel and smooth crossfade transitions between feature images
Animated statistics that count up from zero with eased motion each time a feature enters the active position
Cursor-reactive image panel with 3D tilt perspective, border glow, and radial light tracking on hover
Vertical progress rail with pulsing active dot, gradient fill segments, and pass-state indicators
Six built-in colour themes (Dark, Blue, Indigo, Emerald, Rose, Amber) plus a full custom colour mode

Controls inside Framer

Features

Features array (up to 10 items, each with icon, label, title, description, stat value, stat label, and responsive image)
Icon selector with 12 built-in SVG icons (Lightning, Paintbrush, Rocket, Shield, Puzzle, Globe, Star, Heart, Code, Chart, Link, or None)

Theme

Theme preset (Dark, Blue, Indigo, Emerald, Rose, Amber, Custom)
Image Side toggle (Left or Right)

Custom Colors (visible when theme is set to Custom)

Text, Text Muted, Accent, Card BG, Line

Layout

Scroll per Feature (150–600px, controls scroll distance per step)
Feature Gap (16–80px)
Image Width (30–60%)

Typography

Title Font
Description Font
Label Font
Stat Font
Stat Label Font
Counter Font

Visibility

Image Panel
Progress Rail
Icons
Labels
Descriptions
Stats
Counter Badge
Border Glow
Cursor Glow
Image Parallax
Progress Bar

Best use cases

SaaS and product landing pages that need to present multiple features with visual depth and scroll-driven pacing
Portfolio and case study sections where each project or capability deserves its own spotlight with supporting imagery
Startup pitch sites and investor-facing pages that pair key metrics with feature narratives
Agency and studio service pages that walk visitors through capabilities with editorial precision