Skip to content

feat: useScrollTrigger, useTransform, useEffectEvent#11

Open
clementroche wants to merge 10 commits intomainfrom
feat/use-scroll-trigger
Open

feat: useScrollTrigger, useTransform, useEffectEvent#11
clementroche wants to merge 10 commits intomainfrom
feat/use-scroll-trigger

Conversation

@clementroche
Copy link
Member

Summary

  • useScrollTrigger — High-performance scroll progress tracking with GSAP ScrollTrigger-like position syntax. Zero per-frame DOM reads, zero React re-renders. Full control over scroll-driven effects for scrollytelling.
  • useTransform / TransformProvider — Context-based transform accumulation so child scroll triggers stay accurate when parents are translated programmatically (parallax).
  • useEffectEvent — Polyfill for React's experimental useEffectEvent (stable callback ref for React 17+).
  • Dedicated /scroll-trigger playground with 9 interactive demos: basic progress, direction, enter/leave events, position combinations, steps, offset, disabled toggle, CSS custom properties, and TransformProvider.
  • Build migration from pnpm+tsup to bun+tsdown.

useScrollTrigger features

  • Position syntax: "element-position viewport-position" (top, center, bottom, or pixel values)
  • Callbacks: onEnter, onLeave, onProgress with progress, direction, isActive, height, steps
  • External rect support: share a single useRect across multiple triggers on the same element
  • Lenis integration: automatic, with native scroll fallback
  • Infinite scroll support via modulo
  • TransformProvider compensation for parallax offsets

Test plan

  • Run bun run build — verify clean build
  • Run bun dev — verify playground loads at /scroll-trigger
  • Scroll through all 9 demo sections
  • Verify direction indicator updates in Basic Progress
  • Verify enter/leave event log shows correct direction arrows
  • Verify TransformProvider demo shows parallax compensation
  • Test with Lenis provider wrapping the app

High-performance scroll-triggered progress tracking with GSAP ScrollTrigger-like
position syntax. Designed for scrollytelling with full control over effects.

- useScrollTrigger: scroll progress (0-1), direction, enter/leave callbacks,
  steps for staggered animations, offset, disabled toggle, external rect support,
  Lenis integration, TransformProvider compensation, infinite scroll support
- useTransform/TransformProvider: context-based transform accumulation for
  accurate scroll triggers on parallax-translated elements
- useEffectEvent: stable callback ref polyfill for React <19
- Dedicated /scroll-trigger playground with 9 interactive demos
- Migrated build from pnpm+tsup to bun+tsdown
…gger entry

- Add debug option to useScrollTrigger that registers triggers to a global store
- Add Minimap component for visualizing scroll trigger zones
- Export useScrollTrigger and Minimap from hamo/scroll-trigger
- Add userData to useTransform for passing arbitrary data through the transform hierarchy
- Add setUserData to TransformRef and TransformProvider
…/debugger)

Ensures importing useScrollTrigger doesn't bundle the Debugger UI.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant