Animated Bar Chart

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/animated-bar-chart" effect-version="1" props='{&quot;parameters&quot;:{&quot;title&quot;:&quot;Animated Bar Chart&quot;,&quot;description&quot;:&quot;A compact data card with deterministic bar growth and value callouts.&quot;,&quot;value&quot;:&quot;+42%&quot;,&quot;accent&quot;:&quot;#111827&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/animated-bar-chart",
  "version": "1",
  "parameters": {
    "title": "Animated Bar Chart",
    "description": "A compact data card with deterministic bar growth and value callouts.",
    "value": "+42%",
    "accent": "#111827"
  },
  "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