Advanced Features
Transforms & Anchor Points
The anchor-point transform model — position, rotation, scale, coordinate system, and creative techniques.
Anchor-point transform model
MotionKit uses an anchor-point-based transform system similar to After Effects. All transforms — position, rotation, scale — animate relative to a user-defined anchor point on each layer.
The anchor point “pins” the layer to a specific location. When you rotate, the layer spins around the anchor. When you scale, the layer grows/shrinks from the anchor. When you move, the anchor itself moves.
Default anchor position
By default, the anchor point is at the center of each layer (0, 0 in MotionKit's relative coordinate system, which ranges from −0.5 to +0.5). Top-left is (−0.5, −0.5), bottom-right is (+0.5, +0.5).
Moving the anchor point
- Select a layer in the timeline.
- Click the Anchor Point icon in the toolbar.
- A draggable anchor indicator appears on the Figma canvas. Drag it to reposition.
- Alternatively, enter exact relative coordinates in the anchor point dialog.
- Click Reset to return to center (0, 0).
Coordinate system
Figma uses a system where node.x / node.y represents the top-left corner of the bounding box after rotation. This creates complex interactions when animating rotation and position simultaneously.
MotionKit handles this automatically with coordinate conversion functions:
- nodeToAnchorWorld — converts Figma's top-left position to anchor world position (the point on the node that the anchor represents), accounting for rotation.
- anchorWorldToNode — reverses the conversion, applying the anchor offset and rotation to compute the Figma node position.
You don't need to think about this — MotionKit handles the math. Just move your elements and the keyframes record the correct anchor-relative values.
Transform properties
| Property | How it works |
|---|---|
| Position X / Y | The anchor point's position in world (canvas) coordinates. Moving a layer moves its anchor point. |
| Rotation | Degrees of rotation around the anchor point. Uses shortest-path interpolation (always takes the shortest rotation direction, wrapping at ±180°). |
| Scale Width / Height | Scaling relative to the baseline dimensions, centered on the anchor. A scale of 2× means the layer is twice its original size. Negative values flip the layer. |
Center-pivot transform matrix
Internally, MotionKit computes each frame by building a transform matrix:
- Translate to the pivot point (anchor position).
- Apply scale (with optional flip via negative values).
- Apply rotation.
- Translate back from the pivot.
Creative anchor techniques
- Door hinge — move the anchor to the left edge for a door-opening rotation effect.
- Pendulum — move the anchor above the shape for a swinging pendulum motion.
- Orbit — move the anchor far outside the shape. Rotating makes the shape orbit around that external point.
- Scale from corner — place the anchor at a corner. Scaling grows the shape from that corner instead of the center.
Changing anchor after keyframes
If you change the anchor point after keyframes already exist, MotionKit automatically adjusts existing keyframes to maintain the same visual position. The layer stays where it is on screen — only the mathematical reference point changes.