Mỗi file là trang kết quả gốc của tác giả trên CodePen (pen public = MIT) — mở "Chạy bản gốc" để xem hiệu ứng thật, copy nguyên file để dùng, giữ comment ghi công ở đầu file. Chạy local cần HTTP server (python3 -m http.server), không mở bằng file://.
This immersive landing page uses an intricate sequence of vector animations and responsive viewport styling to tell a visual story. Built on top of GSAP ScrollTrigger and MotionPathPlugin, it transitions users through interactive text slides and morphs a tree diagram into organic butterfly wings. Smooth motion path travels, audio ambiance, and SVG stroke-drawing create a highly tailored cinematic web experience.
This masterfully choreographed full-page slider captures wheel, swipe, and key events to drive a multi-layered transition. Utilizing GSAP Observer, the layout animates parent and child containers in opposite directions, producing a clean split-wipe reveal. Simultaneously, a custom variable font dynamically stretches its width axis (wdth) alongside parallax image transformations to create an organic, tactile sense of momentum.
This date and time wheel selector leverages the cutting-edge CSS Scroll Snap Events API to build an efficient mobile-style picker. By registering event listeners for scrollsnapchanging and scrollsnapchange, the layout dynamically updates the select state in real time as the wheels rotate. It uses native CSS scroll-start-target-block to set initial positions, offering a smooth, lightweight solution.
This chronological content layout uses an Intersection Observer to fade and slide events smoothly into view as the user scrolls. Utilizing Faker to populate mock data, the ES6 script generates semantic <time> and <small> nodes on load. On larger viewports, the grid transitions to a split layout with left-aligned dates, while a native @media query auto-toggles dark mode.
An advanced interactive image gallery rendered entirely on an HTML5 Canvas. The script maps a collection of Unsplash images onto the surface of a virtual 3D sphere, calculating scale and opacity based on their normalized distance from the center. Users can rotate the sphere via mouse or touch drag. Hovering over an image highlights it with a tracking focus box, and clicking expands the image with a procedural slicing animation, accompanied by random digital glitch effects.
This cinematic travel presentation combines scroll-driven vector mapping and nested photographic galleries. Built with GSAP ScrollTrigger and the Intersection Observer API, scrolling initiates a staged intro: the title fades, a detailed SVG map draws its borders, and a specific province highlights. Concurrently, a three-column image grid slides up, transitioning smoothly from greyscale to full color.
An interactive scroll-driven showcase featuring Godzilla walking across a detailed scenic skyline. Scrolling horizontally advances the sprite along an SVG vector path using GSAP MotionPath and ScrollTrigger, adjusting container offsets to dynamically re-center the camera viewpoint. Features vintage film grain dust loops, click-to-destroy targets, and explosive debris particles.
An advanced scroll-driven WebGL experience powered by Three.js and GSAP. A fixed background canvas uses InstancedMesh to render nearly 50,000 distinct 3D cube particles, colored dynamically by extracting color values from an image mapped onto a hidden canvas. As the user scrolls down the page, the camera’s Z-axis position transitions, causing the scattered cubes to seamlessly converge into a photographic portrait.
This is an Animated Scroll Highlight Annotations component. It combines a spatial theme toggle with progressive reading indicators that colorfully highlight key text passages as they enter the viewport. Its function is to enhance long-form reading experiences by guiding the user’s eye to critical information through contextual, scroll-bound motion.
This is a Smooth Parallax Image Scroll Gallery. It translates vertical scroll progression into independent Y-axis movement for masked images. Its function is to create a sense of depth and momentum, elevating standard vertical feeds into immersive visual narratives.
This is a Staggered Text Scroll Reveal. It parses structural typography into independent animated lines. Its function is to pace the reader’s attention, transforming static paragraphs into dynamic narrative elements triggered by viewport intersection.
This is a Twisted Wave GLSL Image Gallery. It’s a high-performance, full-screen WebGL experience that uses custom shaders to create sophisticated visual effects. Its function is to transform a standard image carousel into a cinematic journey with two distinct interactions: a localized sine-wave distortion on mouse hover and a global radial blur that intensifies with the speed of the scroll.
This snippet showcases a GSAP ScrollTrigger List Expansion effect. It mimics the native iOS “Notification Center” or “Wallet” card stack behavior. Its function is to condense a long list of items into a compact, layered visual stack, and then fluidly expand them into full, scrollable cards as the user scrolls down the container, creating a highly tactile mobile UI experience.
This is a Cinematic Zoom Blur Image Gallery. It utilizes custom GLSL fragment shaders and Three.js to create a high-fidelity transition between image textures. Its function is to provide an immersive navigational layer for visual portfolios, where spatial depth and radial blur replace standard linear crossfades.
This is a Scroll-Driven Jigsaw Puzzle Assembler. It utilizes SVG patterns and CSS variables to deconstruct a single image into interactive, interlocking pieces. Its function is to provide a cinematic content reveal where scrolling physically assembles the visual asset from a scattered state into a coherent whole.
This is a Lenis Smooth Scroll & GSAP Page. It transforms a standard one-page website into a high-end, cinematic scrolling experience. Its function is to provide an exceptionally fluid and responsive interface by replacing native “jumpy” browser scrolling with the physics-based smoothness of Lenis, while using GSAP’s ScrollTrigger to orchestrate a series of staggered animations that reveal content as the user navigates down the page.
This is a Lenis Smooth Scroll Cinematic Experience. It transforms a standard single-page portfolio or narrative website into an immersive, high-end digital journey. Its primary function is to replace jarring browser scrolling with the fluid, physics-based motion of Lenis, while using GSAP’s ScrollTrigger plugin to orchestrate a complex sequence of cinematic animations, including a “film roll” header, an expanding video player, and a dramatic footer reveal.
This is a Shattering Image Gallery Transition. It utilizes the WebGL API via Three.js to deconstruct 2D images into a matrix of 3D particles. Its function is to replace standard fade or slide slideshows with a highly cinematic, physics-based explosion effect, transitioning between photographs by blowing the current image apart to reveal the next one underneath.
This is an Auto-Generated Anchor Positioned TOC. It parses an article’s heading structure on the fly and constructs a sticky navigation menu. Its primary function is to replace heavy JavaScript scroll-spies (Intersection Observers) with native CSS Anchor Positioning and Scroll Targeting, moving an animated highlight alongside the active content section.
This is a Glassmorphic Advanced Navigation System. It provides a central, floating control hub for single-page applications. Its function is to persistently guide the user across different content sections while maintaining a high-end, translucent aesthetic that adapts fluidly between desktop and mobile environments.
This is an Infinite 3D Poster Scroll Wall. It constructs a dense, continuous grid of cinematic assets rendered entirely in WebGL. Its function is to provide a visually overwhelming, highly performant “hero” background that automatically fetches live data from an external API and perpetually scrolls along a tilted perspective plane.
This is a Smooth Scroll Stacking Accordion. It replaces standard click-to-open accordions with a scroll-driven interaction. Its function is to pin a section of content and compress multiple information cards into a stacked deck as the user scrolls down the page.
This is a Smooth 3D Scroll-Driven Reveal. It replaces the native scroll behavior with a custom, momentum-based scrolling engine that orchestrates complex 3D transforms. Its function is to create a gallery experience where images feel weightless, tilting and translating in 3D space based on their velocity and position relative to the viewport.
This is a Scroll-Driven Dynamic Marquee Frame. It creates a continuous perimeter ticker that bounds the viewport. Its function is to provide persistent context by reflecting the currently active section’s title. It transforms static reading into a reactive environment, updating both edge typography and core background colors as the user scrolls.
Pinned Split-Screen Mask Reveal is a high-performance scroll-driven layout. It synchronizes fixed image stacks with flowing text content. This element creates a cinematic transition where images are “unmasked” as the user progresses through sections. It is designed to bridge the gap between static information and immersive visual storytelling.
This Parallax Jungle Leaves Reveal creates a cinematic opening for a landing page. As the user scrolls, dense layers of tropical SVG leaves part ways - some moving left, some right - while smaller leaves float randomly in the background. The effect culminates in the reveal of a typography-based logo, creating a sense of depth and discovery perfect for storytelling or adventure-themed websites.
This Scroll-Triggered Text Highlight effect mimics the experience of marking important passages with a highlighter pen as you read. Using GSAP ScrollTrigger, the highlights animate seamlessly from left to right exactly when the text enters the reader’s viewport. The component offers multiple visual styles (full background, half-height, or underline) and fully supports dark mode, making it an excellent addition to long-form articles, documentation, or educational content.
This Scroll-Driven Image Swapper demonstrates the bleeding edge of web animation. It uses the native CSS Scroll-driven Animations API to create a complex parallax-like effect where two columns of different heights scroll in sync. As you scroll, the images in the shorter column slide and crossfade to match the context of the taller column. Crucially, the code implements a Progressive Enhancement strategy: it checks for native browser support and falls back to GSAP ScrollTrigger for browsers that haven’t implemented the spec yet.
The Sticky Observer Navigation is a performance-first header component designed for modern landing pages. It uses an elegant dark-blue color palette with “Abril Fatface” typography to create a high-contrast, premium look. The navigation intelligently shrinks and hides the central title as the user scrolls, providing more screen real estate for content while maintaining essential link icons within a fixed bar.
This ScrollMagic Pizza Assembly Animation transforms a standard product landing page into an interactive storytelling experience. As the user scrolls down, individual pizza ingredients - peppers, mushrooms, olives - fly in from different directions to assemble a complete pizza. The sequence is tightly choreographed using GSAP timelines pinned to the scroll position, giving the user direct control over the “cooking” process.
This Ink Transition Scroll Effect brings digital storytelling to life by mimicking the organic spread of ink on paper. Designed for a biography page, it reveals images using a “splatter” transition triggered by scrolling. It combines ScrollMagic for timing, GSAP for smooth text entry, and CSS Sprites for the complex ink mask animation.
This GSAP ScrollSmoother Parallax Gallery represents a high-end implementation of scroll-based storytelling suitable for portfolios or luxury brand landing pages. It leverages the full power of the GreenSock ecosystem - specifically the premium ScrollSmoother and SplitText plugins - to create a “buttery” smooth scroll experience where content reveals itself with elegant, staggered animations and depth-inducing parallax.
An immersive scrolling experience where the user flies through a cloud of photos that smoothly approach and fade away, revealing an elegantly emerging text.
A suite of volumetric typographic experiments where depth is simulated by stacking multiple DOM layers along the Z-axis using transform-style: preserve-3d.
An immersive scrolling experience blending smooth typography with a floating 3D particle field powered by Three.js. GSAP orchestrates the camera movement and dynamic text highlighting, creating a synchronized parallax journey.
As you scroll down, a large image of a field shrinks and gets cropped by white blocks to focus attention, while a heading on the left counts up the percentage of water saved, changing color for emphasis. This creates the feel of a dynamic infographic.
A premium smooth-scrolling interface orchestrated by GSAP’s ScrollSmoother plugin. The layout leverages CSS Grid for overlapping compositions, while declarative data-speed attributes drive distinct parallax velocities for text and imagery, creating a layered, depth-rich browsing experience.
An animated vertical timeline where historical event cards slide in from alternating sides as they enter the viewport upon scrolling.
A fluid, tactile selection interface where elements “live” and react to scroll, creating a “fisheye” or lens effect.
A horizontal scroll interface featuring a “lens” effect powered by CSS Scroll-Driven Animations (animation-timeline: view(inline)).
A modern, visually appealing content grid that smoothly assembles on scroll, adapting seamlessly to any screen size.
A sophisticated scroll-hijacking gallery that emulates inertia using a virtual scroll container and requestAnimationFrame. JavaScript orchestrates complex 3D transforms - calculating rotation and translation based on intersection ratios - while the layout relies on a fixed CSS grid.
This demo is a masterclass in scroll-driven animation, where GSAP’s ScrollTrigger plugin choreographs multiple, layered effects. A fluid parallax effect is created by using scrub: 1 to tie the yPercent and rotation of decorative elements directly to the scrollbar. This is complemented by a sophisticated text reveal, where GSAP’s SplitText plugin animates characters into view with a staggered opacity and y tween, demonstrating a powerful and modular approach to building complex, interactive scrolling experiences.
Experience a classic “pinned” horizontal scroll effect, where a vertical scroll action is converted into horizontal movement. GSAP’s pin: true property freezes the section in place, while a tween animates the x property of the inner container, creating a cinematic, side-scrolling gallery.
This demo uses a single scroll event listener to calculate the individual progress of each list item as it enters the viewport. The progress value is then passed to a CSS Custom Property, which drives a staggered transform: scale() and opacity animation for a fluid, app-like reveal effect.
This infinitely scrolling image grid employs an IntersectionObserver with baton-passing observation to dynamically load content from the Pixabay API, creating cards through DOM manipulation as the user scrolls. JavaScript manages the paginated requests while CSS Grid provides responsive layout adaptation, with custom properties enabling seamless dark/light theme switching and clip-path animations.
A complex technical example demonstrating how to ensure animation functionality even without CSS animation-timeline: scroll() support. The code first checks for support and, if absent, uses GSAP ScrollTrigger as a polyfill for scroll-driven animation.
This demo showcases advanced THREE.js implementation using coordinate wrapping and custom shaders to create a highly performant, infinitely scrollable and draggable WebGL grid with motion-based visual feedback.
A dynamic image skew effect in pure Vanilla JS, where the transformation angle directly depends on the page’s scroll velocity, providing unique and responsive visual feedback.
A smooth vertical timeline featuring scroll-triggered element animation, implemented using efficient pure JavaScript DOM visibility tracking to enhance performance and content engagement.
A demonstration of per-character text manipulation using Splitting.js to create a striking CSS glitch animation, where each character receives a unique set of random custom properties for varied and dynamic text reveal effects.
An elegant text reveal effect that uses the Intersection Observer API for lazy-loading animation upon entering the viewport and relies on GSAP to perform a smooth “wipe” using a scale transformation.
Impressive scroll-triggered element reveal implemented using the native Intersection Observer API and styling based on CSS Custom Properties for cascading animations.
A demo of the scroll zoom effect via dynamic element visibility calculation and utilizing the Intersection Observer API for performance enhancement.
Pure JavaScript and CSS demonstrate how to replace a heavily pixelated placeholder with a full-size image using the data-src attribute and switching the image-rendering styles.
An advanced gallery UX pattern where view switching (List/Grid) uses GSAP Flip for calculating and executing complex transitions, and the hover preview effect is controlled by precise mouse events with debounce logic.
An interactive demo showcasing slide transitions via destructive digital effects. It uses WebGL shaders to create realistic VHS distortion, static, and pixelation.
This demo uses the JavaScript IntersectionObserver API to create a smart-scrolling navigation that appears on scroll and highlights the active section, all without performance-heavy event listeners.
A practical example of a full-page scroller built with GSAP, featuring an infinite loop via gsap.utils.wrap. The core animation uses nested containers for a split-reveal effect, while text comes alive with a staggered animation on individual characters thanks to SplitText.
Technically, this is an example of using GSAP for “in” and “out” element animations based on scroll position. The code effectively uses callback functions like onEnter, onEnterBack, and onLeave to manage element states, making them visible only when needed.
See how vertex and fragment shaders in Three.js are used to create a “living image” effect that reacts to scrolling. The technical focus is on the deformation (uOffset) and RGB shift (uRGBShift) controlled via GSAP.
A fullscreen horizontal scroll with unique infinite loop logic based on dynamic content cloning, complemented by a progress indicator.
An immersive scroll animation built on GSAP (ScrollTrigger) and Three.js. Features include 3D model loading, volumetric lighting, and dynamic animation parameters that can be easily adjusted via a control panel.
This isn’t just a simple scroll effect—it’s an artistic display of a custom-built disintegration animation. It leverages GSAP’s ScrollTrigger to control the precise, chaotic fade-out of an image rendered from the DOM.
A 3D isometric business card grid powered by a virtual scroll mechanism. JavaScript maps the window’s scroll position to a CSS custom property, driving the vertical translation of a fixed, tilted container.