Skip to content

component

Scroll 3D Carousel

By Antony Raphy

Details

Summary

Scroll 3D Carousel is a production-ready 3D media component built for Framer creators who want immersive motion.

Description

Scroll 3D Carousel is a production-ready 3D media component built for Framer creators who want immersive motion. Instead of forcing horizontal drag interactions, this carousel maps vertical scroll progress to smooth cylindrical rotation. The result is a cinematic 3D gallery that feels intuitive, stable, and layout-safe. Unlike many 3D sliders that interfere with page behavior, this component preserves natural scrolling while delivering depth and movement. Why Scroll-Controlled 3D Works Better Vertical scroll is a universal interaction pattern. Users expect it to behave predictably. By translating scroll into controlled 3D rotation, Scroll 3D Carousel: • Maintains natural page flow • Prevents scroll hijacking • Feels smooth and responsive • Enhances storytelling sections • Keeps layout stability in Framer The experience feels immersive without becoming distracting. Key Features • Scroll-based cylindrical rotation • Supports images, GIFs, and videos • Adjustable cylinder radius • Custom card width and height • Custom image corner radius • Optional depth opacity fade • Fade strength and fade distance controls • Frame-rate independent smooth motion • Transparent background • Production-safe layout behavior Media Support Supports: • JPG • PNG • WebP • GIF • MP4 • WebM • MOV Mixed media can be used in a single carousel. Videos autoplay muted and loop seamlessly. Built for Real Framer Projects Scroll 3D Carousel works inside real Framer layouts — not just demos. Perfect for: • Designer portfolios • Agency case studies • SaaS product showcases • NFT collections • Brand storytelling sections • Creative studio websites No layout breaking. No fragile positioning tricks. Customization Controls All adjustments are available directly in the property panel: • Cylinder Radius • Card Width • Card Height • Image Radius • Depth Fade Toggle • Fade Strength • Fade Distance No code required. Summary Scroll 3D Carousel transforms vertical scroll into immersive 3D motion. Built for performance, layout safety, and cinematic depth, ready for real production use. Smooth. Stable. Immersive.

Introduction

Smooth scroll-driven 3D media depth

Rank history

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

12001400143628/148/228/309/79/15
  • All · #3703