CSS animations with React

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

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>

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>
  );
}

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>
  );
}

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:

Intercepts CSS animations: Automatically detects and controls all CSS animations and transitions
Synchronizes timing: Binds animation progress to the Helios timeline
Enables seeking: Allows jumping to any point in the animation
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

GPU acceleration: Use transform and opacity for best performance
Avoid layout triggers: Don’t animate width, height, or position
Will-change: Add will-change for complex animations
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

Try Framer Motion for more powerful React animations

Getting Started

Frameworks

Animation Libraries

Canvas & WebGL

Advanced

CSS animations with React

Overview

Setup

How it works

Auto sync animations

No hooks required

React integration benefits

Advanced patterns

Conditional animations

Multiple animations

Animation composition

Key concepts

Performance considerations

Complete example

Next steps

​Overview

​Setup

​How it works

​Auto sync animations

​No hooks required

​React integration benefits

​Advanced patterns

​Conditional animations

​Multiple animations

​Animation composition

​Key concepts

​Performance considerations

​Complete example

​Next steps

Overview

Setup

How it works

Auto sync animations

No hooks required

React integration benefits

Advanced patterns

Conditional animations

Multiple animations

Animation composition

Key concepts

Performance considerations

Complete example

Next steps