# tinyfly > tinyfly is a lightweight, framework-agnostic animation engine with an optional visual editor. Animations are plain JSON (timelines, tracks, keyframes) and play deterministically in browsers, Web Workers and Node. A GSAP-style API (`live.to`, `live.timeline`) drives real DOM and SVG elements. Key facts: - Package: `@algorisys/tinyfly` on npm (`npm install @algorisys/tinyfly`). Entry points: `@algorisys/tinyfly` (engine), `/player`, `/export` (CSS, Lottie, GIF, video exporters), `/adapters` (DOM, Canvas, SVG, WebGL), `/gsap-compat` (GSAP-style API), `/drivers` (scroll, visibility, smooth scroll), `/interaction` (Observer, Draggable), `/teach` (lesson steps and diagram primitives), `/embed` (teaching embeds), `/characters` (poseable stick figure with facial expressions), `/headless` (render scenes to MP4 and PNG stills in Node), `/react`, `/vue`, `/svelte`, `/solid` (framework wrappers), and `/browser` (the GSAP-style runtime plus engine, player, drivers, interaction and the stick figure — no exporters — for script tags). A CLI: `npx @algorisys/tinyfly validate`, `render` and `video`. - Script tag: `https://cdn.jsdelivr.net/gh/algorisys-oss/tinyfly@v{version}/cdn/tinyfly.iife.js` defines a global `tinyfly`, e.g. `tinyfly.to('.box', { x: 200, duration: 1 })`. Replace `{version}` with a release tag. - The GSAP-style `live` API covers `scrollTrigger` (scrub, pin, toggleActions), `splitText` (chars, words, lines, masks), `drawSVG`, `spring`, `morphSVG`, `motionPath`, text/scramble, inertia and Draggable, Flip (including shared elements by `data-flip-id`), plain-object targets and `live.ticker`. - Times in JSON timelines are milliseconds; durations in the GSAP-style API are seconds, as in GSAP. - The GSAP-style API is familiar, not compatible: GSAP code does not run unchanged. `docs/gsap-compat.md` lists every supported option and each difference. - Track kinds: keyframe tracks, spring (`kind: 'spring'`), inertia (`kind: 'inertia'`), motion path (`property: 'motionPath'`) and text (`property: 'text'`). All serialize to JSON; `docs/file-format.md` defines them. - Source: https://github.com/algorisys-oss/tinyfly. License: MIT. ## Start here - [Getting Started](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/getting-started.md): What tinyfly is, making a first animation in the editor, and using it from code, a script tag or the CDN. - [GSAP Compatibility](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/gsap-compat.md): The GSAP-style API (`live.to`, `tf.timeline`): supported vars, motion paths, morphSVG, text, inertia, Draggable, Flip, and where it differs from GSAP. - [Code Examples](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/examples.md): Recipes with the engine API: fades, loops, colour and bezier easing, loading JSON, canvas and SVG rendering, multi-scene sequences, motion paths and script-tag embeds. ## Reference - [API Reference](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/api-reference.md): Every public engine, player and adapter API: Timeline, tracks, keyframes, easing, drivers, serialization and exports. - [File Format](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/file-format.md): The JSON animation format: timelines, every track kind, keyframes, easing and the project file — for generating or consuming animations. ## Editor features - [Editor Guide](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/editor-guide.md): Every panel and feature of the visual editor, from elements and keyframes to text and inertia tracks, preview and export. - [Shape Morphing](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/shape-morph.md): Tweening one path into another, including shapes with different point counts and several subpaths. - [Pen Tool](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/pen-tool.md): Drawing custom paths point by point with straight segments and bezier curves. - [Polygons & Stars](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/polygon-star.md): Parametric polygon and star shapes that stay editable while animating like any path. - [Grid & Snapping](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/grid-and-snapping.md): The grid overlay, snapping to grid, elements and artboard centre, and alignment guides. - [Onion Skinning](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/onion-skinning.md): Ghost frames before and after the playhead for judging arcs and easing. - [Sprite-sheet Export](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/sprite-sheet-export.md): Exporting frames as a PNG grid plus JSON metadata for game engines and canvas players. ## Guides - [Scroll Animation](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/scroll-animation.md): Scroll-driven and play-when-visible animation with ScrollDriver and VisibilityDriver. - [Teaching Animations](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/teaching.md): Step-through explanatory figures: markers, captions in several languages, the teaching player, step controls, one-script declarative embeds, tinyfly/teach diagram primitives, and validate / render for build pipelines. - [Rendering Video from Code](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/video-rendering.md): Rendering a scene to MP4 without a browser: `tinyfly video`, custom canvas targets drawn by code, timing from narration and recorded voice-over, the stick-figure character, SRT/WebVTT captions, stills, porting Cairo scripts, and a benchmark against pycairo. - [Extending tinyfly](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/extending.md): Writing a render adapter, animating any object with live and the ticker, custom and parametric eases, stagger offsets, adding a track kind, and contributing gallery examples. - [Deployment](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/docs/DEPLOYMENT.md): Building and hosting the editor, and serving the player bundles. ## Optional - [README](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/README.md): Feature overview, project layout and development setup. - [Release notes](https://raw.githubusercontent.com/algorisys-oss/tinyfly/main/release-notes/README.md): What changed in each version.