Skip to content

component

Scroll 3D Grid

By FramerHub.io

Details

Summary

3D grid component with scroll-triggered

Description

Demo: LIVE DEMO Scroll3DGrid A stunning 3D grid component with scroll-triggered animations. Features multiple animation styles with perspective transforms, creating immersive visual experiences as users scroll through your content. Overview The Scroll3DGrid component creates eye-catching 3D perspective effects on image grids that animate based on scroll position. It includes 6 different animation types, each with unique 3D transformations and transitions.Features - 🎬 6 Animation Types - Multiple pre-configured 3D animation styles - 🎨 Fully Customizable - Control perspective, columns, gap, and more - 📱 Responsive - Adapts to different screen sizes - ⚡ Performance Optimized - Uses GSAP Scroll Trigger for smooth animations - 🖼️ Image Support - Easy image array configuration - 🎯 Scroll-Triggered - Animations activate as you scroll Animation Types Type 1: Perspective Slide - Horizontal parallax movement with depth - Items slide from left to right at different speeds - 3D rotation on Y-axis with varying Z-depth Type 2: Rotation Fade - Vertical movement with rotation - Brightness transitions from 200% to 0% - Complex 3D rotation on multiple axes Type 3: Zoom In - Items start far away and zoom in - Rotates from angled to flat - Scattered positioning effect Type 4: Pop Out - Items pop forward then settle back - Flipping rotation effect - Brightness fade from light to dark Type 5: Row Slide - Alternating row animations - Even rows slide left, odd rows slide right - Final scatter effect Type 6: Spin Up - Items spin 360° while rising - Rotation on Y-axis - Opacity and scale transitions License Single Use License — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client. Refund Policy Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

Introduction

3D grid component with scroll-triggered

Rank history

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

120014001600179648/148/228/309/79/15
  • All · #7930