Simple Composition

> ## Documentation Index > Fetch the complete documentation index at: https://mintlify.com/BintzGavin/helios/llms.txt > Use this file to discover all available pages before exploring further. # Basic animation > Learn how to create a simple DOM-based animation with Helios using CSS keyframes This example demonstrates the simplest way to get started with Helios using standard CSS animations. No framework required - just vanilla JavaScript, HTML, and CSS. ## Overview The basic animation example shows how to: * Initialize the Helios engine * Use CSS keyframes for animations * Sync animations with the document timeline * Create a composition ready for rendering ## Setup Start with a basic HTML file containing an element to animate: ```html theme={null} Simple Composition

``` Define your animation using standard CSS keyframes: ```css theme={null} body { margin: 0; overflow: hidden; background-color: #eee; } .animated-box { width: 150px; height: 150px; background-color: #007bff; position: absolute; top: 50%; left: 50%; /* Initial state */ transform: translate(-50%, -50%) scale(0.5); opacity: 0; /* Use standard CSS animation */ animation: moveAndScale 5s linear forwards; } @keyframes moveAndScale { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 50% { opacity: 1; } 100% { opacity: 1; transform: translate(calc(-50% + 50vw - 100%), -50%) scale(1); } } ``` Set up the Helios engine with `autoSyncAnimations` enabled to automatically control CSS animations: ```typescript theme={null} import { Helios } from '@helios-project/core'; import './style.css'; // Initialize Helios engine const helios = new Helios({ duration: 5, fps: 30, autoSyncAnimations: true }); // Expose for the Player and debugging (window as any).helios = helios; // Enable external control (e.g. from Renderer) helios.bindToDocumentTimeline(); ``` ## How it works ### Auto sync animations By setting `autoSyncAnimations: true`, Helios automatically hijacks all CSS animations on the page and synchronizes them with the video timeline. This means: * CSS animations pause, play, and seek in sync with the video * Frame-perfect rendering is guaranteed * No manual animation control needed ### Document timeline binding The `bindToDocumentTimeline()` method connects Helios to the browser's document timeline, allowing external tools like the Helios Renderer to drive the animation playback. ## Key concepts * **Duration**: Total length of your composition in seconds * **FPS**: Frames per second for rendering (typically 30 or 60) * **autoSyncAnimations**: Automatically sync CSS animations with Helios timeline * **bindToDocumentTimeline**: Enable external control for rendering ## Complete example View the complete source code in the [simple-animation](https://github.com/helios-project/helios/tree/main/examples/simple-animation) directory. ## Next steps * Try [canvas-based animations](/examples/canvas-animation) for more complex graphics * Explore [CSS animations with React](/examples/css-animations) for component-based workflows * Learn about [animation helpers](/features/animation-helpers) for advanced sequencing