animejs-svg-motion

name	animejs-svg-motion
description	Implement Anime.js SVG morphing, line-drawing, and motion-path animation using morphTo(), createDrawable(), and createMotionPath().

Use this skill when the task is specifically SVG-centric.

Official primitives

• svg.morphTo(target, precision)
• svg.createDrawable(target)
• svg.createMotionPath(path, offset)

Choose the right SVG technique

• morphTo → shape-to-shape morphing (path d, polyline/polygon points)
• createDrawable → line draw / reveal using the synthetic draw property
• createMotionPath → move an element along a path with translateX, translateY, rotate

Important official caveat

Animating drawable SVG with vector-effect: non-scaling-stroke can be slow because scale factor recalculation may happen every tick.

Output format

• SVG motion type
• Why this primitive fits
• Target/path setup
• Precision / offset choices
• Code
• Performance and cleanup notes

Guidance

• Use morphing only when the shape relationship feels intentional.
• Keep precision moderate unless visual fidelity clearly demands more points.
• For motion-path animation, confirm whether auto-rotation is desirable before applying path-based rotation blindly.
• For line drawing, define whether the reveal should be full-path, segment-based, or looping.
• Prefer transform-driven SVG motion when path morphing is unnecessary.

Anti-patterns

• morphing unrelated shapes just for novelty
• over-precise morphing without a visual payoff
• path-follow rotation that makes logos/icons unreadable
• expensive line-draw effects with no product meaning
• ignoring the non-scaling-stroke perf caveat

Reference official SVG notes in ../animejs-core-api/references/official-docs-map.md.