https://github.com/ahgsql/remotion-animation

Use Css Keyframes and Animations from animate.css in remotion.
https://github.com/ahgsql/remotion-animation

Last synced: about 23 hours ago
JSON representation

Use Css Keyframes and Animations from animate.css in remotion.

• Host: GitHub
• URL: https://github.com/ahgsql/remotion-animation
• Owner: ahgsql
• License: mit
• Created: 2021-06-12T21:13:32.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2021-06-30T14:46:18.000Z (over 3 years ago)
• Last Synced: 2024-10-11T09:29:20.738Z (about 1 month ago)
• Language: JavaScript
• Size: 304 KB
• Stars: 29
• Watchers: 4
• Forks: 4
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Remotion Animation

Use Css Keyframes and Animations from animate.css in remotion.

![npm bundle size](https://img.shields.io/bundlephobia/min/remotion-animation) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/remotion-animation) [![npm downloads](https://img.shields.io/npm/dt/remotion-keyframes)](https://www.npmjs.com/package/remotion-animation) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/facebook/react/blob/master/LICENSE)

## CSS Keyframes

## Install

```bash

npm install  remotion-animation

```

or

```bash

yarn add remotion-animation

```

## Usage

### With Your Keyframes

Use Animation component from library and pass required props.

#### Props

- **duration**: Pass integer value to determine animation duration. **(sequence length by default if not passed)**

- **From** and **To** props: Use from and to props to create 2 step animation. Pass any style inside.

- To use percentage animations use **f0**, **f15**,.. **f100.** This will produce **%0, %15, %100** in keyframes.

```jsx

import {Animation} from  'remotion-animation';

//From / To usage

	 Remotion is Awesome! 

//Percentage Usage, you can use all numbers between 0 and 100 with "f" prefix

	 Really! 

```

### With Animate.CSS Library

[Animate.CSS](https://github.com/animate-css/animate.css) is a cross-browser library of CSS animations. As easy to use as an easy thing.

You can take advantage of this library and use pre-made animations with animate.css

**First install animate.css library by**

```bash

npm install animate.css --save

```

or

```bash

yarn add animate.css

```

**Then import both library**

```jsx

import { Animation } from "remotion-animation";

import "animate.css";

```

#### Props

- **duration** : Pass integer value to determine animation duration. **(sequence length by default if not passed)**

- **animationName**: name of animation from animate.css

```jsx

import { Animation } from "remotion-animation";

import "animate.css";

   I am Bouncing! 

;

```

You can use another animation frameworks if they provide animations name directly

## License

MIT © [ahgsql](https://github.com/ahgsql)