> ## 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.
# 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
Set up a basic HTML file with a root element for React:
```html theme={null}
React CSS Animation
```
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(
);
}
```
Build a simple component with CSS classes - no refs or hooks needed:
```tsx theme={null}
import React from 'react';
export default function App() {
return (
{/* Standard CSS Animation - no refs, no hooks needed */}
CSS Power
);
}
```
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!
Content
```
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 (
Content
);
}
```
### 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](/examples/framer-motion) for more powerful React animations