Framework overview

Every Ssscript project ships with a Webflow-first JavaScript framework: modules auto-mount from data-module attributes, lifecycle hooks coordinate page transitions, and shared services handle scroll, viewport detection, and animation frames.

Core concepts

Concept	What it does
Module system	One file per feature in src/modules/; mounts on data-module="<name>"
Component lifecycle	onDestroy, onPageIn, onPageOut hooks for transitions and cleanup
Scroll system	Lenis smooth scroll with priority-based subscriptions
Observer & track	Viewport detection (onView) and scroll progress (onTrack)
Subscriptions	Global Raf and Resize services for frame and resize events

Where code lives

src/
├── app.ts              # Entry point
├── modules/            # Your components (data-module)
│   └── _/              # Module system internals
├── lib/                # scroll, subs, gsap, pages
├── styles/
│   ├── app.css         # @import hub only
│   └── mod/            # Webflow-impossible CSS per module
└── webflow/            # Designer detection

Layout, typography, and most styling belong in Webflow Designer. Repo CSS is only for things Webflow cannot express (keyframes, pre-JS hidden states, complex animations). See Building a component for a hands-on walkthrough.

Webflow integration

• Markup and classes are created in Webflow — not as .html files in the repo.
• Modules receive an existing DOM element and query children with data-* attributes.
• The Webflow integration guide covers MCP, site linking, and Designer vs published behavior.

Next steps

• Building a component — step-by-step counter module
• Starters — template layout and dev server
• Deploy & embed — publish and load scripts in Webflow