Bring your products to life with precision 3D scroll animations. Simply import your .glb 3D file, set the animation duration, and define exactly where the object starts and finishes. The component handles the rest, smoothly interpolating position and rotation as the user scrolls. It even supports a synced video background that locks to your 3D model's movement for a fully immersive experience.
Custom GLB Support: Import high-fidelity 3D models directly into Framer.
Scroll-Driven Animation: Define Start and End positions/rotations; the object moves seamlessly between them based on scroll progress.
Synced Video Integration: Add an optional video that centers on the 3D object's starting position and moves in perfect sync with the animation.
Cinematic Effects: Includes a built-in Appear Effect for smooth entrances and a continuous Float Effect to keep the object alive even when not scrolling.
Precision Timing: Full control over animation duration and scroll distance.
Ideal for high-end product showcases (like phones or tech), storytelling hero sections, or interactive 3D landing pages.
Have any questions about the component or want a custom one? Email me at didaserafim90@gmail.com
If you want the following section to scroll over this component before the animation fully ends (e.g., overlapping by 10vh):
Set the component's Max Height to: [Animation Duration (vh)] - [Desired Overlap (vh)] (Example: If Duration is 150vh and you want a 10vh overlap, set Max Height to 140vh.)
Serafim 193
