Pins on images, text and groups

A path bends through its own nodes, but an image, a text or a group has none: pins bend it through a mesh of triangles laid over it, each triangle carrying the piece of artwork inside it. A text stays a text you can edit, and its gradients and filters bend too.

WHAT YOU’LL MAKE

The word sags at its end in 1.5 seconds, bending through its mesh, then holds and starts over. This one is the real exported SVG, playing.

Step by step

1. Pick the Pin tool

   Press W. The Pin tool is in the pins button of the tools on the left.

2. Pin the start of the word

   Click the H. A pin appears there, and the Pin tool draws the mesh over the text; the chip above the canvas says how many triangles it has.

3. Pin its end

   Click the exclamation mark for a second pin.

4. Make the mesh finer

   In the Pins section of the inspector, drag the Mesh slider to the right. The triangles get smaller and more of them cover the text: a denser mesh bends more smoothly, but makes a CSS export larger.

5. Move the playhead to 1.5s

   Drag the red playhead along the time ruler to 1.5s.

6. Bend the word

   Drag the pin on the exclamation mark down. The word bends between the two pins, letter shapes and all, and the pin gets its own track: at rest at 0s, bent at 1.5s.

7. Play it

   Press Space. The word bends until 1.5s, holds until the end of the 3-second animation and starts over.

Keys