Skip to main content
All animations take { frame, fps, delay?, spring? } and return CSSProperties. Spread them onto any element’s style prop. 
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>

​
Parameters

ParamTypeDefaultDescription
framenumberrequiredCurrent frame from useCurrentFrame()
fpsnumberrequiredFPS from useVideoConfig()
delaynumber0Delay in seconds before animation starts
springSpringPresetvariesSpring preset name (see defaults per animation below)

​
fadeUp

Fades in while moving up 20px. The default go-to for text and UI elements.
  • Default spring: 'snappy'
import { fadeUp } from '@oanim/core';

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

​
fadeDown

Fades in while moving down 20px. Good for dropdown menus and secondary info.
  • Default spring: 'snappy'
import { fadeDown } from '@oanim/core';

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

​
slideInLeft / slideInRight

Slides in 30px from the left or right with fade. Good for side-by-side comparisons.
  • Default spring: 'snappy'
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>

​
popIn

Spring-based scale entrance (0.5 to 1) with bounce. Great for badges, icons, and CTAs.
  • Default spring: 'bouncy'
import { popIn } from '@oanim/core';

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

​
blurIn

Fades in from blurry to sharp. Cinematic feel, good for hero text.
  • Default spring: 'smooth'
import { blurIn } from '@oanim/core';

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

​
elasticScale

Wobbly spring scale entrance. Playful and attention-grabbing.
  • Default spring: 'wobbly'
import { elasticScale } from '@oanim/core';

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

​
perspectiveRotateIn

3D rotation entrance from below. Dramatic, good for cards and panels.
  • Default spring: 'smooth'
import { perspectiveRotateIn } from '@oanim/core';

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

​
Default springs per animation

AnimationDefault Spring
fadeUp'snappy'
fadeDown'snappy'
slideInLeft'snappy'
slideInRight'snappy'
popIn'bouncy'
blurIn'smooth'
elasticScale'wobbly'
perspectiveRotateIn'smooth'

​
Staggering multiple elements

Use the delay parameter to create staggered entrances: 
<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>

​
Combining with inline styles

Since animations return CSSProperties, spread them alongside your own styles: 
<div style={{
  ...fadeUp({ frame, fps, delay: 0.2 }),
  fontSize: 48,
  fontWeight: 700,
  color: '#ffffff',
}}>
  Styled and animated
</div>