MotionPathHelper.editPath
MotionPathHelper.editPath( path:Element | String, config:Object ) : PathEditor
Makes an SVG <path> editable in the browser.
Parameters
path: Element | String
The <path> element to be edited. This can be a reference to the element or selector text.
config: Object
An optional configuration object for defining things like onPress, onRelease, handleSize, selected, draggable, etc.
Returns : PathEditor
A PathEditor object
Details
Makes an SVG <path> editable in the browser.
Simple example
MotionPathHelper.editPath("#my-path");
Advanced example
MotionPathHelper.editPath("#my-path", {
handleSize: 7,
selected: true,
draggable: true,
onPress: () => console.log("pressed"),
onRelease: () => console.log("released"),
onUpdate: () => console.log("updated"),
onDeleteAnchor: () => console.log("deleted anchor"),
});
Demo
<svg id="motionPath" viewBox="-20 0 557 190">
<path id="path" fill="none" d="M8,102 C15,83 58,25 131,24 206,24 233,63 259,91 292,125 328,155 377,155 464,155 497,97 504,74"/>
</svg>body {
display: flex;
align-items: center;
justify-content:center;
height: 100vh;
}
#motionPath {
overflow: visible;
height: 100%;
max-width: 100%;
}
#motionPath path {
stroke-width: 2;
stroke: gray;
}
#motionPath .astronaut {
visibility: hidden;
}gsap.registerPlugin(MotionPathPlugin);
MotionPathHelper.editPath("#path", {
selected: true,
draggable: true,
handleSize: 7,
onPress: () => console.log("pressed"),
onRelease: () => {
console.log("released")
// get the new path data
console.log(this.path.getAttribute('d'))
},
onUpdate: () => console.log("updated"),
onDeleteAnchor: () => console.log("deleted anchor")
});Configuration
You can optionally pass in a vars parameter to further configure the path editor. It's an object and can include any of the following properties:
| Property | Description |
|---|---|
| draggable | Boolean - determines if the path should be selected initially. |
| handleSize | Number - The radius of the anchor points/handles |
| onDeleteAnchor | Function - A callback function that should be called when an anchor point is deleted. |
| onPress | Function - A callback function that should be called when an anchor or the path is pressed (mousedown/pointerdown/touchstart) |
| onRelease | Function - A callback function that should be called when the mouse/pointer is released (mouseup/pointerup/touchend/touchcancel) |
| onUpdate | Function - A callback function that should be called when the path is updated in any way |
| selected | Boolean - Whether or not the path will be selected initially. |
tip
Editing tips
- Add point: ALT-Click somewhere on the path
- Toggle smooth/corner anchor: ALT-Click the anchor
- Get handle from corner anchor: ALT-Drag
- Select multiple anchors: SHIFT-Click (and again to deselect)
- Delete anchor: select it, then press DELETE key.
- Undo: CTRL-Z
- Click and drag on handles to change how the path curves.
- Drag entire path: Click and drag on a part of the path that doesn't have an anchor