---
title: "animations"
description: "All animations MUST be driven by the `useCurrentFrame()` hook. Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`."
type: skill
canonical_url: https://claudary.paisolsolutions.com/skills/animations
source: "Claudary"
difficulty: intermediate
author: "Claude Code Knowledge Pack"
date: 2026-07-10T11:07:31.978Z
license: CC-BY-4.0
attribution: "animations — Claudary (https://claudary.paisolsolutions.com/skills/animations)"
---

# animations
All animations MUST be driven by the `useCurrentFrame()` hook. Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.

## Overview

---
name: animations
description: Fundamental animation skills for Remotion
metadata:
  tags: animations, transitions, frames, useCurrentFrame
---

All animations MUST be driven by the `useCurrentFrame()` hook.
Write animations in seconds and multiply them by the `fps` value from `useVideoConfig()`.

```tsx
import { useCurrentFrame } from "remotion";

export const FadeIn = () => {
  const frame = useCurrentFrame();
  const { fps } = useVideoConfig();

  const opacity = interpolate(frame, [0, 2 * fps], [0, 1], {
    extrapolateRight: 'clamp',
  });

  return (
    <div style={{ opacity }}>Hello World!</div>
  );
};
```

CSS transitions or animations are FORBIDDEN - they will not render correctly.
Tailwind animation class names are FORBIDDEN - they will not render correctly.

---

Source: [Claudary](https://claudary.paisolsolutions.com/skills/animations) · https://claudary.paisolsolutions.com