SVG animation node ✨
Use text descriptions to create logo animations, dynamic titles, stickers or transparent overlay animations, and you can also connect pictures as material. After running, preview it in the node, export it as a transparent video when you are satisfied, and then connect it to subsequent Flows.
Add a SVG animation node and write down the animation requirements. When you need to use a picture, connect the picture to the reference picture input port and use @ to reference the connected picture.
- 01Animation prompt: specify the subject, motion, colors, displayed text and opening and ending. Mention transparency or looping when needed.
- 02Bottom toolbar: choose the aspect ratio, duration and frame rate. Changing the ratio immediately resizes the preview frame; changes to the animation itself take effect on the next run.
- 03Run: generate the first animation. You can see the code during generation and return to the animation preview when it finishes.
Preview the animation, edit its text directly, or enter a new instruction to refine it. Click a version number above the node to return to that version and continue editing.
- 01Playback bar: play, pause or scrub to inspect details. Switching the light or dark preview backdrop only changes the preview; it does not add a background to the exported video.
- 02Text: when editable text is available, click its label to edit it. Press Enter or click elsewhere to update the preview immediately. Reset removes text overrides.
- 03Refine: enter an instruction such as “Make the ring blue and keep everything else the same,” then click Run. Use this to adjust colors, motion and timing.
- 04Version numbers: switch the current animation version. To start again, choose Start over from the Run button's menu. If you know SVG, you can also open Code and apply your changes.
Click Export and wait for rendering and upload to finish. An exported video node appears on the right of the canvas. Further exports add new clips to that video node's version history.
- 01Export: create a WebM video that preserves transparency. Progress has separate rendering and uploading stages. Keep the page open until both finish.
- 02Video node: connect it to a composition or another downstream node. You can also drag from the SVG node's export output first; a video node is inserted automatically. Finish exporting before using the animation.
- 03Re-export: after the source animation changes, the video node indicates an update is needed. Click Re-export in the video node's action bar, or export again from the SVG node.