@emekaugbanu/trigr 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +384 -0
- package/dist/animations-DhYFMdig.d.mts +63 -0
- package/dist/animations-DhYFMdig.d.ts +63 -0
- package/dist/block/animations.cjs +2 -0
- package/dist/block/animations.cjs.map +1 -0
- package/dist/block/animations.d.mts +13 -0
- package/dist/block/animations.d.ts +13 -0
- package/dist/block/animations.js +2 -0
- package/dist/block/animations.js.map +1 -0
- package/dist/block/index.cjs +11 -0
- package/dist/block/index.cjs.map +1 -0
- package/dist/block/index.d.mts +22 -0
- package/dist/block/index.d.ts +22 -0
- package/dist/block/index.js +11 -0
- package/dist/block/index.js.map +1 -0
- package/dist/list/animations.cjs +2 -0
- package/dist/list/animations.cjs.map +1 -0
- package/dist/list/animations.d.mts +13 -0
- package/dist/list/animations.d.ts +13 -0
- package/dist/list/animations.js +2 -0
- package/dist/list/animations.js.map +1 -0
- package/dist/list/index.cjs +2 -0
- package/dist/list/index.cjs.map +1 -0
- package/dist/list/index.d.mts +10 -0
- package/dist/list/index.d.ts +10 -0
- package/dist/list/index.js +2 -0
- package/dist/list/index.js.map +1 -0
- package/dist/paragraph/animations.cjs +2 -0
- package/dist/paragraph/animations.cjs.map +1 -0
- package/dist/paragraph/animations.d.mts +2 -0
- package/dist/paragraph/animations.d.ts +2 -0
- package/dist/paragraph/animations.js +2 -0
- package/dist/paragraph/animations.js.map +1 -0
- package/dist/paragraph/index.cjs +3 -0
- package/dist/paragraph/index.cjs.map +1 -0
- package/dist/paragraph/index.d.mts +10 -0
- package/dist/paragraph/index.d.ts +10 -0
- package/dist/paragraph/index.js +3 -0
- package/dist/paragraph/index.js.map +1 -0
- package/dist/text/animations.cjs +2 -0
- package/dist/text/animations.cjs.map +1 -0
- package/dist/text/animations.d.mts +12 -0
- package/dist/text/animations.d.ts +12 -0
- package/dist/text/animations.js +2 -0
- package/dist/text/animations.js.map +1 -0
- package/dist/text/index.cjs +3 -0
- package/dist/text/index.cjs.map +1 -0
- package/dist/text/index.d.mts +10 -0
- package/dist/text/index.d.ts +10 -0
- package/dist/text/index.js +3 -0
- package/dist/text/index.js.map +1 -0
- package/dist/types-BuLn_v48.d.mts +59 -0
- package/dist/types-BuLn_v48.d.ts +59 -0
- package/dist/types-BuzDNWZT.d.mts +62 -0
- package/dist/types-BuzDNWZT.d.ts +62 -0
- package/dist/types-C3sFNX1j.d.mts +77 -0
- package/dist/types-C3sFNX1j.d.ts +77 -0
- package/package.json +98 -0
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Emeka Ugbanu
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1,384 @@
|
|
|
1
|
+
# trigr
|
|
2
|
+
|
|
3
|
+
**Content-aware animation for the web.** React components with full trigger wiring, or framework-agnostic keyframes for any stack. One import. Polished motion out of the box.
|
|
4
|
+
|
|
5
|
+
- [Live Playground](https://emeka-ugbanu-hub.github.io/Trigr/) — explore 200+ presets across all modules
|
|
6
|
+
- [Landing Page](https://emeka-ugbanu-hub.github.io/Trigr/example) — real-world demo showcasing every feature
|
|
7
|
+
|
|
8
|
+
```bash
|
|
9
|
+
npm install trigr
|
|
10
|
+
```
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
## How it works
|
|
15
|
+
|
|
16
|
+
trigr maps content shape to animation behavior. Use the React components for full trigger/lifecycle management, or import the keyframes directly for use with Vue, Angular, Svelte, or vanilla JS via the Web Animations API.
|
|
17
|
+
|
|
18
|
+
```tsx
|
|
19
|
+
import { Animate } from "trigr/text"
|
|
20
|
+
|
|
21
|
+
<Animate.Text trigger="change" animation="fadeSwap">
|
|
22
|
+
<span>{label}</span>
|
|
23
|
+
</Animate.Text>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
The import tells trigr what kind of content is being animated. The `trigger` prop tells trigr when the animation runs.
|
|
27
|
+
|
|
28
|
+
## Subpath imports only
|
|
29
|
+
|
|
30
|
+
Each module is an independent subpath export. There is no root `import { Animate } from "trigr"` — pick the module you need:
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import { Animate } from "trigr/text" // Animate.Text
|
|
34
|
+
import { Animate } from "trigr/block" // Animate.Block, Parallax
|
|
35
|
+
import { Animate } from "trigr/paragraph" // Animate.Paragraph
|
|
36
|
+
import { Animate } from "trigr/list" // Animate.List
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
This keeps the bundle small. Import only the modules you use and bundlers tree-shake the rest.
|
|
40
|
+
|
|
41
|
+
## Framework-agnostic keyframes
|
|
42
|
+
|
|
43
|
+
The animation data (presets, easing constants, keyframes) is available without React. Import the `keyframes` subpath from any framework — Vue, Angular, Svelte, vanilla JS — and use `el.animate()` directly:
|
|
44
|
+
|
|
45
|
+
```ts
|
|
46
|
+
// Any framework — no React required
|
|
47
|
+
import { presets, SPRING, SMOOTH } from "trigr/text/keyframes"
|
|
48
|
+
import { presets, presetCategory } from "trigr/block/keyframes"
|
|
49
|
+
|
|
50
|
+
el.animate(
|
|
51
|
+
presets.fadeSwap.in,
|
|
52
|
+
{ duration: 400, easing: SPRING, fill: "forwards" }
|
|
53
|
+
)
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
| Keyframe subpath | Size | Exports |
|
|
57
|
+
|---|---|---|
|
|
58
|
+
| `trigr/text/keyframes` | 14KB | `presets`, `EASE_IN`, `EASE_OUT`, `EASE_IN_OUT`, `SPRING`, `SNAPPY`, `SMOOTH` |
|
|
59
|
+
| `trigr/paragraph/keyframes` | 8.7KB | `presets`, `EASE_IN`, `EASE_OUT`, `EASE_IN_OUT`, `SPRING`, `SMOOTH` |
|
|
60
|
+
| `trigr/list/keyframes` | 11KB | `presets`, `EASE_IN`, `EASE_OUT`, `EASE_IN_OUT`, `SPRING`, `SNAPPY`, `SMOOTH` |
|
|
61
|
+
| `trigr/block/keyframes` | 19KB | `presets`, `presetCategory`, `EASE_IN`, `EASE_OUT`, `EASE_IN_OUT`, `SPRING`, `SNAPPY`, `SMOOTH` |
|
|
62
|
+
|
|
63
|
+
The React components (`Animate.Text`, etc.) use these same keyframes internally — the `keyframes` subpath gives you direct access without pulling in any React code.
|
|
64
|
+
|
|
65
|
+
## Modules
|
|
66
|
+
|
|
67
|
+
Pick the wrapper that matches the content shape, not the visual style.
|
|
68
|
+
|
|
69
|
+
| Module | Import | Component | Presets | Use for |
|
|
70
|
+
|--------|--------|-----------|---------|---------|
|
|
71
|
+
| Text | `trigr/text` | `Animate.Text` | 75 | Words, labels, counters, headings, nav items, inline text, character-level effects |
|
|
72
|
+
| Paragraph | `trigr/paragraph` | `Animate.Paragraph` | 42 | Prose, descriptions, long copy, line and word-level paragraph effects |
|
|
73
|
+
| List | `trigr/list` | `Animate.List` | 55 | Repeated keyed collections: cards, buttons, rows, logos, menu items |
|
|
74
|
+
| Block | `trigr/block` | `Animate.Block` | 79 | One complete element: cards, panels, hero images, modals, notifications, drag, parallax, layout transitions |
|
|
75
|
+
|
|
76
|
+
## Triggers
|
|
77
|
+
|
|
78
|
+
Every module follows the same trigger system. Presets decide how the motion feels. Triggers decide when it fires.
|
|
79
|
+
|
|
80
|
+
| Trigger | Behavior | Best for |
|
|
81
|
+
|---------|----------|----------|
|
|
82
|
+
| `change` | Fires when `value` or children change | Text replacement, counters, updated cards, live data |
|
|
83
|
+
| `scroll` | Fires when the element reaches the viewport threshold via IntersectionObserver | Reveals, scroll entrances, parallax |
|
|
84
|
+
| `hover` | Fires on pointer enter. Resets on leave | Buttons, cards, labels, menu items |
|
|
85
|
+
| `click` | Fires on click/tap | Press feedback, ripple, shake, confirmation |
|
|
86
|
+
| `manual` | Fires from `ref.current.animate()` | Replay buttons, guided flows, imperative triggers |
|
|
87
|
+
| `mount` | Fires when the component appears | Initial entrance, conditional UI, popovers |
|
|
88
|
+
|
|
89
|
+
### Multiple triggers
|
|
90
|
+
|
|
91
|
+
Pass an array to `trigger` for two sources. Use `scrollAnimation` to set a different preset for scroll:
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
<Animate.Text
|
|
95
|
+
trigger={["scroll", "change"]}
|
|
96
|
+
scrollAnimation="fadeIn"
|
|
97
|
+
animation="fadeSwap"
|
|
98
|
+
value={text}
|
|
99
|
+
>
|
|
100
|
+
<span>{text}</span>
|
|
101
|
+
</Animate.Text>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
Or use the `triggers` array API for per-trigger configuration with individual thresholds:
|
|
105
|
+
|
|
106
|
+
```tsx
|
|
107
|
+
<Animate.Text
|
|
108
|
+
triggers={[
|
|
109
|
+
{ trigger: "scroll", animation: "wordFadeIn", threshold: 0.3 },
|
|
110
|
+
{ trigger: "change", animation: "fadeSwap" },
|
|
111
|
+
]}
|
|
112
|
+
value={text}
|
|
113
|
+
>
|
|
114
|
+
<span>{text}</span>
|
|
115
|
+
</Animate.Text>
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
## Core Props
|
|
119
|
+
|
|
120
|
+
| Prop | Type | Default | Purpose |
|
|
121
|
+
|------|------|---------|---------|
|
|
122
|
+
| `animation` | string | required | Main animation preset |
|
|
123
|
+
| `trigger` | string or string[] | `"change"` | When the animation fires |
|
|
124
|
+
| `triggers` | TriggerConfig[] | — | Per-trigger config (alternative to `trigger` + `scrollAnimation`) |
|
|
125
|
+
| `value` | string or number | — | Change-tracking value for `change` trigger |
|
|
126
|
+
| `duration` | number | 300–400 | Animation duration in ms |
|
|
127
|
+
| `easing` | string | varies | CSS easing curve (SPRING, SMOOTH, SNAPPY, EASE_IN, EASE_OUT, EASE_IN_OUT) |
|
|
128
|
+
| `delay` | number | 0 | Delay before animation starts |
|
|
129
|
+
| `threshold` | number | 0.4 | Scroll trigger threshold (0–1) |
|
|
130
|
+
| `properties` | object | — | Extra CSS properties to animate alongside the preset |
|
|
131
|
+
| `presetOptions` | object | — | Tune distance, scale, blur, stagger, rotate per preset |
|
|
132
|
+
| `show` | boolean | — | Lifecycle control — set `false` to trigger exit |
|
|
133
|
+
| `exitAnimation` | string | — | Exit preset played when `show` becomes `false` |
|
|
134
|
+
| `unmountOnExit` | boolean | `true` | Remove from DOM after exit animation completes |
|
|
135
|
+
| `as` | string | `"span"` / `"div"` | Wrapper element tag |
|
|
136
|
+
| `once` | boolean | `!repeat` | Only fire scroll trigger once |
|
|
137
|
+
| `repeat` | boolean | `false` | Allow scroll animation to replay on re-entry |
|
|
138
|
+
| `highlightColor` | string | auto | Color for the `highlight` preset (Text, Paragraph) |
|
|
139
|
+
| `highlightMode` | string | `"persist"` | Highlight behavior: `"persist"`, `"pulse"`, or `"erase"` (Text, Paragraph) |
|
|
140
|
+
| `highlightHold` | number | 800 | Hold duration in ms before fade-out in pulse mode |
|
|
141
|
+
|
|
142
|
+
### Properties
|
|
143
|
+
|
|
144
|
+
Animate CSS properties alongside the main preset. Each key is a CSS property mapped to a `[from, to]` tuple:
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
<Animate.Text
|
|
148
|
+
trigger="change"
|
|
149
|
+
animation="fadeSwap"
|
|
150
|
+
properties={{
|
|
151
|
+
color: ["#111", "#7F77DD"],
|
|
152
|
+
fontSize: ["14px", "18px"],
|
|
153
|
+
}}
|
|
154
|
+
>
|
|
155
|
+
<span>{text}</span>
|
|
156
|
+
</Animate.Text>
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### presetOptions
|
|
160
|
+
|
|
161
|
+
Tune animation intensity without rewriting keyframes. Each module has its own options:
|
|
162
|
+
|
|
163
|
+
| Module | Options |
|
|
164
|
+
|--------|---------|
|
|
165
|
+
| Text | `distance`, `scale`, `blur`, `stagger` |
|
|
166
|
+
| Paragraph | `distance`, `scale`, `blur` |
|
|
167
|
+
| List | `distance`, `scale`, `blur`, `stagger` |
|
|
168
|
+
| Block | `distance`, `scale`, `blur`, `rotate` |
|
|
169
|
+
|
|
170
|
+
```tsx
|
|
171
|
+
<Animate.Text
|
|
172
|
+
presetOptions={{ distance: 64, blur: 2 }}
|
|
173
|
+
animation="slideReplace"
|
|
174
|
+
>
|
|
175
|
+
<span>{text}</span>
|
|
176
|
+
</Animate.Text>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
### Exit animations
|
|
180
|
+
|
|
181
|
+
Use `show` and `exitAnimation` for declarative lifecycle control:
|
|
182
|
+
|
|
183
|
+
```tsx
|
|
184
|
+
<Animate.Block
|
|
185
|
+
show={isOpen}
|
|
186
|
+
animation="slideUp"
|
|
187
|
+
exitAnimation="modalOut"
|
|
188
|
+
unmountOnExit
|
|
189
|
+
>
|
|
190
|
+
<Dialog />
|
|
191
|
+
</Animate.Block>
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
For lists, exits fire automatically when a keyed child is removed:
|
|
195
|
+
|
|
196
|
+
```tsx
|
|
197
|
+
<Animate.List exitAnimation="itemFadeOut" exitStagger={30}>
|
|
198
|
+
{items.map(item => <div key={item.id}>{item.name}</div>)}
|
|
199
|
+
</Animate.List>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
## Text Module
|
|
205
|
+
|
|
206
|
+
`trigr/text` — 75 presets for short inline text. The animation operates on words, characters, or labels. Nested styled children like `<span className="stat-value">200+</span>` are preserved through text-replacing animations (odometer, ticker, typewriter, scramble, decoder).
|
|
207
|
+
|
|
208
|
+
```tsx
|
|
209
|
+
import { Animate } from "trigr/text"
|
|
210
|
+
|
|
211
|
+
// Animate inside a styled child — .stat-value class stays attached
|
|
212
|
+
<Animate.Text trigger="change" animation="odometer">
|
|
213
|
+
<span className="stat-value">200+</span>
|
|
214
|
+
</Animate.Text>
|
|
215
|
+
```
|
|
216
|
+
|
|
217
|
+
| Category | Presets | Best trigger |
|
|
218
|
+
|----------|---------|--------------|
|
|
219
|
+
| Swap & replace | `fadeSwap`, `morph`, `slideReplace`, `typewriter`, `decoder`, `scramble`, `odometer`, `ticker`, `underlineDraw`, `underlineSlide`, `copyConfirm`, `brightnessShift`, `activeTabText`, `textRotate`, `gooeyMorph`, `randomLetterSwap` | `change` |
|
|
220
|
+
| Reveal | `fadeIn`, `letterDrop`, `textReveal`, `liftReveal`, `scatter`, `splash`, `splitReveal`, `splitSlide`, `staggerText`, `textEffect`, `scrollFanIn` | `scroll`, `mount` |
|
|
221
|
+
| Particle & physics | `bigBang`, `scatterAssemble`, `pixelRain`, `vortex`, `dominoFall`, `pendulum`, `centerBurst`, `gravityBounce` | `change`, `mount`, hero moments |
|
|
222
|
+
| Interaction | `bump`, `jitter`, `popUp`, `jello`, `shake`, `pulse`, `blink`, `wave`, `ping`, `highlight`, `boldFlash`, `blur`, `flip`, `bounce`, `dropIn`, `riseUp`, `expandIn`, `popIn`, `strikeThrough` | `hover`, `click`, `manual` |
|
|
223
|
+
| Exit | `fadeOut`, `fadeOutUp`, `fadeOutDown`, `slideOutUp`, `slideOutDown`, `slideOutLeft`, `slideOutRight`, `scaleOut`, `blurOut`, `clipOut`, `strikeOut`, `typeOut`, `scrambleOut`, `popOut`, `shrinkOut`, `fadeAway` | `show` lifecycle |
|
|
224
|
+
|
|
225
|
+
---
|
|
226
|
+
|
|
227
|
+
## Paragraph Module
|
|
228
|
+
|
|
229
|
+
`trigr/paragraph` — 42 presets for prose. Animations use visual-line measurement for morphText and word/line-level effects. The paragraph wrapper stays intact.
|
|
230
|
+
|
|
231
|
+
```tsx
|
|
232
|
+
import { Animate } from "trigr/paragraph"
|
|
233
|
+
|
|
234
|
+
<Animate.Paragraph trigger="scroll" animation="wordFadeIn" threshold={0.4}>
|
|
235
|
+
<p>Motion should support reading, not interrupt it.</p>
|
|
236
|
+
</Animate.Paragraph>
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
| Category | Presets | Best trigger |
|
|
240
|
+
|----------|---------|--------------|
|
|
241
|
+
| Word & line reveal | `wordFadeIn`, `wordSlideUp`, `wordPop`, `lineFadeIn`, `lineSlideUp`, `streamIn`, `streamFade`, `streamSlide`, `scrollWordReveal` | `scroll`, `mount` |
|
|
242
|
+
| Content replacement | `fadeSwap`, `morphText`, `slideReplace`, `crossFade`, `expandCollapse`, `morphBlur`, `pushLeft`, `pushRight`, `flipPage` | `change` |
|
|
243
|
+
| Emphasis | `highlight`, `diffAnimate`, `flash`, `errorMessageIn` | `change`, `hover` |
|
|
244
|
+
| Paragraph motion | `fadeIn`, `slideUp`, `slideDown`, `slideLeft`, `slideRight`, `popIn`, `expandIn`, `zoomIn`, `pulse`, `shake`, `cursorBlink`, `heightAuto`, `fadeMask` | `scroll`, `mount`, interaction |
|
|
245
|
+
| Exit | `fadeOut`, `paragraphFadeOut`, `popOut`, `collapseOut`, `zoomOut`, `slideOutUp`, `slideOutDown`, `slideOutLeft`, `slideOutRight`, `collapseHeight`, `wordFadeOut`, `wordSlideOut`, `lineFadeOut`, `lineSlideOut`, `fadeMaskOut` | `show` lifecycle |
|
|
246
|
+
|
|
247
|
+
---
|
|
248
|
+
|
|
249
|
+
## List Module
|
|
250
|
+
|
|
251
|
+
`trigr/list` — 55 presets for keyed collections. Handles staggered entrances, item presence (add/remove), reorder animation, parallax, marquee, and exit animations.
|
|
252
|
+
|
|
253
|
+
```tsx
|
|
254
|
+
import { Animate } from "trigr/list"
|
|
255
|
+
|
|
256
|
+
<Animate.List
|
|
257
|
+
trigger="scroll"
|
|
258
|
+
animation="staggerSlideUp"
|
|
259
|
+
stagger={80}
|
|
260
|
+
exitAnimation="itemSlideOut"
|
|
261
|
+
reorderAnimation="flip"
|
|
262
|
+
>
|
|
263
|
+
{cards.map(card => <article key={card.id}>{card.title}</article>)}
|
|
264
|
+
</Animate.List>
|
|
265
|
+
```
|
|
266
|
+
|
|
267
|
+
| Category | Presets | Best trigger |
|
|
268
|
+
|----------|---------|--------------|
|
|
269
|
+
| Stagger | `staggerFadeIn`, `staggerSlideUp`, `staggerSlideLeft`, `staggerZoomIn`, `staggerPopIn`, `staggerBlurIn`, `stackIn` | `scroll`, `mount` |
|
|
270
|
+
| Cascade | `wordCascade`, `wordWave`, `wordDrop`, `wordFadeIn` | `mount`, compact collections |
|
|
271
|
+
| Presence | `itemFadeIn`, `itemSlideIn`, `itemPopIn`, `itemBounceIn`, `itemFadeOut`, `itemSlideOut`, `itemCollapseOut` | add/remove |
|
|
272
|
+
| Entrance | `fadeIn`, `slideIn`, `slideInLeft`, `slideInRight`, `popIn`, `bounceIn`, `expandIn`, `flipIn`, `glideIn`, `feedAppend`, `filterIn`, `emptyToList`, `insertItem`, `emptyStateToList`, `selectionPulse` | `scroll`, `mount` |
|
|
273
|
+
| Marquee | `marquee`, `marqueeReverse`, `marqueeFade` | logos, continuous strips |
|
|
274
|
+
| Parallax | `parallax`, `parallaxFast`, `parallaxReverse`, `tiltScroll`, `scaleScroll`, `parallaxStagger` | scroll depth |
|
|
275
|
+
| Reorder | `flip`, `smooth`, `spring`, `none` | key position changes |
|
|
276
|
+
| Exit | `fadeOut`, `slideOut`, `slideOutLeft`, `slideOutRight`, `popOut`, `bounceOut`, `collapseOut`, `flipOut`, `glideOut`, `itemSlideOutLeft`, `itemSlideOutRight`, `itemScaleOut`, `itemPopOut`, `itemBlurOut`, `itemDismissOut`, `rowCollapseOut`, `tagRemove`, `cardRemove` | child removal |
|
|
277
|
+
|
|
278
|
+
---
|
|
279
|
+
|
|
280
|
+
## Block Module
|
|
281
|
+
|
|
282
|
+
`trigr/block` — 79 presets for single elements. Supports entrance/exit, scroll-linked parallax, hover states, cursor tracking, overlays, drag gesture, and shared layout transitions.
|
|
283
|
+
|
|
284
|
+
```tsx
|
|
285
|
+
import { Animate } from "trigr/block"
|
|
286
|
+
|
|
287
|
+
<Animate.Block trigger="scroll" animation="slideUp" threshold={0.5}>
|
|
288
|
+
<section className="card">Analytics</section>
|
|
289
|
+
</Animate.Block>
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
### Drag
|
|
293
|
+
|
|
294
|
+
```tsx
|
|
295
|
+
<Animate.Block
|
|
296
|
+
drag="x"
|
|
297
|
+
dragThreshold={100}
|
|
298
|
+
dragElastic={0.6}
|
|
299
|
+
onDragEnd={(info) => {
|
|
300
|
+
if (info.dismissed) handleDismiss()
|
|
301
|
+
}}
|
|
302
|
+
>
|
|
303
|
+
<div className="swipeable-card" />
|
|
304
|
+
</Animate.Block>
|
|
305
|
+
```
|
|
306
|
+
|
|
307
|
+
### Shared layout
|
|
308
|
+
|
|
309
|
+
```tsx
|
|
310
|
+
<Animate.Block layoutId="card" layoutTransition={{ duration: 400, easing: "ease-in-out" }}>
|
|
311
|
+
{expanded ? <ExpandedCard /> : <CompactCard />}
|
|
312
|
+
</Animate.Block>
|
|
313
|
+
```
|
|
314
|
+
|
|
315
|
+
### Parallax
|
|
316
|
+
|
|
317
|
+
```tsx
|
|
318
|
+
import { Parallax } from "trigr/block"
|
|
319
|
+
|
|
320
|
+
<Parallax type="parallaxFast" strength={0.4}>
|
|
321
|
+
<img src={hero} alt="" />
|
|
322
|
+
</Parallax>
|
|
323
|
+
```
|
|
324
|
+
|
|
325
|
+
| Category | Presets | Best trigger |
|
|
326
|
+
|----------|---------|--------------|
|
|
327
|
+
| Entrance | `fadeIn`, `slideUp`, `slideDown`, `slideLeft`, `slideRight`, `scaleIn`, `popIn`, `rotateIn`, `flipX`, `flipY`, `bounceIn`, `blurIn`, `clipUp`, `clipLeft`, `zoomIn`, `glideIn`, `dropIn`, `riseUp`, `expandIn`, `expandHeight`, `fadeSlideUp`, `springBounce`, `springScale`, `springSlideUp`, `springSlideDown`, `morphRadius`, `morphCircle`, `fadeSwap` | `scroll`, `mount`, `change` |
|
|
328
|
+
| Scroll-linked | `parallax`, `parallaxFast`, `parallaxReverse`, `tiltScroll`, `scaleScroll` | `scroll` |
|
|
329
|
+
| Hover & cursor | `lift`, `sink`, `grow`, `glow`, `shadow`, `borderPop`, `tilt`, `tilt3D`, `rotate3D`, `depth`, `float` | `hover` |
|
|
330
|
+
| Feedback & overlay | `press`, `ripple`, `burst`, `shake`, `wiggle`, `jello`, `flash`, `heartBeat`, `pulse`, `spin`, `ping`, `shimmer` | `click`, `manual` |
|
|
331
|
+
| UI patterns | `modalIn`, `modalOut`, `popoverIn`, `popoverOut`, `toastIn`, `toastOut`, `successCheckIn`, `buttonLoading`, `focusRingPulse`, `tabPanelIn`, `tabPanelOut`, `successToast`, `checkboxCheck` | `mount`, `show`, `click` |
|
|
332
|
+
| Exit | `fadeOut`, `scaleOut`, `popOut`, `rotateOut`, `bounceOut`, `glideOut`, `collapseOut`, `blurOut`, `zoomOut`, `dialogOut`, `drawerOutLeft`, `drawerOutRight`, `drawerOutTop`, `drawerOutBottom`, `menuOut`, `toastOutRight`, `toastOutUp`, `collapseWidth`, `dismissOut`, `errorOut`, `successOut` | `show` lifecycle |
|
|
333
|
+
|
|
334
|
+
---
|
|
335
|
+
|
|
336
|
+
## Easing
|
|
337
|
+
|
|
338
|
+
All modules export named easing constants:
|
|
339
|
+
|
|
340
|
+
| Constant | Curve | Best for |
|
|
341
|
+
|----------|-------|----------|
|
|
342
|
+
| `SPRING` | `cubic-bezier(0.34, 1.56, 0.64, 1)` | Entrances, pop, bounce |
|
|
343
|
+
| `SMOOTH` | `cubic-bezier(0.22, 1, 0.36, 1)` | Reveals, scroll-triggered, paragraph |
|
|
344
|
+
| `SNAPPY` | `cubic-bezier(0.2, 0, 0, 1)` | Hover, click, instant feedback |
|
|
345
|
+
| `EASE_IN` | `cubic-bezier(0.0, 0.0, 0.2, 1)` | Exits, dismissals |
|
|
346
|
+
| `EASE_OUT` | `cubic-bezier(0.4, 0.0, 1, 1)` | Exits |
|
|
347
|
+
| `EASE_IN_OUT` | `cubic-bezier(0.4, 0.0, 0.2, 1)` | Neutral transitions, reorder |
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
351
|
+
## Quick Reference
|
|
352
|
+
|
|
353
|
+
| Goal | Use |
|
|
354
|
+
|------|-----|
|
|
355
|
+
| A word changes to another | `Animate.Text` with `fadeSwap`, `morph`, `typewriter`, or `slideReplace` |
|
|
356
|
+
| A paragraph reveals on scroll | `Animate.Paragraph` with `wordFadeIn`, `lineSlideUp`, or `scrollWordReveal` |
|
|
357
|
+
| Cards stagger in | `Animate.List` with `staggerSlideUp` or `staggerFadeIn` |
|
|
358
|
+
| Dashboard rows reorder | `Animate.List` with `reorderAnimation="flip"` |
|
|
359
|
+
| Logo strip loops | `Animate.List` with `marquee` |
|
|
360
|
+
| A group of cards moves with scroll | `Animate.List` with `parallaxStagger` or `tiltScroll` |
|
|
361
|
+
| One hero image moves with scroll | `Animate.Block` with `parallax` |
|
|
362
|
+
| A pricing card lifts on hover | `Animate.Block` with `lift` or `tilt3D` |
|
|
363
|
+
| A button presses on click | `Animate.Block` with `press` or `ripple` |
|
|
364
|
+
| A modal animates in and out | `Animate.Block` with `modalIn` / `modalOut` |
|
|
365
|
+
| A notification toasts and dismisses | `Animate.Block` with `toastIn` / `toastOut` |
|
|
366
|
+
| A swipeable card | `Animate.Block` with `drag="x"` |
|
|
367
|
+
| Shared element transitions | `Animate.Block` with `layoutId` |
|
|
368
|
+
|
|
369
|
+
---
|
|
370
|
+
|
|
371
|
+
## Works everywhere
|
|
372
|
+
|
|
373
|
+
- **React/Next.js**: Full components (`Animate.Text`, `.Paragraph`, `.List`, `.Block`) with trigger wiring, lifecycle management, and exit animations.
|
|
374
|
+
- **Vue, Angular, Svelte, vanilla JS**: Import the keyframes and call `el.animate()` directly.
|
|
375
|
+
- **TypeScript**: Fully typed — every preset, easing, and keyframe object has IDE autocomplete.
|
|
376
|
+
- **Tree-shakeable**: Each module is independent. Import only what you use.
|
|
377
|
+
- **Reduced motion**: Detects `prefers-reduced-motion: reduce` and degrades to opacity-only transitions.
|
|
378
|
+
- **Layout stable**: All animations use composited properties (transform, opacity, filter).
|
|
379
|
+
|
|
380
|
+
---
|
|
381
|
+
|
|
382
|
+
## License
|
|
383
|
+
|
|
384
|
+
MIT
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { JSX, CSSProperties, MouseEvent, ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ParagraphPresetOptions = {
|
|
4
|
+
distance?: number;
|
|
5
|
+
scale?: number;
|
|
6
|
+
blur?: number;
|
|
7
|
+
};
|
|
8
|
+
type ParagraphPreset = "fadeIn" | "fadeOut" | "fadeSwap" | "fadeMask" | "morphText" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "slideReplace" | "popIn" | "popOut" | "expandIn" | "collapseOut" | "zoomIn" | "zoomOut" | "wordFadeIn" | "wordSlideUp" | "wordPop" | "lineFadeIn" | "lineSlideUp" | "streamIn" | "streamFade" | "streamSlide" | "cursorBlink" | "expandCollapse" | "heightAuto" | "crossFade" | "pulse" | "shake" | "highlight" | "flash" | "pushLeft" | "pushRight" | "flipPage" | "morphBlur" | "diffAnimate" | "scrollWordReveal" | "errorMessageIn" | "paragraphFadeOut" | "slideOutUp" | "slideOutDown" | "slideOutLeft" | "slideOutRight" | "collapseHeight" | "wordFadeOut" | "wordSlideOut" | "lineFadeOut" | "lineSlideOut" | "fadeMaskOut";
|
|
9
|
+
type AnimationTrigger = "change" | "scroll" | "hover" | "click" | "manual" | "mount";
|
|
10
|
+
type AnimationTriggerInput = AnimationTrigger | readonly [AnimationTrigger, AnimationTrigger] | readonly AnimationTrigger[];
|
|
11
|
+
type AnimationProperties = Record<string, readonly [string | number, string | number]>;
|
|
12
|
+
type TriggerConfig = {
|
|
13
|
+
trigger: AnimationTrigger;
|
|
14
|
+
animation: ParagraphPreset;
|
|
15
|
+
threshold?: number;
|
|
16
|
+
};
|
|
17
|
+
interface AnimateParagraphHandle {
|
|
18
|
+
animate: () => void;
|
|
19
|
+
element: HTMLElement | null;
|
|
20
|
+
}
|
|
21
|
+
interface AnimateParagraphProps {
|
|
22
|
+
value?: string;
|
|
23
|
+
triggers?: TriggerConfig[];
|
|
24
|
+
trigger?: AnimationTriggerInput;
|
|
25
|
+
animation: ParagraphPreset;
|
|
26
|
+
scrollAnimation?: ParagraphPreset;
|
|
27
|
+
properties?: AnimationProperties;
|
|
28
|
+
exitAnimation?: ParagraphPreset;
|
|
29
|
+
show?: boolean;
|
|
30
|
+
unmountOnExit?: boolean;
|
|
31
|
+
highlightColor?: string;
|
|
32
|
+
highlightMode?: "persist" | "pulse" | "erase";
|
|
33
|
+
highlightHold?: number;
|
|
34
|
+
duration?: number;
|
|
35
|
+
easing?: string;
|
|
36
|
+
delay?: number;
|
|
37
|
+
threshold?: number;
|
|
38
|
+
repeat?: boolean;
|
|
39
|
+
once?: boolean;
|
|
40
|
+
as?: keyof JSX.IntrinsicElements;
|
|
41
|
+
className?: string;
|
|
42
|
+
style?: CSSProperties;
|
|
43
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
44
|
+
onEnter?: () => void;
|
|
45
|
+
onExit?: () => void;
|
|
46
|
+
onHoverStart?: () => void;
|
|
47
|
+
onHoverEnd?: () => void;
|
|
48
|
+
onAnimationEnd?: () => void;
|
|
49
|
+
presetOptions?: ParagraphPresetOptions;
|
|
50
|
+
children: ReactNode;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
declare const EASE_IN = "cubic-bezier(0.0, 0.0, 0.2, 1)";
|
|
54
|
+
declare const EASE_OUT = "cubic-bezier(0.4, 0.0, 1, 1)";
|
|
55
|
+
declare const EASE_IN_OUT = "cubic-bezier(0.4, 0.0, 0.2, 1)";
|
|
56
|
+
declare const SPRING = "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
|
57
|
+
declare const SMOOTH = "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
58
|
+
declare const presets: Record<string, {
|
|
59
|
+
out: Keyframe[];
|
|
60
|
+
in: Keyframe[];
|
|
61
|
+
}>;
|
|
62
|
+
|
|
63
|
+
export { type AnimateParagraphHandle as A, EASE_IN as E, type ParagraphPreset as P, SMOOTH as S, type AnimateParagraphProps as a, EASE_IN_OUT as b, EASE_OUT as c, SPRING as d, presets as p };
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { JSX, CSSProperties, MouseEvent, ReactNode } from 'react';
|
|
2
|
+
|
|
3
|
+
type ParagraphPresetOptions = {
|
|
4
|
+
distance?: number;
|
|
5
|
+
scale?: number;
|
|
6
|
+
blur?: number;
|
|
7
|
+
};
|
|
8
|
+
type ParagraphPreset = "fadeIn" | "fadeOut" | "fadeSwap" | "fadeMask" | "morphText" | "slideUp" | "slideDown" | "slideLeft" | "slideRight" | "slideReplace" | "popIn" | "popOut" | "expandIn" | "collapseOut" | "zoomIn" | "zoomOut" | "wordFadeIn" | "wordSlideUp" | "wordPop" | "lineFadeIn" | "lineSlideUp" | "streamIn" | "streamFade" | "streamSlide" | "cursorBlink" | "expandCollapse" | "heightAuto" | "crossFade" | "pulse" | "shake" | "highlight" | "flash" | "pushLeft" | "pushRight" | "flipPage" | "morphBlur" | "diffAnimate" | "scrollWordReveal" | "errorMessageIn" | "paragraphFadeOut" | "slideOutUp" | "slideOutDown" | "slideOutLeft" | "slideOutRight" | "collapseHeight" | "wordFadeOut" | "wordSlideOut" | "lineFadeOut" | "lineSlideOut" | "fadeMaskOut";
|
|
9
|
+
type AnimationTrigger = "change" | "scroll" | "hover" | "click" | "manual" | "mount";
|
|
10
|
+
type AnimationTriggerInput = AnimationTrigger | readonly [AnimationTrigger, AnimationTrigger] | readonly AnimationTrigger[];
|
|
11
|
+
type AnimationProperties = Record<string, readonly [string | number, string | number]>;
|
|
12
|
+
type TriggerConfig = {
|
|
13
|
+
trigger: AnimationTrigger;
|
|
14
|
+
animation: ParagraphPreset;
|
|
15
|
+
threshold?: number;
|
|
16
|
+
};
|
|
17
|
+
interface AnimateParagraphHandle {
|
|
18
|
+
animate: () => void;
|
|
19
|
+
element: HTMLElement | null;
|
|
20
|
+
}
|
|
21
|
+
interface AnimateParagraphProps {
|
|
22
|
+
value?: string;
|
|
23
|
+
triggers?: TriggerConfig[];
|
|
24
|
+
trigger?: AnimationTriggerInput;
|
|
25
|
+
animation: ParagraphPreset;
|
|
26
|
+
scrollAnimation?: ParagraphPreset;
|
|
27
|
+
properties?: AnimationProperties;
|
|
28
|
+
exitAnimation?: ParagraphPreset;
|
|
29
|
+
show?: boolean;
|
|
30
|
+
unmountOnExit?: boolean;
|
|
31
|
+
highlightColor?: string;
|
|
32
|
+
highlightMode?: "persist" | "pulse" | "erase";
|
|
33
|
+
highlightHold?: number;
|
|
34
|
+
duration?: number;
|
|
35
|
+
easing?: string;
|
|
36
|
+
delay?: number;
|
|
37
|
+
threshold?: number;
|
|
38
|
+
repeat?: boolean;
|
|
39
|
+
once?: boolean;
|
|
40
|
+
as?: keyof JSX.IntrinsicElements;
|
|
41
|
+
className?: string;
|
|
42
|
+
style?: CSSProperties;
|
|
43
|
+
onClick?: (event: MouseEvent<HTMLElement>) => void;
|
|
44
|
+
onEnter?: () => void;
|
|
45
|
+
onExit?: () => void;
|
|
46
|
+
onHoverStart?: () => void;
|
|
47
|
+
onHoverEnd?: () => void;
|
|
48
|
+
onAnimationEnd?: () => void;
|
|
49
|
+
presetOptions?: ParagraphPresetOptions;
|
|
50
|
+
children: ReactNode;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
declare const EASE_IN = "cubic-bezier(0.0, 0.0, 0.2, 1)";
|
|
54
|
+
declare const EASE_OUT = "cubic-bezier(0.4, 0.0, 1, 1)";
|
|
55
|
+
declare const EASE_IN_OUT = "cubic-bezier(0.4, 0.0, 0.2, 1)";
|
|
56
|
+
declare const SPRING = "cubic-bezier(0.34, 1.56, 0.64, 1)";
|
|
57
|
+
declare const SMOOTH = "cubic-bezier(0.22, 1, 0.36, 1)";
|
|
58
|
+
declare const presets: Record<string, {
|
|
59
|
+
out: Keyframe[];
|
|
60
|
+
in: Keyframe[];
|
|
61
|
+
}>;
|
|
62
|
+
|
|
63
|
+
export { type AnimateParagraphHandle as A, EASE_IN as E, type ParagraphPreset as P, SMOOTH as S, type AnimateParagraphProps as a, EASE_IN_OUT as b, EASE_OUT as c, SPRING as d, presets as p };
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
'use strict';var t="cubic-bezier(0.0, 0.0, 0.2, 1)",r="cubic-bezier(0.4, 0.0, 1, 1)",a="cubic-bezier(0.4, 0.0, 0.2, 1)",o="cubic-bezier(0.34, 1.56, 0.64, 1)",e="cubic-bezier(0.2, 0, 0, 1)",l="cubic-bezier(0.22, 1, 0.36, 1)",s={fadeIn:"oneshot",fadeOut:"oneshot",fadeSwap:"oneshot",slideUp:"oneshot",slideDown:"oneshot",slideLeft:"oneshot",slideRight:"oneshot",scaleIn:"oneshot",scaleOut:"oneshot",popIn:"oneshot",popOut:"oneshot",rotateIn:"oneshot",rotateOut:"oneshot",flipX:"oneshot",flipY:"oneshot",bounceIn:"oneshot",bounceOut:"oneshot",shake:"oneshot",wiggle:"oneshot",jello:"oneshot",flash:"oneshot",heartBeat:"oneshot",glideIn:"oneshot",glideOut:"oneshot",dropIn:"oneshot",riseUp:"oneshot",expandIn:"oneshot",collapseOut:"oneshot",expandHeight:"oneshot",fadeSlideUp:"oneshot",blurIn:"oneshot",blurOut:"oneshot",clipUp:"oneshot",clipLeft:"oneshot",zoomIn:"oneshot",zoomOut:"oneshot",springBounce:"oneshot",springScale:"oneshot",springSlideUp:"oneshot",springSlideDown:"oneshot",morphRadius:"oneshot",morphCircle:"oneshot",press:"hoverState",parallax:"scrollLink",parallaxFast:"scrollLink",parallaxReverse:"scrollLink",tiltScroll:"scrollLink",scaleScroll:"scrollLink",lift:"hoverState",sink:"hoverState",grow:"hoverState",glow:"hoverState",shadow:"hoverState",borderPop:"hoverState",tilt:"cursorTrack",tilt3D:"cursorTrack",rotate3D:"cursorTrack",depth:"cursorTrack",float:"continuous",pulse:"continuous",spin:"continuous",ping:"continuous",shimmer:"continuous",ripple:"overlay",burst:"overlay",modalIn:"oneshot",modalOut:"oneshot",popoverIn:"oneshot",popoverOut:"oneshot",toastIn:"oneshot",toastOut:"oneshot",successCheckIn:"oneshot",buttonLoading:"oneshot",focusRingPulse:"continuous",tabPanelIn:"oneshot",tabPanelOut:"oneshot",successToast:"oneshot",checkboxCheck:"oneshot",dialogOut:"oneshot",drawerOutLeft:"oneshot",drawerOutRight:"oneshot",drawerOutTop:"oneshot",drawerOutBottom:"oneshot",menuOut:"oneshot",toastOutRight:"oneshot",toastOutUp:"oneshot",collapseWidth:"oneshot",dismissOut:"oneshot",errorOut:"oneshot",successOut:"oneshot"},i={fadeIn:{in:[{opacity:0,filter:"blur(3px)"},{opacity:1,filter:"blur(0px)"}],out:[{opacity:1,filter:"blur(0px)"},{opacity:0,filter:"blur(3px)"}]},fadeOut:{in:[{opacity:0,filter:"blur(3px)"},{opacity:1,filter:"blur(0px)"}],out:[{opacity:1,filter:"blur(0px)"},{opacity:0,filter:"blur(3px)"}]},fadeSwap:{in:[{opacity:0,transform:"translateY(12px)",filter:"blur(3px)"},{opacity:.72,transform:"translateY(2px)",filter:"blur(0.5px)",offset:.58},{opacity:1,transform:"translateY(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-12px)",filter:"blur(3px)"}]},slideUp:{in:[{opacity:0,transform:"translateY(28px)",filter:"blur(3px)"},{opacity:.76,transform:"translateY(6px)",filter:"blur(0.5px)",offset:.62},{opacity:1,transform:"translateY(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-24px)",filter:"blur(3px)"}]},slideDown:{in:[{opacity:0,transform:"translateY(-28px)",filter:"blur(3px)"},{opacity:.76,transform:"translateY(-6px)",filter:"blur(0.5px)",offset:.62},{opacity:1,transform:"translateY(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(24px)",filter:"blur(3px)"}]},slideLeft:{in:[{opacity:0,transform:"translateX(-28px)",filter:"blur(3px)"},{opacity:.76,transform:"translateX(-6px)",filter:"blur(0.5px)",offset:.62},{opacity:1,transform:"translateX(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateX(0)",filter:"blur(0px)"},{opacity:0,transform:"translateX(-24px)",filter:"blur(3px)"}]},slideRight:{in:[{opacity:0,transform:"translateX(28px)",filter:"blur(3px)"},{opacity:.76,transform:"translateX(6px)",filter:"blur(0.5px)",offset:.62},{opacity:1,transform:"translateX(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateX(0)",filter:"blur(0px)"},{opacity:0,transform:"translateX(24px)",filter:"blur(3px)"}]},scaleIn:{in:[{opacity:0,transform:"scale(0.88)",filter:"blur(2.5px)"},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:0,transform:"scale(0.88)",filter:"blur(2.5px)"}]},scaleOut:{in:[{opacity:0,transform:"scale(0.88)",filter:"blur(2.5px)"},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:0,transform:"scale(0.88)",filter:"blur(2.5px)"}]},popIn:{in:[{opacity:0,transform:"scale(0.9)",filter:"blur(2px)"},{opacity:1,transform:"scale(1.06)",filter:"blur(0px)",offset:.58},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:0,transform:"scale(0.9)",filter:"blur(2px)"}]},popOut:{in:[{opacity:0,transform:"scale(0.9)",filter:"blur(2px)"},{opacity:1,transform:"scale(1.06)",filter:"blur(0px)",offset:.58},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:1,transform:"scale(1.06)",filter:"blur(0px)",offset:.4},{opacity:0,transform:"scale(0.9)",filter:"blur(2px)"}]},rotateIn:{in:[{opacity:0,transform:"rotate(-14deg) scale(0.88)",filter:"blur(3px)"},{opacity:1,transform:"rotate(0deg) scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"rotate(0deg) scale(1)",filter:"blur(0px)"},{opacity:0,transform:"rotate(14deg) scale(0.88)",filter:"blur(3px)"}]},rotateOut:{in:[{opacity:0,transform:"rotate(-14deg) scale(0.88)",filter:"blur(3px)"},{opacity:1,transform:"rotate(0deg) scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"rotate(0deg) scale(1)",filter:"blur(0px)"},{opacity:0,transform:"rotate(14deg) scale(0.88)",filter:"blur(3px)"}]},flipX:{in:[{opacity:0,transform:"perspective(800px) rotateX(-90deg)"},{opacity:1,transform:"perspective(800px) rotateX(0deg)"}],out:[{opacity:1,transform:"perspective(800px) rotateX(0deg)"},{opacity:0,transform:"perspective(800px) rotateX(90deg)"}]},flipY:{in:[{opacity:0,transform:"perspective(800px) rotateY(-90deg)"},{opacity:1,transform:"perspective(800px) rotateY(0deg)"}],out:[{opacity:1,transform:"perspective(800px) rotateY(0deg)"},{opacity:0,transform:"perspective(800px) rotateY(90deg)"}]},bounceIn:{in:[{opacity:0,transform:"scale(0.88)",filter:"blur(2px)"},{opacity:1,transform:"scale(1.07)",filter:"blur(0px)",offset:.52},{opacity:1,transform:"scale(0.97)",filter:"blur(0px)",offset:.74},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:0,transform:"scale(0.88)",filter:"blur(2px)"}]},bounceOut:{in:[{opacity:0,transform:"scale(0.88)",filter:"blur(2px)"},{opacity:1,transform:"scale(1.07)",filter:"blur(0px)",offset:.52},{opacity:1,transform:"scale(0.97)",filter:"blur(0px)",offset:.74},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:1,transform:"scale(1.06)",filter:"blur(0px)",offset:.35},{opacity:0,transform:"scale(0.9)",filter:"blur(2px)"}]},shake:{in:[{opacity:0,transform:"translateX(0)"},{opacity:1,transform:"translateX(-7px)",offset:.18},{opacity:1,transform:"translateX(7px)",offset:.36},{opacity:1,transform:"translateX(-5px)",offset:.56},{opacity:1,transform:"translateX(3px)",offset:.72},{opacity:1,transform:"translateX(0)"}],out:[{opacity:1,transform:"translateX(0)"},{opacity:0,transform:"translateX(-7px)"}]},wiggle:{in:[{opacity:0,transform:"rotate(0deg)"},{opacity:1,transform:"rotate(8deg)",offset:.22},{opacity:1,transform:"rotate(-6deg)",offset:.44},{opacity:1,transform:"rotate(4deg)",offset:.66},{opacity:1,transform:"rotate(-2deg)",offset:.82},{opacity:1,transform:"rotate(0deg)"}],out:[{opacity:1,transform:"rotate(0deg)"},{opacity:0,transform:"rotate(8deg)"}]},jello:{in:[{opacity:0,transform:"scale(1, 1)"},{opacity:1,transform:"scale(1.06, 0.96)",offset:.28},{opacity:1,transform:"scale(0.97, 1.04)",offset:.52},{opacity:1,transform:"scale(1.02, 0.99)",offset:.76},{opacity:1,transform:"scale(1, 1)"}],out:[{opacity:1,transform:"scale(1, 1)"},{opacity:0,transform:"scale(0.9, 0.9)"}]},flash:{in:[{opacity:0},{opacity:.78,offset:.22},{opacity:1,offset:.44},{opacity:.75,offset:.66},{opacity:1,offset:.84},{opacity:1}],out:[{opacity:1},{opacity:0}]},heartBeat:{in:[{opacity:0,transform:"scale(1)"},{opacity:1,transform:"scale(1.12)",offset:.2},{opacity:1,transform:"scale(1)",offset:.38},{opacity:1,transform:"scale(1.12)",offset:.56},{opacity:1,transform:"scale(1)",offset:.72},{opacity:1,transform:"scale(1.06)",offset:.86},{opacity:1,transform:"scale(1)"}],out:[{opacity:1,transform:"scale(1)"},{opacity:0,transform:"scale(0.85)"}]},glideIn:{in:[{opacity:0,transform:"translateY(28px) scale(0.96)",filter:"blur(3px)"},{opacity:.82,transform:"translateY(4px) scale(0.995)",filter:"blur(0.5px)",offset:.62},{opacity:1,transform:"translateY(0) scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0) scale(1)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-22px) scale(0.96)",filter:"blur(3px)"}]},glideOut:{in:[{opacity:0,transform:"translateY(28px) scale(0.96)",filter:"blur(3px)"},{opacity:.82,transform:"translateY(4px) scale(0.995)",filter:"blur(0.5px)",offset:.62},{opacity:1,transform:"translateY(0) scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0) scale(1)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-22px) scale(0.96)",filter:"blur(3px)"}]},dropIn:{in:[{opacity:0,transform:"translateY(-28px)",filter:"blur(4px)"},{opacity:1,transform:"translateY(3px)",filter:"blur(0px)",offset:.68},{opacity:1,transform:"translateY(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-28px)",filter:"blur(4px)"}]},riseUp:{in:[{opacity:0,transform:"translateY(28px)",filter:"blur(4px)"},{opacity:1,transform:"translateY(-3px)",filter:"blur(0px)",offset:.68},{opacity:1,transform:"translateY(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(28px)",filter:"blur(4px)"}]},expandIn:{in:[{opacity:0,transform:"scaleX(0.86)",filter:"blur(2px)"},{opacity:1,transform:"scaleX(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scaleX(1)",filter:"blur(0px)"},{opacity:0,transform:"scaleX(0.86)",filter:"blur(2px)"}]},collapseOut:{in:[{opacity:0,transform:"scaleX(0.86)",filter:"blur(2px)"},{opacity:1,transform:"scaleX(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scaleX(1)",filter:"blur(0px)"},{opacity:0,transform:"scaleX(0.86)",filter:"blur(2px)"}]},expandHeight:{in:[{opacity:0,transform:"scaleY(0.5)"},{opacity:1,transform:"scaleY(1)"}],out:[{opacity:1,transform:"scaleY(1)"},{opacity:0,transform:"scaleY(0.5)"}]},fadeSlideUp:{in:[{opacity:0,transform:"translateY(20px)",filter:"blur(2.5px)"},{opacity:1,transform:"translateY(0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-20px)",filter:"blur(2.5px)"}]},blurIn:{in:[{opacity:0,filter:"blur(6px)"},{opacity:1,filter:"blur(0px)"}],out:[{opacity:1,filter:"blur(0px)"},{opacity:0,filter:"blur(6px)"}]},blurOut:{in:[{opacity:0,filter:"blur(6px)"},{opacity:1,filter:"blur(0px)"}],out:[{opacity:1,filter:"blur(0px)"},{opacity:0,filter:"blur(6px)"}]},clipUp:{in:[{opacity:0,transform:"translateY(14px)",clipPath:"inset(100% 0 0 0)",filter:"blur(2px)"},{opacity:1,transform:"translateY(0)",clipPath:"inset(0 0 0 0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateY(0)",clipPath:"inset(0 0 0 0)",filter:"blur(0px)"},{opacity:0,transform:"translateY(-10px)",clipPath:"inset(0 0 100% 0)",filter:"blur(2px)"}]},clipLeft:{in:[{opacity:0,transform:"translateX(14px)",clipPath:"inset(0 100% 0 0)",filter:"blur(2px)"},{opacity:1,transform:"translateX(0)",clipPath:"inset(0 0 0 0)",filter:"blur(0px)"}],out:[{opacity:1,transform:"translateX(0)",clipPath:"inset(0 0 0 0)",filter:"blur(0px)"},{opacity:0,transform:"translateX(-10px)",clipPath:"inset(0 0 0 100%)",filter:"blur(2px)"}]},zoomIn:{in:[{opacity:0,transform:"scale(0.82)",filter:"blur(3px)"},{opacity:1,transform:"scale(1.03)",filter:"blur(0px)",offset:.62},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:0,transform:"scale(0.82)",filter:"blur(3px)"}]},zoomOut:{in:[{opacity:0,transform:"scale(1.12)",filter:"blur(3px)"},{opacity:1,transform:"scale(1)",filter:"blur(0px)"}],out:[{opacity:1,transform:"scale(1)",filter:"blur(0px)"},{opacity:0,transform:"scale(1.12)",filter:"blur(3px)"}]},springBounce:{in:[{transform:"scale(0.3)",opacity:0,filter:"blur(4px)"},{transform:"scale(1.12)",opacity:1,filter:"blur(0px)",offset:.52},{transform:"scale(0.93)",opacity:1,filter:"blur(0px)",offset:.7},{transform:"scale(1.02)",opacity:1,filter:"blur(0px)",offset:.84},{transform:"scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(1.08)",opacity:.4,filter:"blur(0px)",offset:.28},{transform:"scale(0.3)",opacity:0,filter:"blur(3px)"}]},springScale:{in:[{transform:"scale(0.7)",opacity:0,filter:"blur(3px)"},{transform:"scale(1.08)",opacity:1,filter:"blur(0px)",offset:.58},{transform:"scale(0.96)",opacity:1,filter:"blur(0px)",offset:.78},{transform:"scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.7)",opacity:0,filter:"blur(3px)"}]},springSlideUp:{in:[{transform:"translateY(36px)",opacity:0,filter:"blur(4px)"},{transform:"translateY(-6px)",opacity:1,filter:"blur(0px)",offset:.6},{transform:"translateY(3px)",opacity:1,filter:"blur(0px)",offset:.78},{transform:"translateY(0)",opacity:1,filter:"blur(0px)"}],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(-20px)",opacity:0,filter:"blur(4px)"}]},springSlideDown:{in:[{transform:"translateY(-36px)",opacity:0,filter:"blur(4px)"},{transform:"translateY(6px)",opacity:1,filter:"blur(0px)",offset:.6},{transform:"translateY(-3px)",opacity:1,filter:"blur(0px)",offset:.78},{transform:"translateY(0)",opacity:1,filter:"blur(0px)"}],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(20px)",opacity:0,filter:"blur(4px)"}]},morphRadius:{in:[{borderRadius:"16px",opacity:0,filter:"blur(2px)"},{borderRadius:"0px",opacity:1,filter:"blur(0px)"}],out:[{borderRadius:"0px",opacity:1,filter:"blur(0px)"},{borderRadius:"16px",opacity:0,filter:"blur(2px)"}]},morphCircle:{in:[{borderRadius:"50%",opacity:0,filter:"blur(3px)"},{borderRadius:"8px",opacity:1,filter:"blur(0px)",offset:.52},{borderRadius:"12px",opacity:1,filter:"blur(0px)"}],out:[{borderRadius:"12px",opacity:1,filter:"blur(0px)"},{borderRadius:"50%",opacity:0,filter:"blur(3px)"}]},press:{in:[{transform:"scale(1)",opacity:1},{transform:"scale(0.94)",opacity:1}],out:[{transform:"scale(0.94)",opacity:1},{transform:"scale(1)",opacity:1}]},modalIn:{in:[{transform:"scale(0.88)",opacity:0,filter:"blur(4px)"},{transform:"scale(1.03)",opacity:1,filter:"blur(0px)",offset:.62},{transform:"scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.92)",opacity:0,filter:"blur(3px)"}]},modalOut:{in:[],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.88)",opacity:0,filter:"blur(3px)"}]},popoverIn:{in:[{transform:"scale(0.5)",opacity:0,filter:"blur(4px)"},{transform:"scale(1.06)",opacity:1,filter:"blur(0px)",offset:.68},{transform:"scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.94)",opacity:0,filter:"blur(2px)"}]},popoverOut:{in:[],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.92)",opacity:0,filter:"blur(3px)"}]},toastIn:{in:[{transform:"translateY(-28px)",opacity:0,filter:"blur(3px)"},{transform:"translateY(2px)",opacity:1,filter:"blur(0px)",offset:.68},{transform:"translateY(0)",opacity:1,filter:"blur(0px)"}],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(-14px)",opacity:0,filter:"blur(2.5px)"}]},toastOut:{in:[],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(-14px)",opacity:0,filter:"blur(2.5px)"}]},successCheckIn:{in:[{transform:"scale(0.5)",opacity:0,filter:"blur(4px)"},{transform:"scale(1.1)",opacity:1,filter:"blur(0px)",offset:.52},{transform:"scale(0.93)",opacity:1,filter:"blur(0px)",offset:.74},{transform:"scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.6)",opacity:0,filter:"blur(3px)"}]},buttonLoading:{in:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.95)",opacity:.72,filter:"blur(0px)"},{transform:"scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.96)",opacity:0,filter:"blur(2px)"}]},tabPanelIn:{in:[{transform:"translateX(20px)",opacity:0,filter:"blur(2px)"},{transform:"translateX(0)",opacity:1,filter:"blur(0px)"}],out:[{transform:"translateX(0)",opacity:1,filter:"blur(0px)"},{transform:"translateX(-20px)",opacity:0,filter:"blur(2px)"}]},tabPanelOut:{in:[],out:[{transform:"translateX(0)",opacity:1,filter:"blur(0px)"},{transform:"translateX(-20px)",opacity:0,filter:"blur(2px)"}]},successToast:{in:[{transform:"translateY(28px) scale(0.88)",opacity:0,filter:"blur(3px)"},{transform:"translateY(-2px) scale(1.02)",opacity:1,filter:"blur(0px)",offset:.58},{transform:"translateY(0) scale(1)",opacity:1,filter:"blur(0px)"}],out:[{transform:"translateY(0) scale(1)",opacity:1,filter:"blur(0px)"},{transform:"translateY(-10px) scale(0.98)",opacity:0,filter:"blur(2.5px)"}]},checkboxCheck:{in:[{transform:"scale(0.4) rotate(-50deg)",opacity:0,filter:"blur(3px)"},{transform:"scale(1.15) rotate(0deg)",opacity:1,filter:"blur(0px)",offset:.58},{transform:"scale(1) rotate(0deg)",opacity:1,filter:"blur(0px)"}],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.4)",opacity:0,filter:"blur(2px)"}]},dialogOut:{in:[],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.93)",opacity:0,filter:"blur(2px)"}]},drawerOutLeft:{in:[],out:[{transform:"translateX(0)",opacity:1,filter:"blur(0px)"},{transform:"translateX(-100%)",opacity:0,filter:"blur(3px)"}]},drawerOutRight:{in:[],out:[{transform:"translateX(0)",opacity:1,filter:"blur(0px)"},{transform:"translateX(100%)",opacity:0,filter:"blur(3px)"}]},drawerOutTop:{in:[],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(-100%)",opacity:0,filter:"blur(3px)"}]},drawerOutBottom:{in:[],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(100%)",opacity:0,filter:"blur(3px)"}]},menuOut:{in:[],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(0.93)",opacity:0,filter:"blur(2px)"}]},toastOutRight:{in:[],out:[{transform:"translateX(0)",opacity:1,filter:"blur(0px)"},{transform:"translateX(28px)",opacity:0,filter:"blur(2.5px)"}]},toastOutUp:{in:[],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(-18px)",opacity:0,filter:"blur(2.5px)"}]},dismissOut:{in:[],out:[{transform:"translateY(0)",opacity:1,filter:"blur(0px)"},{transform:"translateY(10px) scale(0.95)",opacity:0,filter:"blur(3px)"}]},errorOut:{in:[],out:[{transform:"translateX(0)",opacity:1,filter:"blur(0px)"},{transform:"translateX(-5px)",opacity:1,offset:.18},{transform:"translateX(5px)",opacity:1,offset:.36},{transform:"translateX(-3px)",opacity:.5,offset:.56},{transform:"translateX(2px)",opacity:.15,filter:"blur(1px)",offset:.76},{transform:"translateX(0)",opacity:0,filter:"blur(2px)"}]},successOut:{in:[],out:[{transform:"scale(1)",opacity:1,filter:"blur(0px)"},{transform:"scale(1.12)",opacity:.35,filter:"blur(1px)",offset:.38},{transform:"scale(0.88)",opacity:0,filter:"blur(3px)"}]},collapseWidth:{in:[],out:[{clipPath:"inset(0 0 0 0)",opacity:1,filter:"blur(0px)"},{clipPath:"inset(0 100% 0 0)",opacity:0,filter:"blur(2px)"}]}};exports.EASE_IN=t;exports.EASE_IN_OUT=a;exports.EASE_OUT=r;exports.SMOOTH=l;exports.SNAPPY=e;exports.SPRING=o;exports.presetCategory=s;exports.presets=i;//# sourceMappingURL=animations.cjs.map
|
|
2
|
+
//# sourceMappingURL=animations.cjs.map
|