Scroll effect

SofiHealth Product Scroll Animation

by Vanguardia · motionprompts.dev

A pinned, scrub-driven scroll section where a Three.js GLTF shaker model spins on its Y-axis while a single ScrollTrigger onUpdate handler maps scroll progress to sliding headers, an expanding circular clip-path mask, and staggered SplitText tooltip reveals. Lenis smooth-scroll feeds ScrollTrigger, and a separate ScrollTrigger reveals the split header characters on enter.

Type: Web motion
Framework: Three.js
Trigger: scroll
Duration: 0.5–1s
Views: 128

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: mixed
Easing: power3
Complexity: 5/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, SplitText, three, GLTFLoader, lenis, ionicons

pinned scrub: 3D model spin + clip-path mask reveal

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev24,789 chars

# 3D Product Scroll Showcase — pinned scrub section with rotating GLTF model

## Goal

Build a full-page scroll experience for a fictional fitness shaker brand…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.