Example Framer Motion

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/