About ScrollOrbit
A scroll-driven animation where profile images expand from center outward in a rotating circular pattern. Three concentric rings and central title text reveal progressively as the user scrolls. Built for team showcases, community highlights, and landing page hero sections that need an immersive scroll experience.
Features
Images expand from center to outer circle based on scroll progress
360° rotation animation as images expand outward
Progressive reveal of three concentric rings on scroll
Central title and description fade in at configurable scroll threshold
Up to 8 profile images arranged in a circle
Three rings — outer, inner and gradient ring
Three-color gradient border around central circle
Self-contained scrollable area with hidden scrollbar
Sticky positioning keeps animation centered during scroll
Canvas mode shows fully expanded final state for easy editing
Full color controls — background, rings, gradient, image borders, text
Independent typography controls for title and description
Configurable scroll distance, expand radius and reveal thresholds
No dependencies
Property Controls
Content
Profile Images — up to 8 images with alt text per image
Title Line 1 · Title Line 2 · Description
Colors
Background · Outer Ring · Inner Ring
Gradient Start, Middle, End · Image Border
Title Color · Description Color
Typography
Title Font · Description Font
Animation
Scroll Distance — total scroll for full animation (100–1000px)
Max Expand Radius — how far images move from center (100–500px)
Outer Ring Threshold — scroll point outer ring appears (0–500px)
Inner Ring Threshold — scroll point inner ring appears (0–500px)
Text Opacity Threshold — scroll point text fades in (0–500px)
SEO Keywords
framer scroll animation · framer circle animation · framer profile circle · framer scroll reveal · framer team showcase · framer orbit animation · framer scroll interaction · framer circular layout · framer hero animation · framer code component · framer landing page component