Lenis smooth scroll
Live Lenis smooth scroll examples combined with GSAP ScrollTrigger: inertia scrolling, scroll-linked sections and velocity effects. Free demos; prompts and source for subscribers.
Lenis is a small library that makes page scrolling smooth with inertia, while keeping native scroll behaviour such as the scrollbar, anchors and touch. It is often paired with GSAP ScrollTrigger so scroll-linked animation follows the smoothed position.
These examples are real effects and full templates from the library that use Lenis. Each runs live, with knobs for the values that change the feel, such as how strongly the scroll is smoothed, and a reduced-motion fallback that turns smoothing off.
Smooth scrolling is a taste decision. It suits editorial and portfolio pages, and can annoy people on a dense application. Try the demos on your own device, and keep it off for visitors who ask for reduced motion, as the prompts here do.
Showing 12 · 1 effects and 50 templates use this
medium Lenis smooths the page (lerp 0.08) while chosen layers (three photos, hero lines, quote words, stats) chase that position with catch-up times of 0–0.6s. They trail behind as you scroll and settle into dashed outlines when you stop.
Featured medium A landing page for an invented Lisbon sunglasses maker: move the cursor over the portrait and the sunglasses appear, then a signature draws itself, a scattered photo diary drifts by and the four frames turn in 3D.
Featured medium A complete luxury launch page in one motion language: a counted preloader, a masked hero over a settling image, a pinned canvas bottle that turns to reveal three callouts, a word-by-word story, a pinned sideways gallery and a footer wordmark that fills.
WebGL E-bike launch template for an invented Rotterdam brand: a photo-real 3D bike rolls in, then the scroll tracks the frame, drops the battery, explodes the motor, swaps colours and counts the range.
WebGL A light launch page for invented Stillmere One headphones: a photo-real 3D pair rotates in, comes apart into seven parts, flattens a noise wave, changes colour and folds into its case, then specs, compare, pre-order bag and FAQ.
WebGL A light shop page for an invented Paris lipstick house: a photo-real gold lipstick pops its magnetic cap, twists, raises the bullet and walks through eight shades as you scroll, then real arm swatches, a shade finder, sets, refills and a bag.
WebGL Niche perfume house template: scroll moves the sun across a limestone table from dawn to night, past four photo-real glass flacons whose coloured shadows and caustics swing with the light.
WebGL Serum skincare template for an invented Copenhagen brand: a photo-real frosted dropper bottle; scroll lifts the glass pipette, gathers one drop, lets it fall and lands it as a real macro video.
WebGL Soft-drink launch site for a fictional cola: one photo-real 3D can spins in cold, cracks open, slices into six flavours, pours through each colourway and lands in the lineup.
medium Aesthetic clinic template for a Liverpool skin clinic: light on water seen through a ring lamp, a find-your-treatment picker, a hover-reveal price list, a before/after loupe, the first-visit safety steps, clinicians and booking.
medium AI SaaS template for a meeting-notes assistant: scroll runs a live meeting while the transcript and notes write themselves, then features, meeting types, integrations, security, pricing and FAQ.
medium Architecture and interior design studio template for a Bristol practice: every photo starts as its own ink drawing and a build line reveals the building. Projects index, services, RIBA-style stages, fee estimate, FAQ and enquiry form.
Lenis and ScrollTrigger must share one clock. The effects here wire them together correctly, so pinned sections do not jump.
Check that anchors, the keyboard and touch scroll still behave normally. Native behaviour should not be broken for the effect.
Reduced-motion visitors get normal scrolling, and the knobs let you soften the effect.
Prompts Pro $169/month · All Access $299/month (prompts and source for everything) · single template $39 one-time. See pricing.
Lenis smooths the scroll itself. ScrollTrigger runs animations at scroll positions. They are separate and work well together.
It does not change your content for search engines. For accessibility, respect reduced-motion settings and keep keyboard and anchor scrolling working, which these effects do.
Lenis is an open-source library under an MIT licence. Check its repository for the current terms.
Any of Claude, Cursor, Lovable, v0 or Bolt. The guides page has exact steps for each.
Try “pinned”, “SplitText”, “WebGL”, “cursor”…