SVG Assembly Animator

Core Workflow

1. Analyze SVG structure: Read SVG files, identify the main "hull/body" (usually the first path) and "detail parts" (remaining paths).
2. Prepare HTML template:
   • Use GSAP (TweenMax) as the animation engine.
   • Use JSZip and Canvas to implement pure front-end transparent frame export.
   • Load the built-in asset

     assets/animation_template.html

     as the base.
3. Implement animation logic (refer to

   references/animation_logic.md

   ):
   • Dispersion phase: Use "reverse logic" to randomly throw parts out of the viewport, and apply extreme axial scaling (ScaleX: 0.05, ScaleY: 4) to create a sense of speed.
   • Assembly phase:
     • The main skeleton first appears with the

       elastic.out

       effect.
     • Parts fly in in random

       stagger

       order, accompanied by

       back.out

       overshoot rebound.
     • The whole scene is accompanied by large-angle rotation (180° or 360°) and scaling.
4. Generation and delivery: Generate

   .html

   files, prompt users to preview in the browser and click the export button.

Animation Parameter Recommendations

• Standard assembly:

  duration: 1.2

  ,

  ease: "back.out(2.5)"

  .
• Powerful assembly:

  duration: 0.7

  ,

  ease: "back.out(5)"

  ,

  rotation: -360

  .
• Elegant assembly:

  duration: 1.5

  ,

  ease: "power4.out"

  ,

  stagger: 0.02

  .

Export Instructions

• Export a ZIP package of transparent PNG sequence frames with 1080x1080 resolution and 30fps by default.
• If users need to synthesize videos, the following ffmpeg command is recommended:

  ffmpeg -framerate 30 -i frame_%04d.png -vcodec prores_ks -profile:v 4 -pix_fmt yuva444p10le output.mov

Related Resources

• Animation rules of thumb:

  references/animation_logic.md

• HTML basic template:

  assets/animation_template.html