> ## 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.

# Springs & Easings

> Spring presets for element animations and easing curves for interpolations

## Spring presets

Override the default spring on any element animation by passing a `spring` parameter:

```tsx theme={null}
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()`:

```tsx theme={null}
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:

```tsx theme={null}
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:

```tsx theme={null}
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    |