GSAP Scroll Text Highlight with Image Pills
Overview
A pinned editorial statement that lights up word by word as you scroll, with hand-painted marker highlights and real inline photography.
A pinned, responsive statement reveals itself word by word. Marker strokes and inline photo pills join the same scrubbed timeline, so everything follows the visitor's scroll instead of rushing ahead.
Details
- Category
- Text
- Interaction
- On Scroll
- Trigger
- On Scroll
- Languages
- React, TypeScript, Tailwind
(01)Keep exploring
All 118 componentsBuilt with the same techniques
No. 031 / Scroll
GSAP Scroll Service Shutters with Sticky Panels
On Scroll · On Click
No. 028 / Gallery
GSAP Horizontal Scroll Gallery with Lenis and Fullscreen Project View
On Scroll · Mouse Move · On Hover · On Click
No. 018 / Scroll
GSAP WebGL Knockout Dive & Aperture Scroll Section
On Scroll · On Load · Mouse Move · On Hover
(02)FAQ
GSAP Scroll Text Highlight with Image Pills — FAQ
01Does it create its own Lenis instance?
No. It works with native scrolling or your existing page-level Lenis setup. Do not mount a second smooth-scroll provider when your app already has one.
02Can I replace the photos?
Yes. Pass your own photo URLs with the images prop. The small inline photos are decorative and use CSS backgrounds, so you do not need to configure a Next.js image host.
03What happens with reduced motion enabled?
The pin and scroll animation are skipped. The text, highlights, photos and progress indicator are shown in their finished state.