GSAP Scroll Animations

Over 50+

Scroll-driven animations that respond to the user as they navigate. Built with GSAP ScrollTrigger for pinning, scrubbing, and triggering at precise scroll positions. 58 effects, 5 free, no build step.

The Vault. Every item in the library, including the Vault exclusives, and everything added to it.

£99 Get the Vault See inside the Vault Browse these effects

Browse effects

Category

All164 ScrollZoomTextHoverImageRevealSlidersSVGBackgroundWebGLLoadingLiquid

58 effects

    Deconstructed Launch Page - Pinned scroll section where a finished product landing page bursts into a 3D cloud of its own live components (nav, headline words, product photo, feature cards, price and button), then scrolling pulls each part home in captioned chapters until the real, working page is back together New
    172 £7

    Deconstructed Launch Page

    Pinned scroll section where a finished product landing page bursts into a 3D cloud of its own live components (nav, headline words, product photo, feature cards, price and button), then scrolling pulls each part home in captioned chapters until the real, working page is back together.

    ScrollTriggerFlip
    Lens Focus Pull Scroll - Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo New
    170 £7

    Lens Focus Pull Scroll

    Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo.

    ScrollTrigger pinning
    Box Unfold Scroll - A pinned, printed product carton built from CSS 3D panels that unfolds into its flat dieline as you scroll: the tuck lid opens, a real-time three New
    167 £7

    Box Unfold Scroll

    A pinned, printed product carton built from CSS 3D panels that unfolds into its flat dieline as you scroll: the tuck lid opens, a real-time three.js glass jar lifts out turning in 3D, and every flap, side and the glue tab hinges flat with card-stock overshoot.

    ScrollTrigger 3d-transforms
    Blueprint to Product Scroll - A pinned scroll scene where a technical drawing of a product draws itself with a pen tip, adds counting dimensions and numbered callouts, then becomes the product photograph through a hatching mask New
    168 £7

    Blueprint to Product Scroll

    A pinned scroll scene where a technical drawing of a product draws itself with a pen tip, adds counting dimensions and numbered callouts, then becomes the product photograph through a hatching mask.

    ScrollTriggerDrawSVG
    Vinyl Record Scroll - Pinned scroll scene that plays a record: the disc slides out of its sleeve onto a turntable, spins up under a groove sheen, and the tonearm tracks inward while the track list lights in step with the needle New
    169 £7

    Vinyl Record Scroll

    Pinned scroll scene that plays a record: the disc slides out of its sleeve onto a turntable, spins up under a groove sheen, and the tonearm tracks inward while the track list lights in step with the needle.

    ScrollTrigger pinning
    Keyhole Zoom - Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message New
    162 £7

    Keyhole Zoom

    Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message.

    ScrollTrigger pinning
    Postcard Flip Zoom - Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed New
    163 £7

    Postcard Flip Zoom

    Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed.

    ScrollTrigger pinning
    Ring Align Zoom - Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed New
    164 £7

    Ring Align Zoom

    Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed.

    ScrollTrigger pinning
    Dolly Zoom - Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph New
    165 £7

    Dolly Zoom

    Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph.

    ScrollTrigger pinning
    Stretch Type Reveal - Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen New
    166 £7

    Stretch Type Reveal

    Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen.

    ScrollTrigger pinning
    Inline Image Headline - Pinned scroll headline with a picture set as a word in the sentence New
    153 £7

    Inline Image Headline

    Pinned scroll headline with a picture set as a word in the sentence. Scrolling grows the small pill to full bleed, and the words around it are pushed out along the line as real type.

    ScrollTrigger pinning
    Letterbox Scroll Reveal - Pinned scroll section where a full-width picture opens from a hairline slit to full bleed like a film letterbox, with two lines of huge headline riding the slit's edges off the stage New
    154 £7

    Letterbox Scroll Reveal

    Pinned scroll section where a full-width picture opens from a hairline slit to full bleed like a film letterbox, with two lines of huge headline riding the slit's edges off the stage.

    ScrollTrigger pinning
    Nested Scroll Zoom - Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message New
    155 £7

    Nested Scroll Zoom

    Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message.

    ScrollTrigger pinning
    Image Tile Assemble - Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top New
    156 £7

    Image Tile Assemble

    Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top.

    ScrollTrigger pinning
    Floor to Wall Zoom - Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed New
    157 £7

    Floor to Wall Zoom

    Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed.

    ScrollTrigger pinning
    Arch Window Reveal - Pinned scroll section where tall arched windows in a flat wall look out on one continuous picture, then widen and dissolve the piers between them until the view is full bleed New
    158 £7

    Arch Window Reveal

    Pinned scroll section where tall arched windows in a flat wall look out on one continuous picture, then widen and dissolve the piers between them until the view is full bleed.

    ScrollTrigger pinning
    Cut-out Breakout Zoom - Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her New
    159 £7

    Cut-out Breakout Zoom

    Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her.

    ScrollTrigger pinning
    Last Word Zoom - Pinned scroll quote that lights word by word, then the camera flies into a letter of its last word, which is filled with a photo, until the photo fills the screen New
    160 £7

    Last Word Zoom

    Pinned scroll quote that lights word by word, then the camera flies into a letter of its last word, which is filled with a photo, until the photo fills the screen.

    ScrollTrigger pinning
    Photo Reel Zoom - Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture New
    161 £7

    Photo Reel Zoom

    Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture.

    ScrollTrigger pinning
    Text Mask Zoom - A pinned hero opens on one huge word cut out of the page with a film playing through its letters
    150 £7

    Text Mask Zoom

    A pinned hero opens on one huge word cut out of the page with a film playing through its letters. Scroll flies the camera through the hole in one letter until the film is full bleed, then the real heading rises over it. Built on GSAP ScrollTrigger.

    ScrollTrigger mask-reveal
    Horizontal Card Track - A pinned horizontal scroll section where the cards hang from a real line, built on GSAP ScrollTrigger, Draggable and InertiaPlugin: the cord sags, stretches and waves with the row, and every card swings from its peg
    152 £7

    Horizontal Card Track

    A pinned horizontal scroll section where the cards hang from a real line, built on GSAP ScrollTrigger, Draggable and InertiaPlugin: the cord sags, stretches and waves with the row, and every card swings from its peg.

    ScrollTriggerDraggable
    Receipt Printer Scroll - Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter
    102 £7

    Receipt Printer Scroll

    Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter.

    ScrollTrigger scrub
    Scroll Hotspot Tour - A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline
    087 £7

    Scroll Hotspot Tour

    A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline.

    ScrollTrigger scroll-scrub
    Image Transition Slider - A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll
    083 £7

    Image Transition Slider

    A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll.

    ScrollTrigger scroll-scrub
    Laptop Screen Scroll - A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through
    080 Premium £15

    Laptop Screen Scroll

    A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through. Built with GSAP ScrollTrigger.

    ScrollTrigger webgl-shader
    Phone Screen Scroll - A real 3D phone, built in three
    109 £7

    Phone Screen Scroll

    A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots. One img tag per screen. GSAP scrubs the pose; three.js draws it.

    ScrollTrigger webgl-shader
    Serpentine Text Scroll - Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve
    076 £7

    Serpentine Text Scroll

    Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve.

    ScrollTrigger text-animation
    Type Helix - Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils, driven by GSAP ScrollTrigger
    077 £7

    Type Helix

    Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils, driven by GSAP ScrollTrigger.

    ScrollTrigger text-animation
    Folded Type Scroll - A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension
    078 £7

    Folded Type Scroll

    A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension.

    ScrollTrigger text-animation
    Exploded View Scroll - A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back
    067 £7

    Exploded View Scroll

    A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back.

    ScrollTrigger exploded-view
    Scroll Timeline Chronicle - A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll
    063 £7

    Scroll Timeline Chronicle

    A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll.

    ScrollTrigger scrub
    Chrono Rail Timeline - A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle
    064 £7

    Chrono Rail Timeline

    A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle.

    ScrollTrigger horizontal-scroll
    Isometric Scroll Wall - A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click
    059 £7

    Isometric Scroll Wall

    A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click.

    ScrollTrigger isometric
    Scroll Depth Corridor - A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point
    058 £7

    Scroll Depth Corridor

    A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point.

    ScrollTrigger 3d-transforms
    Editorial Scrollytelling - A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow
    057 £7

    Editorial Scrollytelling

    A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow.

    ScrollTriggerFlip
    Scroll Morph Mask Video - A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed
    056 £7

    Scroll Morph Mask Video

    A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed. Flick and the mask breathes: it inflates, the edge splits into an accent and a chalk fringe, and the footage speeds up.

    ScrollTriggerMorphSVG
    Liquid Fill Reveal - A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline
    054 £7

    Liquid Fill Reveal

    A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline.

    ScrollTrigger scrub
    Split-Screen Hero Handoff - A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams
    041 £7

    Split-Screen Hero Handoff

    A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams.

    ScrollTrigger canvas
    Scroll Sequence Hero Transition - A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets
    040 £7

    Scroll Sequence Hero Transition

    A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets.

    ScrollTrigger image-sequence
    Scroll Video Scrub - Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage
    033 £7

    Scroll Video Scrub

    Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. Apple-keynote scrub, one MP4 and a tween.

    ScrollTrigger video-scrub
    Scroll Hijack Sections - Five pinned editorial chapters that assemble word by word as you scroll
    011 £7

    Scroll Hijack Sections

    Five pinned editorial chapters that assemble word by word as you scroll. Slides from both edges, a vertical rise and a blur-to-sharp reveal, with a velocity lean that settles after every flick.

    ScrollTrigger scroll-hijack
    Scroll Story Flow - Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing
    068 £7

    Scroll Story Flow

    Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. Scroll down through three expressive scenes.

    ScrollTriggerCustomEase
    Scroll Image Sequence - Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress
    015 £7

    Scroll Image Sequence

    Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress.

    ScrollTrigger scrub
    Scroll Progress Indicator - A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage
    f02 Free

    Scroll Progress Indicator

    A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage.

    ScrollTrigger scroll-progress
    CSS Scroll Reveal - Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript
    c01 Free

    CSS Scroll Reveal

    Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript.

    scroll-revealscroll-driven-animation
    Elastic Stack Cards - Stacked cards that spring open into a fan
    013 £7

    Elastic Stack Cards

    Stacked cards that spring open into a fan. Three fan shapes, opened by hover, focus, tap or an external button, with click-to-front card selection.

    ScrollTrigger hover-effect
    Stagger Grid Reveal - Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt
    010 £7

    Stagger Grid Reveal

    Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt.

    ScrollTrigger scroll-reveal
    Horizontal Scroll Section - A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline
    022 £7

    Horizontal Scroll Section

    A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline.

    ScrollTrigger horizontal-scroll
    SVG Line Draw on Scroll - SVG paths draw themselves as you scroll using the stroke-dasharray technique
    020 £7

    SVG Line Draw on Scroll

    SVG paths draw themselves as you scroll using the stroke-dasharray technique. Scrubbed or play-once modes, works on any SVG shape, no DrawSVG plugin required.

    ScrollTrigger svg-line-draw
    Count-Up Stats - Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay
    019 £7

    Count-Up Stats

    Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay.

    ScrollTrigger scroll-reveal
    Parallax Hero - A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer
    f04 Free

    Parallax Hero

    A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer.

    ScrollTrigger parallax
    Image Clip Reveal - A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands
    f05 Free

    Image Clip Reveal

    A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands.

    ScrollTrigger scroll-reveal
    Scroll Velocity Skew - Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot
    026 £7

    Scroll Velocity Skew

    Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot.

    ScrollTrigger velocity-reactive
    Radial Headline Burst - A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle
    066 £7

    Radial Headline Burst

    A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle.

    ScrollTriggerSplitText
    Scroll Zoom Portal - Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene
    029 £7

    Scroll Zoom Portal

    Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene.

    ScrollTrigger pinning
    Scroll Text Highlight - A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted
    f07 Free

    Scroll Text Highlight

    A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted.

    ScrollTriggerSplitText
    Scroll Stack Cards - Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck
    034 £7

    Scroll Stack Cards

    Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck.

    ScrollTrigger scroll-stack
    Scroll Path Journey - Pinned scroll storytelling with GSAP ScrollTrigger and MotionPathPlugin: a route draws across a chart as the reader scrolls, a camera pans and zooms to frame each leg, and each stop's card slides in beside it
    025 £7

    Scroll Path Journey

    Pinned scroll storytelling with GSAP ScrollTrigger and MotionPathPlugin: a route draws across a chart as the reader scrolls, a camera pans and zooms to frame each leg, and each stop's card slides in beside it.

    ScrollTriggerMotionPathPlugin

    Browse all 164 effects

    Quick view

    View product

    Loading demo

    Building Scroll Animations with GSAP

    Scroll animations transform static pages into interactive experiences. Instead of content sitting idle until the user scrolls past, elements react to scroll position: fading in, sliding, scaling, or morphing as the viewport moves. GSAP ScrollTrigger makes this reliable across browsers and devices.

    ScrollTrigger connects any GSAP animation to scroll position. You define a start point, an end point, and whether the animation plays once or scrubs continuously with scroll. This gives you fine-grained control over timing without writing scroll event listeners or calculating offsets manually.

    The effects below demonstrate different scroll patterns. Section hijacking pins content while animations play. Image sequences swap frames based on scroll position. Progress indicators track reading position. Reveal animations stagger elements into view as sections enter the viewport.

    Every effect supports reduced motion, and the GSAP ones include proper cleanup and responsive breakpoints via GSAP matchMedia; CSS Scroll Reveal is the exception that needs no animation JavaScript at all. They work with or without smooth scrolling libraries like Lenis.

    How to create a scroll animation with GSAP

    Link any GSAP tween to scroll position with the ScrollTrigger plugin. Register the plugin, point a trigger at the element, and set where in the viewport the animation starts.

    1. 1

      Load GSAP and ScrollTrigger

      Add the GSAP core and the ScrollTrigger plugin, then register the plugin once before using it.

    2. 2

      Attach a trigger

      Pass a scrollTrigger config to any tween. Set trigger to the element and start to the point where it should begin, e.g. "top 80%".

    3. 3

      Animate transform and opacity

      Tween y and opacity rather than top or height so the animation runs on the compositor and stays smooth.

    4. 4

      Respect reduced motion

      Wrap the tween in gsap.matchMedia with a prefers-reduced-motion query so it is skipped for users who opt out.

    Minimal example
    import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.from(".reveal", {
  scrollTrigger: {
    trigger: ".reveal",
    start: "top 80%",   // element top hits 80% down the viewport
  },
  y: 40,
  opacity: 0,
  duration: 0.8,
  ease: "power3.out",
});

    Scroll Effects at a glance

    Compare the 58 scroll effects in this category by what they do, technique, and difficulty.
    Effect What it doesBuilt withDifficulty
    Deconstructed Launch Page Pinned scroll section where a finished product landing page bursts into a 3D cloud of its own live components (nav, headline words, product photo, feature cards, price and button), then scrolling pulls each part home in captioned chapters until the real, working page is back together. ScrollTrigger, Flip, SplitText, Draggable, InertiaPlugin, pinning advanced
    Lens Focus Pull Scroll Pinned scroll section that works a camera lens: focus pulls from the city to the photographer with real depth-of-field blur, a focus ring and aperture ring turn past an index mark, the lens stops down until both planes sharpen, and the shutter fires to leave a printed photo. ScrollTrigger, pinning advanced
    Box Unfold Scroll A pinned, printed product carton built from CSS 3D panels that unfolds into its flat dieline as you scroll: the tuck lid opens, a real-time three.js glass jar lifts out turning in 3D, and every flap, side and the glue tab hinges flat with card-stock overshoot. ScrollTrigger, 3d-transforms advanced
    Blueprint to Product Scroll A pinned scroll scene where a technical drawing of a product draws itself with a pen tip, adds counting dimensions and numbered callouts, then becomes the product photograph through a hatching mask. ScrollTrigger, DrawSVG, svg-line-draw advanced
    Vinyl Record Scroll Pinned scroll scene that plays a record: the disc slides out of its sleeve onto a turntable, spins up under a groove sheen, and the tonearm tracks inward while the track list lights in step with the needle. ScrollTrigger, pinning advanced
    Keyhole Zoom Pinned scroll section that flies the camera through a keyhole in a door, carrying a painted headline off with it, and lands on the picture behind at full bleed under a closing message. ScrollTrigger, pinning advanced
    Postcard Flip Zoom Pinned scroll section where a postcard writes its own handwritten note, turns over in real 3D as it grows, and its picture side lands exactly full bleed. ScrollTrigger, pinning advanced
    Ring Align Zoom Pinned scroll section where a product photo cut into concentric rings spins back into alignment like a combination lock until it clicks together, then the circle opens to full bleed. ScrollTrigger, pinning advanced
    Dolly Zoom Pinned scroll section that plays the Vertigo dolly zoom: the subject holds perfectly still at the same size while the corridor behind her pulls slowly away through doorway after doorway, then a closing line lands over the finished photograph. ScrollTrigger, pinning advanced
    Stretch Type Reveal Pinned GSAP scroll section where a huge poster headline filled with a photo stretches into full-height columns, then fattens until the gaps close and the picture fills the screen. ScrollTrigger, pinning intermediate
    Inline Image Headline Pinned scroll headline with a picture set as a word in the sentence. ScrollTrigger, pinning intermediate
    Letterbox Scroll Reveal Pinned scroll section where a full-width picture opens from a hairline slit to full bleed like a film letterbox, with two lines of huge headline riding the slit's edges off the stage. ScrollTrigger, pinning intermediate
    Nested Scroll Zoom Pinned scroll section that flies the camera through a window in one picture into the next, and on through every opening in turn, until the last picture lands full bleed under a closing message. ScrollTrigger, pinning advanced
    Image Tile Assemble Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top. ScrollTrigger, pinning intermediate
    Floor to Wall Zoom Pinned 3D scroll section where a photo lying flat on the ground stands up towards the viewer, passes in front of the headline on the wall behind it, and lands square and full bleed. ScrollTrigger, pinning advanced
    Arch Window Reveal Pinned scroll section where tall arched windows in a flat wall look out on one continuous picture, then widen and dissolve the piers between them until the view is full bleed. ScrollTrigger, pinning intermediate
    Cut-out Breakout Zoom Pinned scroll section where a cut-out dancer spins through twelve frames per turn as you scroll, with silk that keeps moving, in front of a huge headline while a narrow card opens to full bleed behind her. ScrollTrigger, pinning advanced
    Last Word Zoom Pinned scroll quote that lights word by word, then the camera flies into a letter of its last word, which is filled with a photo, until the photo fills the screen. ScrollTrigger, pinning advanced
    Photo Reel Zoom Pinned scroll section where a small frame flicks through aligned photographs like a flipbook as it grows to full bleed, with hard colour cuts around a subject who stays put, then a closing message over the final picture. ScrollTrigger, pinning intermediate
    Text Mask Zoom A pinned hero opens on one huge word cut out of the page with a film playing through its letters. ScrollTrigger, mask-reveal intermediate
    Horizontal Card Track A pinned horizontal scroll section where the cards hang from a real line, built on GSAP ScrollTrigger, Draggable and InertiaPlugin: the cord sags, stretches and waves with the row, and every card swings from its peg. ScrollTrigger, Draggable, InertiaPlugin, horizontal-scroll intermediate
    Receipt Printer Scroll Scroll to feed a receipt up out of a thermal printer line by line: the strip droops and curls towards you, flutters with scroll speed, then tears at the perforation and lands on the counter. ScrollTrigger, scrub advanced
    Scroll Hotspot Tour A scroll-driven visual story that travels through one large image, flows between chapters and connects every event to its location with an accurate numbered timeline. ScrollTrigger, scroll-scrub advanced
    Image Transition Slider A pinned photographic sequence where portrait panels rise, expand into panoramas and carry oversized project titles through the scroll. ScrollTrigger, scroll-scrub intermediate
    Laptop Screen Scroll A laptop opens on scroll, fills the viewport, then becomes the live website you keep scrolling through. ScrollTrigger, webgl-shader advanced
    Phone Screen Scroll A real 3D phone, built in three.js, stands pinned in the page and turns as you scroll: front, three-quarter, edge-on, then the back with its camera module, while its screen changes between your screenshots. ScrollTrigger, webgl-shader advanced
    Serpentine Text Scroll Oversized lettering flows around an S-shaped path that pulls taut as you scroll and springs back into a deep curve. ScrollTrigger, text-animation intermediate
    Type Helix Turn oversized lettering into a scrolling spiral with hollow rear faces and spring-loaded coils, driven by GSAP ScrollTrigger. ScrollTrigger, text-animation intermediate
    Folded Type Scroll A giant printed headline unfolds from a connected paper concertina as you scroll, with dimensional hinges and soft elastic tension. ScrollTrigger, text-animation intermediate
    Exploded View Scroll A pinned product stack that separates into an exploded assembly diagram as you scroll, with layers that tilt into three-quarter view, callouts that draw in, and a velocity overshoot that springs back. ScrollTrigger, exploded-view intermediate
    Scroll Timeline Chronicle A scroll-scrubbed vertical chronology: entries magnetically hang in a reading band and ease through the handoff while a drawn spine, an odometer year and a depth-blur falloff all react to the same scroll. ScrollTrigger, scrub advanced
    Chrono Rail Timeline A pinned horizontal timeline where vertical scroll drives a chronology of full dated entries past a fixed playhead, with a velocity blur, ruler era marks and a straight gliding settle. ScrollTrigger, horizontal-scroll advanced
    Isometric Scroll Wall A wall of poster tiles laid on an isometric plane, adjacent lanes travelling in opposite directions and wrapping forever as you scroll, with a hard flick banking the whole plane and any tile pulling square to the viewer on a click. ScrollTrigger, isometric advanced
    Scroll Depth Corridor A corridor of panels receding into depth that the camera flies through as you scroll, wrapping from far to near so it never ends, with a hard flick opening the field of view and streaking the whole corridor past a headline that holds dead still at the vanishing point. ScrollTrigger, 3d-transforms advanced
    Editorial Scrollytelling A sticky editorial media rail that morphs between section-defined aspect ratios with Flip, directional image wipes, layered drift and a velocity-reactive settle while the prose stays in normal document flow. ScrollTrigger, Flip, flip-layout advanced
    Scroll Morph Mask Video A looping surf film that never stops playing, seen through a vector mask that scroll morphs from a mark into the letterforms of a word, then zooms through a letter to full bleed. ScrollTrigger, MorphSVG, video-mask advanced
    Liquid Fill Reveal A scroll-scrubbed liquid fills a frame behind your content, with a simulated wave surface that sloshes on a fast scroll and inverts everything below the waterline. ScrollTrigger, scrub advanced
    Split-Screen Hero Handoff A cinematic video hero that opens as six alternating vertical shutters, pulling its headline apart and revealing real page content through the seams. ScrollTrigger, canvas advanced
    Scroll Sequence Hero Transition A scroll-scrubbed canvas image sequence hero that lifts into real page content, with Editorial, Serif, and Mono typographic presets. ScrollTrigger, image-sequence advanced
    Scroll Video Scrub Scroll drives a real video's playhead frame-by-frame while a horizontal track of chapters pans across the pinned footage. ScrollTrigger, video-scrub advanced
    Scroll Hijack Sections Five pinned editorial chapters that assemble word by word as you scroll. ScrollTrigger, scroll-hijack intermediate
    Scroll Story Flow Pinned photographic stories with oversized single-line text travelling across the viewport, image wipes, parallax and custom easing. ScrollTrigger, CustomEase, pinning intermediate
    Scroll Image Sequence Cinematic canvas frame scrubbing with an expanding aperture, synchronized caption crossfades, and reversible scroll progress. ScrollTrigger, scrub intermediate
    Scroll Progress Indicator A precise GSAP reading-progress indicator in four shapes: a top bar, an SVG ring, a side rail, and a numeric percentage. ScrollTrigger, scroll-progress beginner
    CSS Scroll Reveal Native CSS scroll-driven reveals for crisp fade, slide, and scale entrances with accessible static fallbacks and no animation JavaScript. scroll-reveal beginner
    Elastic Stack Cards Stacked cards that spring open into a fan. ScrollTrigger, hover-effect intermediate
    Stagger Grid Reveal Directional GSAP grid reveals that send tiles through corner, center, edge, axis, or random waves with cinematic rotation, scale, blur, and optional focus-aware tilt. ScrollTrigger, scroll-reveal intermediate
    Horizontal Scroll Section A pinned section where vertical scroll pans a row of full-viewport panels sideways, with snap to panel edges, per-element parallax and a progress readout driven by the same timeline. ScrollTrigger, horizontal-scroll intermediate
    SVG Line Draw on Scroll SVG paths draw themselves as you scroll using the stroke-dasharray technique. ScrollTrigger, svg-line-draw intermediate
    Count-Up Stats Entry- or scroll-triggered number counters with locale-aware formatting, staggered reveals, synchronized progress visuals, and optional replay. ScrollTrigger, scroll-reveal beginner
    Parallax Hero A pinned hero that pulls its layers into depth from one scrubbed ScrollTrigger: a headline sandwiched inside the stack, ridges or photographs climbing over it, and a sun that sets behind the far layer. ScrollTrigger, parallax intermediate
    Image Clip Reveal A cinematic image reveal where a directional polygon aperture opens as the photograph settles from a restrained Ken Burns scale and its caption lands. ScrollTrigger, scroll-reveal beginner
    Scroll Velocity Skew Kinetic type that smears with scroll speed (shear, stretch, motion blur and chromatic fringing in one velocity-driven response) then whips back line by line with an elastic overshoot. ScrollTrigger, velocity-reactive intermediate
    Radial Headline Burst A scroll-scrubbed headline that explodes each character from one centre point into crisp, readable type with a chromatic fringe and spring-like settle. ScrollTrigger, SplitText, scrub intermediate
    Scroll Zoom Portal Pinned scroll section where a small framed panel zooms up to swallow the viewport, parting the headline around it, so scrolling feels like stepping through a portal into the next scene. ScrollTrigger, pinning intermediate
    Scroll Text Highlight A scrubbed orange-to-lime reading front lifts each active word before completed copy settles to white and unread copy remains ghosted. ScrollTrigger, SplitText, scroll-reveal intermediate
    Scroll Stack Cards Full-width panels that stack over one another as you scroll, each one locking into place with an overshoot while the cards beneath compress into a visible deck. ScrollTrigger, scroll-stack advanced
    Scroll Path Journey Pinned scroll storytelling with GSAP ScrollTrigger and MotionPathPlugin: a route draws across a chart as the reader scrolls, a camera pans and zooms to frame each leg, and each stop's card slides in beside it. ScrollTrigger, MotionPathPlugin, motion-path intermediate

    Related guides

    Frequently asked questions

    What is GSAP ScrollTrigger?

    ScrollTrigger is a GSAP plugin that links animations to scroll position. You define trigger points in the viewport, and ScrollTrigger handles the rest: playing animations on enter, scrubbing with scroll progress, or pinning elements while content scrolls past.

    Do GSAP scroll animations work on mobile?

    Yes. All scroll effects here are responsive and touch-friendly. The GSAP ones use matchMedia to adjust behavior on smaller screens, and every one respects the prefers-reduced-motion setting for accessibility.

    Can I combine multiple scroll animations on one page?

    Absolutely. ScrollTrigger handles multiple instances independently. Each effect manages its own trigger, timeline, and cleanup. You can stack scroll-triggered sections, parallax layers, and reveal animations on the same page without conflicts.

    How do I prevent scroll animation jank?

    Animate transform and opacity properties, which run on the compositor thread. Avoid animating width, height, or top/left. Use will-change sparingly on elements about to animate, and test on lower-powered devices to catch performance issues early.

    Browse all effects What GSAP effects are
    Related categories
    Text AnimationsImage Animations