Remotion Animation

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

!npm bundle size !npm bundle size  

CSS Keyframes

Install

``bash
npm install remotion-animation
`

or

`bash
yarn add remotion-animation
`

Usage

$3

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!

`

$3

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