Documentation Index
Fetch the complete documentation index at: https://docs.open-animate.com/llms.txt
Use this file to discover all available pages before exploring further.
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>
| Preset | Feel | Best for | Config |
|---|
snappy | Quick, precise | Default, UI elements | mass 1, damping 20, stiffness 300 |
bouncy | Playful overshoot | Badges, icons, CTAs | mass 1, damping 12, stiffness 200 |
gentle | Slow, smooth | Backgrounds, large elements | mass 1, damping 20, stiffness 100 |
stiff | Very fast, no overshoot | Micro-interactions | mass 1, damping 30, stiffness 400 |
wobbly | Lots of bounce | Playful animations | mass 1, damping 8, stiffness 180 |
smooth | Medium, no overshoot | Text, panels | mass 1, damping 26, stiffness 170 |
poppy | Fast with slight bounce | Buttons, cards | mass 1, damping 14, stiffness 250 |
Default springs per animation
Each animation uses a spring that matches its character:
| Animation | Default 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',
});
| Preset | Curve |
|---|
easeOut | Fast start, slow end |
circOut | Circular deceleration |
easeInOut | Smooth S-curve |
backOut | Slight overshoot |
expoOut | Exponential 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 case | Approach |
|---|
| Element entrances | Spring presets via fadeUp, popIn, etc. |
| Continuous property animation | interpolate() with easing presets |
| Custom spring-driven values | springValue() or springInterpolate() |
| Complex choreography | Combine springs with delay parameters |
