Skip to content

ROADMAP.md

Latest commit

 

History

History
41 lines (23 loc) · 2.97 KB

ROADMAP.md

File metadata and controls

41 lines (23 loc) · 2.97 KB

Roadmap

Ideas and future directions for ScrollMagic v3. Nothing here is committed, just a notepad for enhancements.

Documentation & Demo Pages

API docs and interactive demos for v3. (Highest priority)

API Gaps

Plugin candidates

  • toggleClass — auto add/remove CSS class on enter/leave. The most common scroll use case — nearly every library has it. Usage-specific, so better as a bundled plugin than core API.
  • CSS variable output — expose --progress, --visible etc. as CSS custom properties on elements. Enables pure-CSS scroll effects with zero JS callbacks.
  • Batch coordination — when N elements enter the viewport in the same frame, fire one coordinated callback with stagger support. Essential for grid/list reveals.
  • Web Animation API bridge — drive element.animate() keyframes from ScrollMagic progress. Use native ScrollTimeline when available (compositor-thread performance for transform/opacity/filter) and fall back to SM-driven progress updates when not. Gives SM users native animation performance without leaving SM's event/callback model.

Plugin Ideas

Auto-refresh (MutationObserver + PositionObserver)

An opt-in plugin that automatically calls refresh() when layout-affecting changes are detected on the tracked element. Two complementary approaches:

  • MutationObserver — watches style and class attribute changes on the element. Catches inline style modifications (element.style.margin = '...') and class toggles. Limitation: high false-positive rate (fires on non-layout changes like color), can't detect stylesheet rule changes or media query transitions.
  • Userland PositionObserver (e.g. Shopify/position-observer) — IntersectionObserver-based, detects actual position shifts without polling. Limitation: ~1px precision, only works while the element intersects the root.

Neither covers all cases, but together they could reduce the need for manual refresh() in common scenarios (framework re-renders, third-party widgets, CMS-injected content). Should be off by default due to overhead.

Debug indicators

Visual debugging overlay similar to ScrollMagic v2's addIndicators plugin. Shows trigger positions, element start/end markers, and current progress. Helps developers see what ScrollMagic is calculating without console logging.

Pin

Element pinning during scroll progress — the v2 setPin equivalent. CSS position: sticky covers the basic "pin while in viewport" case well, but doesn't handle unpin-and-repin scenarios (pin an element, release it at a specific scroll position, then re-pin it later). A plugin could fill that gap while recommending sticky for simple cases.

Framework Integrations

React

React wrapper/hooks for ScrollMagic. Reference implementation: sm-test-react. Should handle lifecycle cleanup (destroy on unmount), re-render-safe refs, and ideally provide a useScrollMagic hook.