The Scroll Snapping Controller component is a “section scroll snap” controller that listens to wheel/trackpad scrolling (and some keyboard keys) and moves the page to specific sections you define.
• Enabled
Turns the whole controller on/off. When off, it won’t intercept wheel or keyboard events, and it won’t snap.
• Section Names
The ordered list of section “names” you want to snap between (e.g. Hero, Features, Pricing). Each name is used to find a real DOM element on the page (using Match and/or Extra Selector). The component then dedupes matches and sorts the found elements by their actual Y position (top-to-bottom) before using them for snapping.
• Excluded Sections
Excluded Sections is a list of section names that are still detected and used for “where you are on the page” (active section), but they’re treated like “normal scrolling zones” instead of snap targets: while you’re inside an excluded section, wheel/keyboard input is not converted into a snap and you can scroll through its content normally (optionally with the same custom smoothing path), and snapping only resumes once you reach the excluded section’s edge and continue scrolling into a non-excluded section; also, the component avoids snapping over an excluded section in a single step (so it won’t jump past it).
• Match
Chooses how each entry in Section Names is resolved into an element:
-Framer Name: looks for the first element matching [data-framer-name=”Name”] (exact match).
-ID: looks for the first element matching #Name (exact id match).
-Either: tries Framer Name and ID (and will dedupe if both point to the same element). It uses safer escaping so names can include spaces/special characters without breaking selectors.
*Section names with quotes/backslashes can break the selector.
• Extra Selector
Optional CSS selector “escape hatch” to find a better snap target. Use $name as a placeholder. Example: [data-framer-name=”$name”] .anchor For each section name, it replaces $name with an escaped version of the name and does querySelector(...). If it finds an element, it’s included (and deduped if it’s the same element already found via Match). Tip: you can use comma-separated selector lists to support multiple patterns in one field.
• Behavior
-Smooth: snapping uses smooth scrolling (and can use the custom smoother if enabled below).
-Instant: snapping jumps immediately (scroll behavior “auto”).
• Custom Smooth (only when Behavior = Smooth)
-On: uses the component’s custom requestAnimationFrame-based animation for snaps, and also enables the custom smoothing path for tall-section wheel scrolling.
-Off: uses native scrolling behavior for snaps (window.scrollTo with behavior “smooth”) and does not do tall-section wheel smoothing.
• Smooth Factor (only when Custom Smooth is on)
-Overall “time scaling” for the custom snap animation and the tall-section smoothing response. Higher = longer/slower feel; lower = tighter/faster.
-Accel (only when Custom Smooth is on) Controls how quickly the custom animation ramps up at the start (ease-in power). Higher = more gradual start.
-Decel (only when Custom Smooth is on) Controls how slowly the custom animation settles at the end (ease-out power). Higher = longer tail / more glide at the end.
-Tall Section Scroll Speed (only when Custom Smooth is on) Only applies when the currently active section is taller than the viewport and you’re scrolling within it. It scales the wheel delta used by the tall-section smoothing path. Higher = faster travel per wheel input; lower = slower/more controlled. This does not affect snapping between sections; it only affects within-section scrolling when a section is taller than the viewport.
• Keyboard Support
-On: intercepts ArrowUp/ArrowDown, PageUp/PageDown, Home, End (in Preview) to move between sections.
-Off: does not attach the keydown handler. Notes: Home scrolls to the top of the page. End scrolls to the last section, aligning to bottom.
• Ignore When Typing
-On: if focus is inside an input/textarea/select/contenteditable (or role=”textbox”), the component will not intercept wheel/keyboard. This prevents hijacking scrolling while typing or editing.
-Off: wheel/keyboard interception happens regardless of focus.
• Offset
Adds a pixel offset to every snap target. Useful for sticky headers (often a negative value so the section heading sits below the header).
• Active Threshold
Controls which section is considered “active” (current) when deciding what “next” and “previous” mean. It defines a reference point inside the viewport (in px from top, with direction-aware logic) and picks the section that contains that point (or closest if none contains it). Increasing it can reduce boundary jitter.
• Lock
Cooldown time (ms) after a snap starts. While locked, wheel snaps are prevented to avoid trackpad bursts skipping multiple sections. Also used in burst protection logic (one snap per direction burst).
• Min Wheel
Ignores tiny wheel/trackpad deltas (helps prevent accidental snaps from micro scrolling on trackpads).
• Wheel Axis
-Both: chooses whichever is stronger between deltaY and deltaX (good for trackpads that produce mixed deltas).
-Vertical: only uses deltaY.
• Invert
Flips scroll direction interpretation (useful if your device/app reports deltas in an unexpected direction).
• Debug
-Show/hide the small badge. In Canvas it’s always shown; in Preview it only shows when Debug is on. The badge shows whether snapping is on and how many sections were found.
• Debug Color
Badge background color (only shown when Debug is on).