Framer Motion Integration
Framer Motion animations are typically time-based. To synchronize them with Helios (which is frame-based and scrubbable), you must map the Helios frame state to MotionValues.
Quick Start
1. useVideoFrame Hook
Ensure you have the useVideoFrame hook (see examples/react/SKILL.md).
2. Map Frames to MotionValues
Use useTransform to map the current frame (from useVideoFrame) to animation values.
import { useMotionValue, useTransform, motion } from 'framer-motion';
import { useVideoFrame } from './hooks/useVideoFrame';
export const MyComponent = ({ helios }) => {
// 1. Get current frame
const frame = useVideoFrame(helios);
// 2. Create a MotionValue for the frame
const frameMv = useMotionValue(0);
// Sync MotionValue whenever frame changes
useEffect(() => {
frameMv.set(frame);
}, [frame, frameMv]);
// 3. Transform Frame -> Animation Value
// Example: Rotate 360 degrees over 60 frames (0 to 60)
const rotate = useTransform(frameMv, [0, 60], [0, 360]);
// Example: Opacity fade in over first 30 frames
const opacity = useTransform(frameMv, [0, 30], [0, 1]);
return (
<motion.div
style={{
width: 100,
height: 100,
background: 'blue',
rotate, // Bind transformed value
opacity
}}
/>
);
};
Advanced: Manual MotionValue Setting
For better performance in deep trees, update a shared MotionValue directly in the subscription, bypassing React state.
const frameMv = useMotionValue(0);
useEffect(() => {
const unsubscribe = helios.subscribe((state) => {
// Update MotionValue directly - no React re-render!
frameMv.set(state.currentFrame);
});
return unsubscribe;
}, [helios, frameMv]);
const x = useTransform(frameMv, [0, 100], [0, 500]);
return <motion.div style={{ x }} />;
Source Files
- Example:
examples/framer-motion-animation/