Springs

Eight named springs, each a duration and a bounce with SwiftUI’s parameterisation, in enter and exit pairs. Exits settle sooner than entrances.

instant0.1 s

snap0.25 s

settle0.3 s

reflow0.4 s

glide0.32 s

morph0.3 s, bounce 0.16

pop0.25 s, bounce 0.15

drift0.85 s

Features

Eight named springs as (duration, bounce), with SwiftUI’s parameterisation: ω = 2π / duration, ζ = 1 − bounce.
Each has an exit that settles sooner than its entrance.
Also as CSS linear() curves for transitions.

Use it for

Every transition on this site.

Installation

Get runets.

git clone https://github.com/ziyam-khan/runets

Copy this file into your project, keeping their folders.
- src/motion.ts
Install what it uses.
```
pnpm add motion
```

Usage

import { snappy, spring } from 'runets'

<motion.div animate={{ x: 120 }} transition={snappy.enter} />
<motion.div animate={{ x: 120 }} transition={spring(0.3, 0.16)} />

Accessibility

Pair with reduced motion: swap travel for a short fade (reducedFade).

Source

The code is in src/motion.ts in runets, MIT licensed.

Ziyam Khan

Search the site