Scroll Services 3D Section — a scroll-driven 3D cube showcase section for Framer.
Turn your services, work or process list into a rotating 3D scroll animation. Two synchronised cubes cross-rotate as the visitor scrolls: text cards roll forward while imagery counter-rotates, sharing one vanishing point for a clean seam. Drop it on the page no extra code needed.
SCROLL ANIMATION
Scroll-driven 3D cube rotation with sticky pinning
Cross-rotate (counter-rotation) toggle
Spring stiffness & damping for smooth or snappy motion
Adjustable scroll length per card to control pacing
Progress dots indicator
Respects reduced-motion; static canvas preview
CONTENT
Unlimited items number, title, label/value rows, image
Auto-numbering (01, 02, 03…) with visibility toggle
Optional CTA face with label, image, background
Built-in intro section: eyebrow, heading, paragraph
Built-in bottom CTA section: heading and text
Both sections toggle on/off use only the cube if you want
LAYOUT & STYLE
Card size, gap, max width, corner radius, perspective
Left or centre card text alignment
Full colour control: background, heading, muted text, cards, accent
Black & white image toggle
Optional crop-mark detailing for an editorial look
Custom font control
Gradient fallback backgrounds when no image is set
Responsive with clamp-based typography and spacing
GREAT FOR
Agency services sections, portfolio and case-study showcases, product feature walkthroughs, process and steps sections, studio landing pages and dark-theme hero sections.
KEYWORDS
scroll, scroll animation, 3d scroll, scroll section, sticky scroll, services section, showcase, portfolio, case study, 3d cube, gallery, cards, agency, studio, process, steps, features, CTA, parallax, editorial, responsive
NEED HELP?
Questions about installing or customizing this component or looking for custom Framer development?
Email nirav.jivani6@gmail.com. I usually reply within 24 hours.
Thank you.
Scroll Services 3D Section — a scroll-driven 3D cube showcase section for Framer.
Turn your services, work or process list into a rotating 3D scroll animation. Two synchronised cubes cross-rotate as the visitor scrolls: text cards roll forward while imagery counter-rotates, sharing one vanishing point for a clean seam. Drop it on the page no extra code needed.
SCROLL ANIMATION
Scroll-driven 3D cube rotation with sticky pinning
Cross-rotate (counter-rotation) toggle
Spring stiffness & damping for smooth or snappy motion
Adjustable scroll length per card to control pacing
Progress dots indicator
Respects reduced-motion; static canvas preview
CONTENT
Unlimited items number, title, label/value rows, image
Auto-numbering (01, 02, 03…) with visibility toggle
Optional CTA face with label, image, background
Built-in intro section: eyebrow, heading, paragraph
Built-in bottom CTA section: heading and text
Both sections toggle on/off use only the cube if you want
LAYOUT & STYLE
Card size, gap, max width, corner radius, perspective
Left or centre card text alignment
Full colour control: background, heading, muted text, cards, accent
Black & white image toggle
Optional crop-mark detailing for an editorial look
Custom font control
Gradient fallback backgrounds when no image is set
Responsive with clamp-based typography and spacing
GREAT FOR
Agency services sections, portfolio and case-study showcases, product feature walkthroughs, process and steps sections, studio landing pages and dark-theme hero sections.
KEYWORDS
scroll, scroll animation, 3d scroll, scroll section, sticky scroll, services section, showcase, portfolio, case study, 3d cube, gallery, cards, agency, studio, process, steps, features, CTA, parallax, editorial, responsive
NEED HELP?
Questions about installing or customizing this component or looking for custom Framer development?
Email nirav.jivani6@gmail.com. I usually reply within 24 hours.
Thank you.
