1---
2name: animations
3description: Fundamental animation skills for Remotion
4metadata:
5  tags: animations, transitions, frames, useCurrentFrame
6---
7 
8All animations MUST be driven by the `useCurrentFrame()` hook.  
9Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.
10 
11```tsx
12import { useCurrentFrame } from "remotion";
13 
14export const FadeIn = () => {
15  const frame = useCurrentFrame();
16  const { fps } = useVideoConfig();
17 
18  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
19    extrapolateRight: "clamp",
20  });
21 
22  return <div style={{ opacity }}>Hello World!</div>;
23};
24```
25 
26CSS transitions or animations are FORBIDDEN - they will not render correctly.  
27Tailwind animation class names are FORBIDDEN - they will not render correctly.
28