Help guide

Pin node

Updated June 21, 2026

Product media placeholder

Replace this area with a screenshot or short walkthrough video during the media sweep.

F330/F340 pin engagement state machine. Reads engine handle (from sibling PinAnchorNode) + progress; runs the 3-state lifecycle: BEFORE (progress ≤ 0) = element natural inside spacer; PINNED (0 < progress < 1) = element position:fixed at viewport top; AFTER (progress ≥ 1) = element at bottom of spacer via padding-top. Spacer + handle ownership lives on PinAnchorNode (loader-emitted). Subsumes scrollPin.

Type pinCategory inputsContext sharedDynamic ports noCompound no

Inputs

PortTypeDescription
handleanyPin Handle
progressfloatProgress
rawProgressfloatRaw Progress (unclamped)
topOverridefloatTop Override
leftOverridefloatLeft Override
widthOverridefloatWidth Override

Outputs

PortTypeDescription
isEngagedfloatIs Engaged
rectTopfloatRect Top
rectLeftfloatRect Left
rectWidthfloatRect Width
rectHeightfloatRect Height

Parameters

ParameterTypeDefaultDescription
---No configurable parameters.

Related nodes

Envelope

Use pin as the node type inside a graph node envelope. Add id, optional params, optional connections, and optional activeWhen based on the guide context.

Generated source

Registry faster-motion-docs/node-registry.jsonCategory page /help/faster-motion/faster-motion-node-category-inputs/

Was this guide helpful?

Sunny Arora

Written by

Sunny Arora

Get technical deep dives delivered to your inbox

Join creators and developers who get exclusive insights, tutorials, and behind-the-scenes content every week.

No spam. Unsubscribe anytime.

Continue Exploring

You might also enjoy