Product media placeholder
Replace this area with a screenshot or short walkthrough video during the media sweep.
Animate a CSS polygon() clip-path on a target element, driven by a 0..1 progress input. Each keyframe carries `values[]` (the polygon point coordinates). Compound: expanded into `clipPath + clipPathWrite` at load time — no runtime class.
Type clipPathAnimationCategory animationContext sharedDynamic ports noCompound yes
Inputs
| Port | Type | Description |
|---|---|---|
progress | float | Progress |
Outputs
| Port | Type | Description |
|---|---|---|
| - | - | No ports declared. |
Parameters
| Parameter | Type | Default | Description |
|---|---|---|---|
selector | elementSelector | "" | Target Selector |
keyframes | clipPathKeyframes | [{"time":0,"values":[50,50,50,50,50,50,50,50]},{"time":1,"values":[0,0,100,0,100,100,0,100]}] | Keyframes |
Related nodes
Envelope
Use clipPathAnimation 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-animation/