Element Animations

import { fadeUp } from '@oanim/core';
import { useCurrentFrame, useVideoConfig } from 'remotion';

const frame = useCurrentFrame();
const { fps } = useVideoConfig();

<div style={fadeUp({ frame, fps, delay: 0.2 })}>Content</div>

import { fadeUp } from '@oanim/core';

<div style={fadeUp({ frame, fps, delay: 0.2 })}>Content</div>

import { fadeDown } from '@oanim/core';

<div style={fadeDown({ frame, fps, delay: 0.2 })}>Content</div>

import { slideInLeft, slideInRight } from '@oanim/core';

<div style={slideInLeft({ frame, fps, delay: 0.2 })}>Left panel</div>
<div style={slideInRight({ frame, fps, delay: 0.3 })}>Right panel</div>

import { popIn } from '@oanim/core';

<div style={popIn({ frame, fps, delay: 0.1 })}>Click me</div>

import { blurIn } from '@oanim/core';

<div style={blurIn({ frame, fps, delay: 0.2 })}>Title</div>

import { elasticScale } from '@oanim/core';

<div style={elasticScale({ frame, fps })}>Boing!</div>

import { perspectiveRotateIn } from '@oanim/core';

<div style={perspectiveRotateIn({ frame, fps, delay: 0.3 })}>Card</div>

<div style={fadeUp({ frame, fps, delay: 0.0 })}>First</div>
<div style={fadeUp({ frame, fps, delay: 0.1 })}>Second</div>
<div style={fadeUp({ frame, fps, delay: 0.2 })}>Third</div>

<div style={{
  ...fadeUp({ frame, fps, delay: 0.2 }),
  fontSize: 48,
  fontWeight: 700,
  color: '#ffffff',
}}>
  Styled and animated
</div>