Skip to main content
This example demonstrates how to use CSS animations with React components in Helios. By enabling autoSyncAnimations, Helios automatically controls all CSS animations on the page, making them frame-perfect and renderable.

​
Overview

The React CSS animation example shows how to:
  • Use standard CSS keyframes with React
  • Enable automatic animation synchronization
  • Create declarative animations without hooks or refs
  • Build reusable animated components

​
Setup

1

Create the HTML structure

Set up a basic HTML file with a root element for React:
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React CSS Animation</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background-color: #111;
    }
    #root {
      width: 100%;
      height: 100%;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script type="module" src="./src/main.tsx"></script>
</body>
</html>
2

Initialize Helios with auto sync

Configure Helios to automatically sync all CSS animations:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './style.css';
import { Helios } from '@helios-project/core';

// Initialize Helios with autoSyncAnimations: true
// This tells Helios to hijack all CSS animations on the page
const helios = new Helios({
  fps: 30,
  duration: 5,
  autoSyncAnimations: true
});

helios.bindToDocumentTimeline();
(window as any).helios = helios;

const rootElement = document.getElementById('root');
if (rootElement) {
  ReactDOM.createRoot(rootElement).render(
    <React.StrictMode>
      <App />
    </React.StrictMode>
  );
}
3

Create your React component

Build a simple component with CSS classes - no refs or hooks needed:
import React from 'react';

export default function App() {
  return (
    <div className="container">
      {/* Standard CSS Animation - no refs, no hooks needed */}
      <div className="box moving-box">
        CSS Power
      </div>
    </div>
  );
}
4

Define CSS keyframe animations

Create your animations using standard CSS:
body { 
  margin: 0; 
  background: #222; 
  overflow: hidden; 
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.box {
  width: 150px;
  height: 150px;
  background: #61dafb;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 1.5rem;
  color: #222;
  border-radius: 12px;
}

@keyframes slideAndRotate {
  0% { 
    transform: translateX(-200px) rotate(0deg); 
    opacity: 0; 
  }
  50% { 
    opacity: 1; 
  }
  100% { 
    transform: translateX(200px) rotate(360deg); 
    opacity: 0.5; 
  }
}

.moving-box {
  animation: slideAndRotate 5s linear forwards;
}

​
How it works

​
Auto sync animations

When you enable autoSyncAnimations: true, Helios:
  1. Intercepts CSS animations: Automatically detects and controls all CSS animations and transitions
  2. Synchronizes timing: Binds animation progress to the Helios timeline
  3. Enables seeking: Allows jumping to any point in the animation
  4. Frame-perfect rendering: Ensures consistent output for video export

​
No hooks required

Unlike imperative animation approaches, CSS animations with Helios are completely declarative: 
// Just add a className - that's it!
<div className="animated-element">
  Content
</div>
No need for:
  • useVideoFrame hook
  • useRef for elements
  • Manual animation calculations
  • Effect hooks for initialization

​
React integration benefits

  • Component-based: Encapsulate animations within components
  • Reusable: Share animated components across projects
  • Props-driven: Control animations with component props
  • SSR compatible: Works with server-side rendering

​
Advanced patterns

​
Conditional animations

Use props to conditionally apply animation classes: 
function AnimatedBox({ animate }: { animate: boolean }) {
  return (
    <div className={`box ${animate ? 'moving-box' : ''}`}>
      Content
    </div>
  );
}

​
Multiple animations

Combine multiple animations on a single element: 
.multi-animated {
  animation: 
    slideIn 2s ease-out,
    fadeIn 1s ease-in,
    rotate 3s linear;
}

​
Animation composition

Sequence animations using delays: 
.sequence-1 {
  animation: appear 1s ease-out;
}

.sequence-2 {
  animation: appear 1s ease-out 1s; /* 1s delay */
}

.sequence-3 {
  animation: appear 1s ease-out 2s; /* 2s delay */
}

​
Key concepts

  • autoSyncAnimations: Helios automatically controls all CSS animations
  • Declarative approach: Use className instead of imperative animation code
  • Zero hooks: No need for useVideoFrame or useRef
  • Standard CSS: Use regular @keyframes and animation properties

​
Performance considerations

  1. GPU acceleration: Use transform and opacity for best performance
  2. Avoid layout triggers: Don’t animate width, height, or position
  3. Will-change: Add will-change for complex animations
  4. Animation count: Limit simultaneous animations for smooth playback
.optimized-animation {
  /* GPU-accelerated properties */
  animation: smoothMove 2s ease-out;
  will-change: transform, opacity;
}

@keyframes smoothMove {
  from { 
    transform: translateX(0);
    opacity: 0;
  }
  to { 
    transform: translateX(100px);
    opacity: 1;
  }
}

​
Complete example

View the complete source code in the react-css-animation directory.

​
Next steps

Build docs developers (and LLMs) love

Get started for freeTalk to us