Remotion Animated

https://github.com/stefanwittwer/remotion-animated
Admin
Remotion Animated provides a declarative way to animate objects in Remotion projects, simplifying...
Tokens:9,433
Snippets:26
Trust Score:-
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Remotion Animated

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/index.md

Installs the Remotion Animated library into your Remotion project. Choose the command corresponding to your preferred package manager.

```npm
npm i remotion-animated
```

```yarn
yarn add remotion-animated
```

```pnpm
pnpm i remotion-animated
```

```bun
bun add remotion-animated
```

--------------------------------

### Install remotion-animated

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/README.md

Install the remotion-animated package using your preferred package manager. This library is essential for adding declarative animations to your Remotion projects.

```bash
npm i remotion-animated
```

```bash
yarn add remotion-animated
```

```bash
pnpm i remotion-animated
```

```bash
bun add remotion-animated
```

--------------------------------

### Install Dependencies with Yarn

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docusaurus.md

Installs all necessary project dependencies using the Yarn package manager. This is the first step before running any other commands.

```shell
$ yarn
```

--------------------------------

### Start Local Development Server

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docusaurus.md

Starts a local development server that automatically rebuilds on file changes. This allows for live previewing of modifications without manual restarts.

```shell
$ yarn start
```

--------------------------------

### Install remotion-animated Package

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/packages/remotion-animated/README.md

Installs the `remotion-animated` package for your Remotion project using common package managers. This package enables declarative animation within Remotion applications.

```bash
npm i remotion-animated
```

```bash
yarn add remotion-animated
```

```bash
pnpm i remotion-animated
```

```bash
bun add remotion-animated
```

--------------------------------

### Remotion Animated Size Animation Example

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/size.md

This example demonstrates using the `Size` animation from `remotion-animated` to set an element's width to 300 pixels. It requires importing `Animated` and `Size` components and applying the `Size` animation configuration.

```jsx
import { Animated, Size } from 'remotion-animated';

const Example = () => (
  <Animated animations={[Size({ width: 300 })]}>
    <h1>Example text</h1>
  </Animated>
);
```

--------------------------------

### Fade Animation Component API

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/fade.md

Details the configurable options for the `Fade` animation component, including target opacity, initial opacity, and animation start timing.

```APIDOC
Fade(options)
  Animates the opacity of an element.

  Parameters:
    options: Object
      to?: number
        The element's opacity will be animated to this value.
        Examples:
          - 0 means the element will become fully invisible.
          - 1 means the element will become fully opaque.
      initial?: number
        The opacity that is used at the start of the animation. Defaults to 1.
        To achieve a fade in animation, set `initial` to 0.
      start?: number
        The frame number at which the animation should start.

  Returns:
    An animation object that can be passed to the `animations` prop of `Animated`.
```

--------------------------------

### JSX Example: Animated Component Usage

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animated-component.md

Demonstrates how to use the Animated component within a Remotion composition. It shows how to apply multiple animations like Scale, Move, and Fade to a child element.

```jsx
const MyComposition = () => (
  <AbsoluteFill>
    ...
    <Animated
      animations={[
        Scale({ by: 1, initial: 10 }),
        Move({ y: -40, start: 50 }),
        Move({ y: 40, start: 100 }),
        Fade({ to: 0, start: 150 }),
        Scale({ by: 0, start: 150, mass: 75 }),
      ]}>
      <HelloWorld />
    </Animated>
    ...
  </AbsoluteFill>
);
```

--------------------------------

### Remotion Animated: start property

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/_animation-props.mdx

Defines the frame at which the animation begins. Defaults to 0. Initial values are not applied before this frame. Use the `in` prop for hiding elements before the animation starts or custom styling for initial values.

```APIDOC
start: number
  Frame at which the animation should start. Defaults to 0.

  Note: Initial values aren't applied before the `start` frame.
  - If you want to hide the element before the animation starts, use the `in` prop on the `<Animated>` component to set the in frame for the entire animation.
  - If you want the animated property to have a different initial value, you may change it beforehand using your own styling.
```

--------------------------------

### Move Animation Options

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/move.md

Details the configuration options for the `Move` animation. This includes translation axes (`x`, `y`, `z`) and initial offsets (`initialX`, `initialY`, `initialZ`) for controlling the animation's start and end points.

```APIDOC
Move Animation Options:

  x?: number
    Description: The element will be moved to the right by this amount (in pixels).
    Type: number

  y?: number
    Description: The element will be moved down by this amount (in pixels).
    Type: number

  z?: number
    Description: The element will be moved for- or backward along the z-axis by this amount (in pixels). This affects the element's position in 3D space.
    Type: number

  initialX?: number
    Description: The x position offset used at the start of the animation (in pixels).
    Defaults to 0.
    Type: number

  initialY?: number
    Description: The y position offset used at the start of the animation (in pixels).
    Defaults to 0.
    Type: number

  initialZ?: number
    Description: The z position offset used at the start of the animation (in pixels).
    Defaults to 0.
    Type: number

  start?: number
    Description: The time in seconds when the animation should start.
    Type: number
```

--------------------------------

### Remotion Rotate Animation Examples

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/rotate.md

Demonstrates how to use the `Rotate` animation from `remotion-animated` to rotate elements. It covers both 2D rotation using `degrees` and 3D rotation using `degreesX` or `degreesY`, which requires a perspective CSS property for visibility. The animation can be configured with an `initial` rotation value.

```jsx
import { Animated, Rotate } from 'remotion-animated';

const Example = () => (
  <Animated animations={[Rotate({ degrees: 180 })]}>
    <h1>Example text</h1>
  </Animated>
);
```

```jsx
import { Animated, Rotate } from 'remotion-animated';

const Example = () => (
  <div style={{ perspective: '1200px' }}>
    <Animated animations={[Rotate({ degreesX: 180 })]}>
      <h1>Example text</h1>
    </Animated>
  </div>
);
```

--------------------------------

### Combining Multiple Move Animations

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/move.md

Illustrates how to apply multiple `Move` animations to a single element. The translations are combined, and animations can be sequenced using the `start` property.

```jsx
import { Animated, Move } from 'remotion-animated';

const Example = () => (
  <Animated
    animations={[
      Move({ x: 20, y: 80 }),
      Move({ x: 20, y: -80, start: 20 }),
      Move({ x: 40, start: 40 }),
    ]}
  >
    <h1>Example text</h1>
  </Animated>
);
```

--------------------------------

### Usage of Scale Animation in Remotion Animated

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/scale.md

Demonstrates how to apply the `Scale` animation to an element using the `Animated` component. It requires importing `Animated` and `Scale` from `remotion-animated`. The example scales text by a factor of 1.5.

```jsx
import { Animated, Scale } from 'remotion-animated';

const Example = () => (
  <Animated animations={[Scale({ by: 1.5 })]}>
    <h1>Example text</h1>
  </Animated>
);
```

--------------------------------

### Fade Animation Usage in Remotion

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/fade.md

Demonstrates how to use the `Fade` animation component from `remotion-animated` to control element opacity over time. It shows setting initial and target opacity values and animation start points.

```jsx
import { Animated, Fade } from 'remotion-animated';

const Example = () => (
  <Animated
    animations={[
      Fade({ to: 1, initial: 0, start: 20 }),
      Fade({ to: 0, start: 60 }),
    ]}
  >
    <h1>Example text</h1>
  </Animated>
);
```

--------------------------------

### Remotion Animated Scale Component API Documentation

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/scale.md

Detailed API documentation for the `Scale` animation component in remotion-animated, outlining all available properties, their types, default values, and usage examples. This component scales an element horizontally, vertically, or both, using a `transform` property, and can also scale in 3D space along the z-axis.

```APIDOC
Scale Component Properties:

  by?: number
    - The element will be proportionately scaled up or down by this factor in the x and y axes.
    - Examples:
      - 1 means the element will stay the same size.
      - 2 means the element will scale up to be twice as big.
      - 0.5 means the element will scale down to be half as big.

  x?: number
    - The element will be scaled up or down horizontally by this factor.

  y?: number
    - The element will be scaled up or down vertically by this factor.

  z?: number
    - The element will be scaled in 3D space up or down along the z-axis by this factor.
    - This affects the element's scale in 3D space, which will be visible if the element has a perspective.

  initial?: number
    - The proportional scale factor that is used at the start of the animation. Defaults to 1.

  initialX?: number
    - The x scale factor that is used at the start of the animation. Defaults to the value of `initial`.

  initialY?: number
    - The y scale factor that is used at the start of the animation. Defaults to the value of `initial`.

  initialZ?: number
    - The z scale factor that is used at the start of the animation.

Origin:
  - By default, the element is scaled from the middle, as this animation uses the `transform` property.
  - To change this, set the `transform-origin` using your custom styling.
```

--------------------------------

### Deploy Website (SSH)

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docusaurus.md

Deploys the website by building static content and pushing it to the 'gh-pages' branch using SSH. Ensure your SSH keys are configured.

```shell
USE_SSH=true yarn deploy
```

--------------------------------

### Build Static Content

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docusaurus.md

Generates the static website content into the 'build' directory. This output can be served by any static hosting service.

```shell
$ yarn build
```

--------------------------------

### Deploy Website (No SSH)

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docusaurus.md

Deploys the website without using SSH, requiring you to specify your GitHub username. This command builds static content and pushes to the 'gh-pages' branch.

```shell
GIT_USER=<Your GitHub username> yarn deploy
```

--------------------------------

### Animated Component Usage in Remotion

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/concept.md

Demonstrates how to use the `<Animated />` component from `remotion-animated` to apply animations declaratively within Remotion projects. It shows importing `Animated` and `Move`, and wrapping a component with `Animated` to apply animation props.

```tsx
import { Animated, Move } from 'remotion-animated';

const ExampleComposition = () => (
  <Animated animations={[Move({ x: 200 })]}>
    <HelloWorld />
  </Animated>
);
```

--------------------------------

### Basic Move Animation Usage

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/move.md

Demonstrates the basic usage of the `Move` animation to translate an element. It accepts `x` and `y` options to specify the translation in pixels.

```jsx
import { Animated, Move } from 'remotion-animated';

const Example = () => (
  <Animated animations={[Move({ x: -20, y: 80 })]}>
    <h1>Example text</h1>
  </Animated>
);
```

--------------------------------

### APIDOC: Animated Component Props

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animated-component.md

Details the properties available for the Animated component, which controls the animation of its children. This includes animation sequences, visibility timing, and styling.

```APIDOC
Animated Component Props:

animations: Animation[]
  - Description: List of all animations for this element. The order is relevant if there are multiple animations that affect the same property.
  - Type: Array of Animation objects.

absolute?: boolean
  - Description: If true, the animation container will be positioned absolutely.
  - Default: false

in?: number
  - Description: Frame number at which the animation container starts being visible ("In" point), if set.
  - Type: Number.

out?: number
  - Description: Frame number after which the animation container stops being visible ("Out" point), if set.
  - Type: Number.

delay?: number
  - Description: Number of frames by which all animation starts are delayed. Does not affect `in` and `out`.
  - Default: 0
  - Type: Number.

className?: string
  - Description: Class name that is applied to the animation container.
  - Type: String.

children?: React.ReactNode
  - Description: Children that are rendered inside the animation container.
  - Type: ReactNode.

style?: React.CSSProperties
  - Description: Styles that are applied to the animation container.
  - Type: CSSProperties.
```

--------------------------------

### Use Linear Easing with Ease.Linear

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/easing/custom.md

Demonstrates the use of the Ease.Linear easing function for animations. This function provides a constant rate of change throughout the animation's duration, resulting in linear movement without acceleration or deceleration.

```jsx
Move({ y: 40, ease: Ease.Linear });
```

--------------------------------

### Apply Custom Bezier Curve with Ease.Bezier

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/easing/custom.md

Shows how to implement custom easing using a bezier curve defined by four control points. The Ease.Bezier function takes four arguments (x1, y1, x2, y2) to define the curve's shape, allowing for highly customized animation timing.

```jsx
Move({ y: 40, ease: Ease.Bezier(0.33, 1, 0.68, 1) });
```

--------------------------------

### Wrap Remotion Easing Functions with CustomEasing

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/easing/custom.md

Explains how to integrate easing functions from Remotion's Easing module into remotion-animated by wrapping them with the CustomEasing function. This allows for the use of Remotion's built-in easing functions, such as linear or custom bezier curves, within remotion-animated components.

```jsx
import { Easing } from 'remotion';

Move({ y: 40, ease: CustomEasing(Easing.linear) });
Move({ y: 40, ease: CustomEasing(Easing.bezier(0.33, 1, 0.68, 1)) });
```

--------------------------------

### Remotion Animated: ease property

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/_animation-props.mdx

Allows providing a custom easing behavior, overriding spring properties. Refer to the Easing section for more details on custom easing functions.

```APIDOC
ease?: EasingBehaviour
  You can provide a custom easing behaviour here instead of the spring properties.
  This will override the spring animation. Read more about easing in the [Easing section](/docs/category/easing).
```

--------------------------------

### Remotion Animated: duration property

Source: https://github.com/stefanwittwer/remotion-animated/blob/main/sites/docs/docs/animations/_animation-props.mdx

Specifies the number of frames the animation spans. This can be set for both spring and bezier easing animations, defaulting to 15 frames for custom easing functions.

```APIDOC
duration?: number
  Number of frames for which the animation is stretched. Can be set for both spring and bezier easing animations. Defaults to 15 frames for custom easing functions.
```
Tokens:
Raw