Skip to content

component

Scroll Images

By Aidan Looker

Details

Summary

What is Scroll Images?

Description

What is Scroll Images? Scroll Images is a scroll-driven 3D image gallery that transforms a set of images into a cinematic narrative. As users scroll, images enter from scattered positions in 3D space with rotation, blur, and depth — then flow continuously past the viewport to reveal a staggered headline, subtitle, and call-to-action. Ideal for portfolio hero sections, editorial landing pages, product showcases, and agency case study intros. Core Features Eight pre-computed 3D scatter positions with unique rotation, scale, and depth per image — no manual positioning required Continuous pass-through animation with staggered entry and exit timing — images flow naturally with no dead zones Line-by-line heading reveal with 3D rise, deblur, and scale for a cinematic text entrance Slide-fill CTA button with smooth background wipe on hover Glassmorphic image labels with backdrop blur and uppercase styling Fully transparent background — layers seamlessly over any page design Responsive image card sizing that scales with the viewport Controls inside Framer Content Images (up to 8, with per-image labels) Heading (multi-line supported) Subtitle CTA text and link Theme Dark, Light, Warm, Cool, Noir, or Custom Custom text, muted, and accent color overrides Card Style Border radius Aspect ratio (Portrait, Landscape, Square) Shadow intensity Animation Scroll distance (800–4000px) Scatter depth Stagger amount Blur intensity Typography Title size (24–120px) Subtitle size (10–32px) Independent font controls for title, subtitle, CTA, and labels Visibility Toggle labels, subtitle, CTA button, progress bar, and text backdrop independently Best use cases Portfolio hero sections that reveal a curated image collection on scroll Agency and studio landing pages showcasing editorial photography Product launch pages with a cinematic visual narrative Event and campaign microsites where visual impact drives engagement Drop it onto any page, add your images, and let the scroll do the storytelling. Questions or custom requests? We design and build custom Framer components. Get in touch at contact@teampixel.com.au .

Introduction

Cinematic 3D image gallery with scroll.

Rank history

Daily rank per list, from the first snapshot — lower is better.

120014001600166678/148/228/309/79/15
  • All · #6667