20 GSAP ScrollTrigger Examples for Modern Websites

Looking for GSAP ScrollTrigger examples you can actually use?

This collection covers several practical scroll animation effects, including horizontal scrolling, parallax, pinned sections, stacked cards, text reveals, SVG morphing, Lottie, scroll-driven video, and portfolio animations.

Each example includes a live preview, a short explanation, and code you can adapt to your own website.

In this article, we will explore 20 inspiring GSAP ScrollTrigger examples that demonstrate how to transform ordinary scrolling into captivating, high-performance web experiences.

1. ScrollTrigger

ScrollTrigger connects animations directly to a user’s scroll position, allowing elements to animate as visitors move through a page. It is ideal for designers, developers, and agencies creating interactive storytelling, product presentations, or visually engaging landing pages.

Best use cases: Hero sections, storytelling pages, product showcases, agency websites, and interactive portfolios.

2. Horizontal Scrolling

Horizontal scrolling transforms vertical scrolling into a sideways visual journey, making it useful for displaying multiple pieces of content within a single section. It benefits portfolios, creative agencies, product brands, and designers who want to present images, projects, or timelines in a more immersive way.

Best use cases: Image galleries, portfolios, product showcases, timelines, and case studies.

3. Scroll Smoother

ScrollSmoother creates a more fluid and natural scrolling experience by adding smooth, momentum-based movement to a webpage. It is particularly useful for designers and developers who want premium-feeling interactions without making individual animations feel abrupt.

Best use cases: Landing pages, creative agency websites, portfolios, and premium brand websites.

4. Stacked Cards

Stacked card animations reveal layered cards progressively as users scroll, creating a structured storytelling experience without overwhelming the screen with content. They are useful for businesses, SaaS brands, and agencies that need to present multiple features, services, or steps in a visually engaging sequence.

Best use cases: Feature sections, service showcases, product benefits, step-by-step processes, and storytelling pages.

5. Parallax Effect

Parallax scrolling creates a sense of depth by moving foreground and background elements at different speeds as users scroll. It benefits designers and marketers who want to make landing pages, hero sections, and visual stories feel more dynamic and immersive.

Best use cases: Hero banners, photography websites, creative portfolios, travel websites, and storytelling sections.

6. Smooth Scrolling

Smooth scrolling uses fluid, momentum-based movement to make page navigation feel more natural and polished. It can benefit almost any visually focused website, particularly portfolios, agency sites, and modern landing pages where seamless movement contributes to the overall user experience.

Best use cases: Portfolio websites, agency websites, landing pages, and interactive experiences.

7. Image Scale with Scroll

Image scale animation gradually enlarges or shrinks an image according to the user’s scroll position, naturally drawing attention to important visual content. It is especially useful for brands, photographers, agencies, and product-focused websites that want to emphasize key imagery.

Best use cases: Hero sections, product showcases, promotional banners, photography, and visual storytelling.

8. Image Stretch Animation

Image stretch animation dynamically changes an image’s width or height as the visitor scrolls, creating a dramatic transition between sections. Designers can use it to turn ordinary image blocks into interactive focal points and create stronger visual movement.

Best use cases: Creative portfolios, brand websites, section transitions, image galleries, and modern landing pages.

9. Morph SVG

SVG morphing smoothly transforms one vector shape into another as the user scrolls, creating distinctive visual transitions with lightweight vector graphics. It is particularly valuable for creative brands, designers, and developers looking to add custom visual storytelling, icons, or branding effects.

Best use cases: Logos, icons, illustrations, branding sections, interactive storytelling, and creative landing pages.

10. Lottie Animation With Scrolling

Lottie scroll animations synchronize lightweight vector animations with the user’s scroll progress, allowing illustrations to play, pause, or progress based on movement. They are useful for explaining products, visualizing processes, and creating interactive storytelling without relying on traditional video.

Best use cases: Product demonstrations, explainer sections, onboarding flows, SaaS websites, illustrations, and interactive storytelling.

11. Pin Elements

Pin elements keep an important section or element fixed while the rest of the page continues scrolling, creating a focused storytelling effect. It benefits designers, marketers, and product teams who want visitors to concentrate on key information, features, or visual content.

Best use cases: Product features, step-by-step processes, storytelling sections, feature comparisons, and interactive landing pages.

12. Scroll Elements

Scroll element animations reveal or transform elements as they enter or leave the viewport, using effects such as fading, sliding, rotating, or scaling. They help designers introduce content progressively and create smoother visual transitions without displaying everything at once.

Best use cases: Content sections, service pages, feature reveals, portfolios, and modern landing pages.

13. Nested Elements

Nested scroll animations coordinate animations between parent and child elements, creating multiple layers of movement within the same section. This is useful for designers and developers building complex storytelling experiences where several elements need to respond to scrolling in a controlled sequence.

Best use cases: Interactive product sections, layered illustrations, storytelling pages, dashboards, and advanced landing pages.

14. Scrolling Text Animation Invert Scrub

Invert scrub text animation reverses the direction or visual behavior of text as users scroll, creating a dynamic push-and-pull effect. It benefits creative designers and brands that want typography itself to become an interactive part of the website experience.

Best use cases: Hero sections, creative agency websites, campaign pages, editorial designs, and bold typography layouts.

15. Scrolling Word Text Animation Transform Value

Word-based transform animation animates individual words or text elements by changing properties such as position, rotation, or scale in response to scrolling. It is ideal for turning ordinary headlines into attention-grabbing visual storytelling.

Best use cases: Headlines, brand messages, campaign pages, editorial websites, and creative portfolios.

16. Scrolling Text Move Play Scroll Animation

Scroll-controlled text animation lets text move, play, pause, or reverse based on the visitor’s scrolling direction and position. It gives designers precise control over typography movement and works particularly well for websites where messaging and visual storytelling need to work together.

Best use cases: Creative landing pages, portfolio websites, storytelling sections, brand campaigns, and interactive presentations.

17. Content Slider

Scroll-driven content sliders move images, text, or sections into view as users scroll instead of relying on automatic transitions. They benefit businesses and designers who need to present multiple features, testimonials, products, or stories while giving visitors control over the browsing experience.

Best use cases: Product showcases, testimonials, portfolios, feature comparisons, case studies, and service sections.

18. Scrollable Video

Scrollable video links video playback progress to the user’s scrolling position, allowing visitors to control the video sequence simply by moving through the page. It is especially effective for explaining complex products, processes, or visual stories that are difficult to communicate through static content.

Best use cases: Product demonstrations, cinematic storytelling, tutorials, technology websites, and interactive case studies.

19. Video Box with Mouse Scrolling Effect

Video box mouse-scrolling effects combine scrolling interaction with video movement or playback to create a more immersive visual experience. This approach benefits creative agencies, brands, and product-focused websites that want to turn video content into an interactive design element rather than a passive media block.

Best use cases: Product demos, cinematic hero sections, creative portfolios, campaign websites, and interactive presentations.

20. Portfolio Scrolling Widget

Portfolio scrolling widgets reveal projects dynamically as visitors move through a page, using effects such as fading, sliding, scaling, or changing project layouts. They are particularly valuable for designers, photographers, agencies, and freelancers who need to showcase multiple projects while keeping the browsing experience visually engaging.

Best use cases: Design portfolios, agency websites, photography portfolios, creative studios, case studies, and personal websites.

Best ScrollTrigger Examples by Use Case

Different ScrollTrigger effects work better for different website goals. Choosing the right animation for your use case helps create engaging experiences without adding unnecessary complexity or distracting users from the main content.

Common GSAP ScrollTrigger Problems

GSAP ScrollTrigger is powerful, but scroll-based animations can sometimes behave unexpectedly because they depend on element positions, page layout, viewport size, and the order in which ScrollTriggers are created.

Here are some of the most common ScrollTrigger problems and practical ways to fix them.

ScrollTrigger Animation Not Working

If a ScrollTrigger animation does not run, the first things to check are whether GSAP and ScrollTrigger are loaded correctly and whether the plugin has been registered.

A missing gsap.registerPlugin(ScrollTrigger) or an incorrect selector can prevent the animation from working as expected.

Fix: Make sure both GSAP and ScrollTrigger are loaded and registered before creating your animation:

					gsap.registerPlugin(ScrollTrigger);

gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    markers: true
  }
});
				

Using markers: true during development can also help you see exactly where the ScrollTrigger starts and ends.

Pinning Causes Layout Issues

Pinning can sometimes cause elements to jump, overlap, or create unexpected spacing. This is often related to the surrounding layout, an ancestor with transform or will-change, flexbox positioning, or animating the pinned element itself.

Fix: Avoid applying transform or will-change: transform to ancestors of the pinned element, and avoid animating the element that is being pinned.

					gsap.to(".content", {
  y: 100,
  scrollTrigger: {
    trigger: ".section",
    pin: true,
    start: "top top",
    end: "+=500"
  }
});
				

Also remember that ScrollTrigger normally adds spacing around pinned elements so that the rest of the page does not collapse underneath them.

Horizontal Scroll Doesn’t Work

Horizontal scrolling often fails when the animation, container width, or ScrollTrigger configuration does not match the intended layout.

If the horizontal movement is created by a GSAP animation rather than native horizontal scrolling, ScrollTrigger may also need containerAnimation to correctly track elements inside the moving container.

Fix: For a horizontally moving container controlled by vertical scrolling, use a linear animation with ease: "none" and connect nested ScrollTriggers to it with containerAnimation.

					const horizontalTween = gsap.to(".panel", {
  xPercent: -300,
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal",
    pin: true,
    scrub: 1,
    end: "+=3000"
  }
});
				

For ScrollTriggers inside that horizontally animated section, use containerAnimation: horizontalTween. GSAP notes that containerAnimation is specifically designed for this type of setup and has limitations, including no pinning or snapping on those nested triggers.

Animation Is Laggy

Laggy ScrollTrigger animations are usually caused by expensive animations, large images or videos, too many animated elements, or excessive work being performed during scrolling.

Fix: Prefer animating GPU-friendly properties such as transform and opacity, optimize large images and videos, and avoid unnecessarily animating many DOM elements at once.

ScrollTrigger Doesn’t Refresh After Resize

ScrollTrigger normally recalculates its positions when the window or scroller is resized, but dynamic changes to the page can sometimes leave measurements out of date.

This can happen when content is loaded, expanded, resized, or otherwise changes the document layout after the ScrollTrigger positions were calculated.

Fix: Call ScrollTrigger.refresh() after the layout has changed:

					ScrollTrigger.refresh();
				

GSAP recommends refresh() when changes to the DOM affect the start or end positions of ScrollTriggers.

Animation Works on Desktop but Not on Mobile

An animation that looks good on desktop may become too large, too fast, or visually confusing on smaller screens. Differences in viewport dimensions, touch scrolling, available space, and page layout can change how a ScrollTrigger behaves.

Fix: Create responsive ScrollTrigger configurations using GSAP’s responsive media-query tools and simplify complex effects where necessary.

For example, you can use different animation values or disable a heavy animation on smaller screens rather than forcing the desktop animation onto every device.

					ScrollTrigger.matchMedia({
  "(min-width: 768px)": function () {
    gsap.to(".box", {
      x: 500,
      scrollTrigger: {
        trigger: ".box",
        scrub: true
      }
    });
  }
});
				

For new implementations, follow the current GSAP documentation for responsive context management rather than relying on deprecated APIs.

ScrollTrigger Starts at the Wrong Position

When an animation starts too early or too late, the problem is usually related to the start or end values, changing page layout, pinned sections, or the order in which ScrollTriggers are created.

Fix: Use markers: true to visualize the trigger positions and adjust the start and end values:

					scrollTrigger: {
  trigger: ".section",
  start: "top 80%",
  end: "bottom 20%",
  markers: true
}
				

If another element higher on the page is pinned, create your ScrollTriggers in the order they occur on the page or call ScrollTrigger.refresh() after creating them. GSAP specifically recommends creating ScrollTriggers in top-to-bottom or left-to-right order because earlier pins can affect the positions of triggers farther down the page.

Multiple ScrollTriggers Conflict

Multiple ScrollTriggers can interfere with each other when several animations target the same element, overlap at the same scroll position, or are created with inconsistent trigger ranges.

This can cause animations to jump, reverse unexpectedly, or compete for control of the same properties.

Fix: Avoid attaching multiple independent animations to the same properties of the same element unless the interaction is intentional.

For related animations, consider combining them into a single GSAP timeline or organizing them into clearly defined ScrollTrigger groups; GSAP also provides preventOverlaps when you need one ScrollTrigger to force preceding ScrollTrigger animations to their end state.

					gsap.to(".box", {
  x: 300,
  scrollTrigger: {
    trigger: ".box",
    start: "top 80%",
    end: "bottom 20%",
    preventOverlaps: true
  }
});
				

If several ScrollTriggers depend on one another, keeping them organized in the same timeline can also make their timing and behavior easier to manage.

Wrap Up

GSAP ScrollTrigger has completely transformed the way developers approach scroll-based animations. Instead of relying on basic fade-ins or simple transitions, you can now build immersive, story-driven experiences that respond directly to user interaction.

The examples shared in this article highlight how creative scrolling techniques can elevate modern web design and improve user engagement. Experimenting with these ideas can help you craft visually compelling, smooth, and memorable digital experiences that truly stand out.

FAQs