Skip to main content

​
Spring presets

Override the default spring on any element animation by passing a spring parameter: 
import { fadeUp } from '@oanim/core';

<div style={fadeUp({ frame, fps, spring: 'bouncy' })}>Bouncy entrance</div>
PresetFeelBest forConfig
snappyQuick, preciseDefault, UI elementsmass 1, damping 20, stiffness 300
bouncyPlayful overshootBadges, icons, CTAsmass 1, damping 12, stiffness 200
gentleSlow, smoothBackgrounds, large elementsmass 1, damping 20, stiffness 100
stiffVery fast, no overshootMicro-interactionsmass 1, damping 30, stiffness 400
wobblyLots of bouncePlayful animationsmass 1, damping 8, stiffness 180
smoothMedium, no overshootText, panelsmass 1, damping 26, stiffness 170
poppyFast with slight bounceButtons, cardsmass 1, damping 14, stiffness 250

​
Default springs per animation

Each animation uses a spring that matches its character:
AnimationDefault Spring
fadeUp, fadeDown'snappy'
slideInLeft, slideInRight'snappy'
popIn'bouncy'
blurIn'smooth'
elasticScale'wobbly'
perspectiveRotateIn'smooth'

​
Easing presets

For frame-based animations using Remotion’s interpolate(): 
import { easings } from '@oanim/core';
import { interpolate } from 'remotion';

const value = interpolate(frame, [0, 30], [0, 100], {
  easing: easings.easeOut,
  extrapolateRight: 'clamp',
});
PresetCurve
easeOutFast start, slow end
circOutCircular deceleration
easeInOutSmooth S-curve
backOutSlight overshoot
expoOutExponential deceleration

​
Helper functions

​
springValue

Get a 0-to-1 spring value for custom animations: 
import { springValue } from '@oanim/core';

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

​
springInterpolate

Map a spring to a custom output range: 
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

​
When to use springs vs easings

Use caseApproach
Element entrancesSpring presets via fadeUp, popIn, etc.
Continuous property animationinterpolate() with easing presets
Custom spring-driven valuesspringValue() or springInterpolate()
Complex choreographyCombine springs with delay parameters