> ## Documentation Index
> Fetch the complete documentation index at: https://docs.heliosrender.com/llms.txt
> Use this file to discover all available pages before exploring further.

# CSS animations with React

> Use standard CSS keyframe animations with React components in Helios

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:

```html theme={null}
<!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:

```typescript theme={null}
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:

```tsx theme={null}
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:

```css theme={null}
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:

```tsx theme={null}
// 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:

```tsx theme={null}
function AnimatedBox({ animate }: { animate: boolean }) {
  return (
    <div className={`box ${animate ? 'moving-box' : ''}`}>
      Content
    </div>
  );
}
```

### Multiple animations

Combine multiple animations on a single element:

```css theme={null}
.multi-animated {
  animation: 
    slideIn 2s ease-out,
    fadeIn 1s ease-in,
    rotate 3s linear;
}
```

### Animation composition

Sequence animations using delays:

```css theme={null}
.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

```css theme={null}
.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](https://github.com/helios-project/helios/tree/main/examples/react-css-animation) directory.

## Next steps

* Try [Framer Motion](https://docs.heliosrender.com/examples/framer-motion.md) for more powerful React animations


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.