Shape tweening is the easiest feature in Animate to lose control of. Two shapes that look similar produce intermediate frames that fold over, self-intersect, tear into pieces and then inexplicably knit back together. Adding a few shape hints sometimes helps and sometimes makes it worse. Using it reliably requires knowing what the tweener actually computes on those middle frames — and it is not “the shape”. It is a correspondence between vertices, and that correspondence is inherently ambiguous.
A shape tween interpolates contours, not objects
A motion tween acts on one object: a symbol instance whose transform matrix and colour effect are interpolated. The object is the same thing from start to finish, so the question of what corresponds to what never arises.
A shape tween is different. It acts on raw, ungrouped vector art — fills and strokes. The first keyframe holds one set of contours, the last holds another, and the two sets can differ in vertex count, in ordering, and in how many separate contours exist at all. The tweener has to decide which point on the starting contour becomes which point on the ending contour. There is no uniquely correct answer to that question.
This is also why dropping a symbol or a group into a shape tween fails: neither is raw vector art. Animate requires Break Apart first, so that the tweener has contours to match.
Where the ambiguity comes from
Take the starting contour as a closed polygon resampled to N points, A = [a_0, a_1, ..., a_{N-1}], and the ending contour resampled to the same N points, B = [b_0, b_1, ..., b_{N-1}]. An intermediate frame is then just linear interpolation:
p_i(t) = (1 - t) · a_i + t · b_{(i + k) mod N}
Everything hinges on k, the start offset. A closed contour has no objective “first point”, so rotating B’s starting index by one produces entirely different intermediate frames. With N points there are N candidate correspondences, and traversal direction — clockwise or counter-clockwise — doubles that to 2N.
The tweener picks whichever costs least. The usual cost function is the sum of squared distances between corresponding points:
cost(k) = Σ_i ‖ a_i - b_{(i + k) mod N} ‖²
choose k* = argmin_k cost(k)
That heuristic is accurate when the two shapes are in roughly the same pose. Once they differ substantially, or once several near-equivalent minima exist, it can select a correspondence that is geometrically valid and visually absurd — and the intermediate frames start folding. What people call an “explosion” is fundamentally the wrong k being chosen, or worse, a topology mismatch producing a jump.
Topology changes cannot be fixed by interpolation
A second class of failure has nothing to do with k: one closed contour on the first keyframe, two on the last. Or a solid shape at the start and a shape with a hole at the end — that is two contours, outer plus inner.
Linear interpolation cannot express “one contour splits into two”. The tweener can only improvise: collapse a stretch of contour to zero length, or force-pair two shapes. The visible result is threads and spikes on the middle frames, or a section that suddenly grows out of the wrong place.
The diagnostic is simple. Count the independent closed contours, holes included, on each keyframe. If the counts differ, do not expect one shape tween to handle it. Split it into several tweens with an intermediate shape between them, keeping the contour count constant within each segment.
Shape hints are constraints on k
A shape hint replaces the automatically chosen correspondence with a manually specified one. Placing hint a tells the tweener: this point on the starting contour must map to that point on the ending contour. It narrows the search space from 2N candidates to the subset satisfying the constraints.
Several usage rules follow directly from that, and none of them are folklore — they are consequences of constraint solving:
- Hints must be paired and snapped to the contour. An unsnapped hint imposes no constraint and does nothing. Animate signals acceptance by colour, typically yellow on the first keyframe and green on the last, though the exact palette varies by version.
- The order must match. Hints must appear in the same cyclic order around both contours. If the start reads a→b→c clockwise while the end reads a→c→b, the constraints contradict each other and the result is usually worse than adding no hints at all.
- Start with a few, spread evenly. Three or four evenly distributed hints beat a dozen clustered in one place, because the cluster constrains only a short arc while the rest of the contour remains free to fold.
- Hints cannot solve topology. When the contour counts differ, no number of hints helps, since a constraint presupposes that a corresponding point exists on both sides.
The same problem under a different name in modern tooling
SVG path animation runs into identical mathematics. Path interpolation in CSS and SMIL requires the start and end paths to have exactly the same command count and command types: M L L Z can only tween to M L L Z, never to M L L L Z. Browsers do not search for a correspondence; they simply refuse.
Morphing libraries such as flubber make Animate’s internal pipeline explicit:
1. Resample both paths to the same point count N (uniform along arc length)
2. Sweep the start offset k and evaluate cost(k)
3. Take the argmin, and try the reversed traversal as well
4. Emit two paths with equal point counts and aligned starting points
5. Interpolate point by point
When topology differs, these libraries do what splitting a tween does: break one path into several, or insert degenerate zero-length segments to manufacture the missing contour. Shape hints and modern path-morphing libraries are solving the same correspondence problem — one through human annotation, the other through resampling and search.
That equivalence has a practical payoff. If a morph refuses to stabilise in Animate no matter how you tune it, exporting it as an SVG path animation will usually not stabilise either, because the difficulty lives in the ambiguity between the two shapes, not in the tool.
When to switch to mesh deformation
Shape tweening suits cases where the contour itself genuinely changes: a droplet separating, smoke dispersing, one icon becoming another. It does not suit cases where the shape is unchanged and merely being pushed around — a cheek squashing, cloth swinging, an arm bending.
Those belong to mesh deformation: bind the artwork to a triangle mesh and animate the vertex positions. The contour topology never changes, so no correspondence ambiguity exists and nothing can explode. Animate’s Bone tool, the FFD found in 2D skeletal runtimes, and liquify or puppet-warp tools in drawing applications all take this route.
A usable test: if you can point at the two shapes and say where a given point travelled to, the topology is consistent and the shape is merely being moved — use mesh deformation. If you cannot say yourself where a particular corner ends up, the tweener certainly cannot, and shape hints would only be guessing on your behalf.
How to verify this
To confirm the claims about k, run a minimal experiment: draw a square and tween it to an identical square rotated 45 degrees. Because a square has four-fold symmetry, cost(k) has several near-equal minima, and you will find the chosen correspondence is not stable across versions or vertex counts — sometimes it rotates the short way, sometimes it flips entirely.
Then place a pair of shape hints at each of the four corners to pin the correspondence, and the intermediate frames immediately become a clean rotation. The experiment takes about a minute and demonstrates both the source of the ambiguity and the mechanism by which hints remove it.