Best GSAP ScrollTrigger effects for landing pages in 2026, by what they do

ScrollTrigger lets an animation follow the scrollbar, pin a section, or fire when something enters the screen. That makes it easy to add too much. A landing page usually needs only a few jobs done well: show the first screen fast, reveal supporting content, explain one idea with a pinned sequence, and keep navigation clear.

Our library has 91 standalone effects that use ScrollTrigger, plus many more inside full templates. Each effect has a live demo, a difficulty label, a performance label and Playground knobs. The groups below follow the same split we use in the Scroll Library.

This is the biggest group, 26 effects, and the safest place to start. A reveal fades, slides, blurs or flips content in as it enters the screen. Use it for headings, cards and images below the first screen, not for the headline people must read first.

• Word-by-Word Opacity Scrub (intermediate, light): words brighten as you scroll, good for a short statement.
• Blur Reveal (beginner, medium): content sharpens as it arrives.
• Blinds Reveal (intermediate, light): an image opens in strips.
• 3D Flip Reveal (intermediate, light) and Bounce Entrance (beginner, light): playful entrances for cards.

Watch for: do not reveal everything. If every block animates, nothing stands out and a slow phone does more work than it needs to.

A pinned section holds the screen while the scroll drives a timeline: a product rotating, features changing, a video scrubbing. It is the most "award-style" pattern, and the easiest to get wrong, because the section must still work when the viewport changes and on a touch screen.

• Pinned Feature Tabs (intermediate, light): features swap while the section stays put.
• Scroll-scrubbed Video (advanced, medium) and Scroll-scrubbed Image Sequence (advanced, medium): a product turns as you scroll.
• Pinned Horizontal Scroll Gallery (intermediate, light): sideways movement from vertical scroll. Its mobile support is marked degraded, so check it on a phone.
• Zoom-through Hero (advanced, medium) and Filmstrip Scrub (intermediate, light).

Watch for: keep each pinned section short, call ScrollTrigger.refresh() after layout changes, and give people a way to keep scrolling on a phone without feeling trapped.

Parallax moves layers at different speeds. Transforms scale, rotate or move elements with scroll. Both add depth, and both can cause motion discomfort when pushed too far, so keep the distances small.

• Masked Inner Parallax (beginner, light): an image moves inside its frame, a gentle first parallax.
• Parallax Typography Layers (intermediate, light) and Perspective Parallax Scene (advanced, medium).
• Scroll Zoom Image (beginner, light) and Scroll Rotation and Skew (beginner, light, 8 knobs).
• Scatter to Grid Flip and Card Fan Spread: layout changes that explain structure.

• Counters on Enter (beginner, light): numbers count up when they appear, useful for real figures.
• Outline to Fill Text (beginner, light) and Huge Text Crossing (beginner, light).
• Scroll-driven SVG Path Draw (advanced, light): a line draws as you scroll, good for timelines and maps.
• Section Shape Morph (intermediate, light) and Motion Path Follower (advanced, light).

For headline animation specifically, see our text animation examples.

• Hide / Show Header on Scroll (intermediate, light) and Header Style Transition (beginner, light).
• Reading Progress Bar (beginner, light): a simple, honest progress cue.
• Section Background Colour Shift (beginner, light) and Scroll Gradient Shift (intermediate, light).
• Sticky Split-Screen Storytelling (intermediate, light): text on one side, a changing visual on the other.

1. A header that hides on scroll down and returns on scroll up.
2. One reveal style for every content block, so the page feels consistent.
3. One pinned sequence to explain the main idea or product.
4. A counter strip for real figures, if you have them.
5. A section colour shift or a reading progress cue if the page is long.

That is five jobs, and each has a beginner or intermediate effect with a light performance label. If you want it done for you, our restaurant, SaaS and agency collections show whole pages built from these patterns, with measured speed. The GSAP ScrollTrigger examples page lists more.

• A live demo you can scroll, and Playground knobs for the values that matter.
• A reduced-motion fallback, so people who turn animation off still see all the content.
• A difficulty label and a performance label, so you can pick by effort and cost.
• For subscribers, the exact prompt and the source.