Springs & Easings

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

<div style={fadeUp({ frame, fps, spring: 'bouncy' })}>Bouncy entrance</div>

import { easings } from '@oanim/core';
import { interpolate } from 'remotion';

const value = interpolate(frame, [0, 30], [0, 100], {
  easing: easings.easeOut,
  extrapolateRight: 'clamp',
});

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

const progress = springValue({ frame, fps, delay: 0.2, spring: 'bouncy' });
// progress goes from 0 to 1 with spring physics

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

const rotation = springInterpolate({ frame, fps }, [0, 360]);
// rotation goes from 0 to 360 with spring physics

const scale = springInterpolate({ frame, fps, delay: 0.2, spring: 'bouncy' }, [0.5, 1]);
// scale goes from 0.5 to 1 with bouncy spring physics