Scroll Effects
Scroll-linked animations, pinned sections, and reveal transitions built with GSAP ScrollTrigger and modern scroll libraries.
8 indexed demos · 44 total in this collection
Browse other experiment categories
Experiments in this category
- Velocity ScrollDemoScroll-driven horizontal image rows moving at different velocities. Scroll-driven motion for portfolio sites and modern web design.
- Scroll-Driven Animated TextDemoScroll-driven word-by-word text reveal with GSAP, ScrollTrigger, and Lenis smooth scrolling. Scroll-driven motion for portfolio sites and modern web design.
- Team AnimationDemoScroll-pinned team section with staggered card reveals, rotation, and scale transitions. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Font Weight MarqueeScroll-driven horizontal marquee rows with per-character font weight animation from 100 to 900 using SplitType. Scroll-driven motion for portfolio sites and modern web design.
- Image RevealDemoClip-path driven full-bleed image reveal that progressively exposes content as the user scrolls. Scroll-driven motion for portfolio sites and modern web design.
- Block RevealScroll-driven block grid transition where randomized tiles dissolve to reveal images between colored sections. Scroll-driven motion for portfolio sites and modern web design.
- Card ScatterScroll-driven card scatter effect where paired cards fly apart with rotation and parallax using GSAP ScrollTrigger. Scroll-driven motion for portfolio sites and modern web design.
- Chromatic ShatterDemoRGB chromatic aberration scroll experience with split channels, glitch rows, and convergence animations. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Clayboan ScrollScroll-driven portfolio with clip-path morphing images and per-character text reveal using GSAP ScrollTrigger and SplitType. Scroll-driven motion for portfolio sites and modern web design.
- Contassot RevealDemoFixed-position image gallery with scroll-driven clip-path reveals and zoom transitions between sections. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Elastic ManifestoScroll-driven typography experiment with elastic squeeze, stretch letter-spacing, and breathing scale animations using GSAP ScrollTrigger. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Tension & ReleaseScroll-driven typography experiment exploring compression and expansion forces with coiling words, wave ripples, pulse scaling, and letter shattering. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Kinetic TypographyScroll-driven kinetic typography with rotating lines, bouncing word stacks, and orbiting characters using GSAP ScrollTrigger and Lenis. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Dissolve HeroDemoHero section with scroll-driven dissolve transition revealing content beneath. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Fluid HeroDemoHero section with fluid dynamics simulation and scroll-driven content reveal. Scroll-driven motion for portfolio sites and modern web design.
- Greyloom ScrollDemoScroll-driven monochrome portfolio experience with image scale transitions and text reveals. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Grid RevealDemoScroll-triggered grid items that reveal with staggered scale and opacity animations. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Image Scale ScrollDemoScroll-driven image scaling with parallax depth and progressive size transitions. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Infinite ParallaxDemoSeamlessly looping parallax layers with depth-based scroll speed variation. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Kaitonote ScrollDemoScroll-driven editorial experience with pinned sections and choreographed text transitions. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Marquee ScrollDemoScroll-velocity driven marquee that accelerates text speed based on scroll intensity. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Mask RevealDemoScroll-driven mask reveal with expanding clip-path and layered content transitions. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Nebulon ScrollDemoNebula-themed scroll experience with layered parallax and cosmic visual effects. Scroll-driven motion for portfolio sites and modern web design.
- NVG8 ScrollDemoScroll-driven portfolio with horizontal panels, image reveals, and text choreography. Scroll-driven motion for portfolio sites and modern web design.
- Orken ScrollDemoScroll-driven experience with pinned sections, image sequences, and text transforms. Scroll-driven motion for portfolio sites and modern web design.
- Parallax PortraitDemoPortrait image with multi-layer parallax depth effect responding to scroll and mouse. Scroll-driven motion for portfolio sites and modern web design.
- Phive Text ScrollDemoScroll-driven text animation with five sequential typographic transformations. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Pin Scale CardsDemoScroll-pinned cards that scale and layer with depth as user scrolls through sections. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Quiet Crowd HeroDemoHero section with crowd-inspired particle movement and scroll-driven density changes. Scroll-driven motion for portfolio sites and modern web design.
- Split Card ScrollDemoScroll-driven cards that split apart with opposing directional animations. Scroll-driven motion for portfolio sites and modern web design.
- Spotlight ScrollDemoScroll-driven spotlight that illuminates sections progressively as user navigates down. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Sticky Card ScrollDemoCards that stick to viewport edges during scroll and stack with perspective depth. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Sticky CardsDemoScroll-pinned cards that stack and compress with z-depth layering effects. Scroll-driven motion for portfolio sites and modern web design.
- Sticky Cards V2DemoEnhanced sticky cards with improved stacking, rotation, and progressive reveal. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Sticky ColumnsDemoMulti-column layout with independent sticky scroll behavior per column. Scroll-driven motion for portfolio sites and modern web design.
- Telescope ScrollDemoZoom-through scroll experience with telescoping depth and layer transitions. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Text ScrollDemoScroll-driven text animation with progressive word highlighting and opacity reveals. Scroll-driven motion for portfolio sites and modern web design.
- Voyce ScrollDemoScroll-driven editorial experience with voice-inspired typography and image sequencing. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Vucko ScrollDemoScroll-driven portfolio with horizontal section transitions and pinned reveals. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Window ScrollDemoWindow-framed scroll experience with content revealed through expanding viewport. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Zetr ScrollDemoScroll-driven experience with geometric transitions and modular section reveals. Scroll-driven motion for portfolio sites and modern web design.
- Gradient Scroll RevealPinned scroll section with a scrubbed linear-gradient wipe that inverts headline typography as you scroll through the scene. A GSAP ScrollTrigger scroll animation for editorial landing pages and modern web design. Scroll-driven motion for portfolio sites and modern web design.
- Disintegration ScrollDemoScroll-driven disintegration effect with particle scatter and reassembly animations. GSAP ScrollTrigger scroll animation for editorial landing pages.
- Scroll BookDemoBook-like scroll experience with page-turning animations and content chapters. Scroll-driven motion for portfolio sites and modern web design.
Need a custom build? Contact ZiyadX to adapt these patterns for your brand, SaaS, or e-commerce site.