webflow-interactivity-systems

What problem does it solve?

Webflow interactivity often becomes performance-heavy and unreliable when you need accurate viewport detection, scroll progress tracking, and global frame/resize coordination.

Core Features & Use Cases

• Viewport Detection (onView): Trigger enter/leave behavior with configurable thresholds and direction-aware callbacks for elements that should animate only when visible.
• Scroll Progress Mapping (onTrack): Convert scroll position relative to an element into a value range for driving CSS variables, progress bars, parallax, or timeline states.
• Global Subscription Services (Raf, Resize): Run smooth frame-based updates and responsive resize logic with unsubscribe-based cleanup.
• Priority & Performance Guidance: Use priority-based ordering and enable expensive work only while elements are in view, with explicit cleanup on destruction.
• Use Case: Implement scroll-driven animations (e.g., progress indicators, section reveals, sticky effects) and ensure observers/subscriptions are started and stopped efficiently as pages transition.

Quick Start

Use the webflow-interactivity-systems skill to wire onView and onTrack to your Webflow components, then connect Raf and Resize subscriptions with proper priority and cleanup.