10+ lenis.js Examples

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. (Requires: gsap-js, scroll-trigger-js, lenis-js)

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. (Requires: gsap-js, scroll-trigger-js, lenis-js, split-type)

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. (Requires: GSAP, Lenis, ScrollTrigger)

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. (Requires: Lenis, GSAP, ScrollTrigger)

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. (Requires: gsap-js, scroll-trigger-js, lenis-js)

As the user scrolls down, images transition not by simple sliding or fading, but through a complex diagonal “wiping” animation controlled by dynamic gradients, all while the text content remains fixed over the changing background.

An elegant, kinetic, presentation-like website that uses scrolling to drive deep, layered animation and audio feedback.

A demo of a vertical section-snapping gallery with fixed content, utilizing GSAP ScrollTrigger and Lenis for smooth scroll control. The core feature is ClipPath and SplitText-driven background and title transition logic between slides.

This demo uses a React and GSAP ScrollTrigger combination to create a parallax effect with smooth scrolling. The key feature is the animation’s synchronization with scroll movement, achieved through Lenis integration.

This demo is a showcase of cool animation with WebGL and Three.js, where smooth scrolling via Lenis combines with interesting visual effects like RGB shift and image deformation.