Arc Motion Path

Use this effect

VideoML XML

Save this example as example.videoml.xml. Run vml pipeline example.videoml.xml with a VideoML installation that supports frame effects.

<vml id="catalog-example" width="1280" height="720" fps="30" duration="4s">
  <voiceover seed="0"/>
  <scene id="example" start="0s" duration="4s">
    <frame-effect id="effect" effect-id="videoml/arc-motion-path" effect-version="1" props='{&quot;parameters&quot;:{&quot;title&quot;:&quot;Arc Motion Path&quot;,&quot;firstLabel&quot;:&quot;Plan&quot;,&quot;secondLabel&quot;:&quot;Render&quot;,&quot;accent&quot;:&quot;#18181b&quot;}}' start="0s" duration="4s"/>
  </scene>
</vml>

TypeScript

Requires the frozen stdlib package, a page element with id="effect-root", and the referenced local assets. Revoke any generated object URLs when the host disposes the effect.

import { createEffectRegistry, mountEffect } from '@videoml/stdlib/effects';
import { registerCatalogC001 } from '@videoml/stdlib/effects/catalog-c001';

const root = document.querySelector<HTMLElement>('#effect-root');
if (!root) throw new Error('Missing #effect-root');
const assets: Record<string, string> = {};
const registry = createEffectRegistry();
registerCatalogC001(registry);
const effect = mountEffect(root, registry, {
  "id": "videoml/arc-motion-path",
  "version": "1",
  "parameters": {
    "title": "Arc Motion Path",
    "firstLabel": "Plan",
    "secondLabel": "Render",
    "accent": "#18181b"
  },
  "startFrame": 0,
  "endFrame": 120
}, { width: 1280, height: 720, fps: 30, seed: 0, assets });
await effect.seek(0);
// Call await effect.dispose() and revoke asset URLs when finished.

Upstream Apache-2.0 license · GSAP license