@emekaugbanu/trigr 0.4.0 → 0.4.1
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/README.md +14 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -6,17 +6,12 @@
|
|
|
6
6
|
- [Landing Page](https://emeka-ugbanu-hub.github.io/Trigr/example) — real-world demo showcasing every feature
|
|
7
7
|
|
|
8
8
|
```bash
|
|
9
|
-
npm install trigr
|
|
9
|
+
npm install @emekaugbanu/trigr
|
|
10
10
|
```
|
|
11
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
12
|
```tsx
|
|
19
|
-
import { Animate } from "trigr/text"
|
|
13
|
+
import { Animate } from "@emekaugbanu/trigr/text"
|
|
14
|
+
```
|
|
20
15
|
|
|
21
16
|
<Animate.Text trigger="change" animation="fadeSwap">
|
|
22
17
|
<span>{label}</span>
|
|
@@ -30,10 +25,10 @@ The import tells trigr what kind of content is being animated. The `trigger` pro
|
|
|
30
25
|
Each module is an independent subpath export. There is no root `import { Animate } from "trigr"` — pick the module you need:
|
|
31
26
|
|
|
32
27
|
```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
|
|
28
|
+
import { Animate } from "@emekaugbanu/trigr/text" // Animate.Text
|
|
29
|
+
import { Animate } from "@emekaugbanu/trigr/block" // Animate.Block, Parallax
|
|
30
|
+
import { Animate } from "@emekaugbanu/trigr/paragraph" // Animate.Paragraph
|
|
31
|
+
import { Animate } from "@emekaugbanu/trigr/list" // Animate.List
|
|
37
32
|
```
|
|
38
33
|
|
|
39
34
|
This keeps the bundle small. Import only the modules you use and bundlers tree-shake the rest.
|
|
@@ -44,8 +39,8 @@ The animation data (presets, easing constants, keyframes) is available without R
|
|
|
44
39
|
|
|
45
40
|
```ts
|
|
46
41
|
// Any framework — no React required
|
|
47
|
-
import { presets, SPRING, SMOOTH } from "trigr/text/keyframes"
|
|
48
|
-
import { presets, presetCategory } from "trigr/block/keyframes"
|
|
42
|
+
import { presets, SPRING, SMOOTH } from "@emekaugbanu/trigr/text/keyframes"
|
|
43
|
+
import { presets, presetCategory } from "@emekaugbanu/trigr/block/keyframes"
|
|
49
44
|
|
|
50
45
|
el.animate(
|
|
51
46
|
presets.fadeSwap.in,
|
|
@@ -206,7 +201,7 @@ For lists, exits fire automatically when a keyed child is removed:
|
|
|
206
201
|
`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
202
|
|
|
208
203
|
```tsx
|
|
209
|
-
import { Animate } from "trigr/text"
|
|
204
|
+
import { Animate } from "@emekaugbanu/trigr/text"
|
|
210
205
|
|
|
211
206
|
// Animate inside a styled child — .stat-value class stays attached
|
|
212
207
|
<Animate.Text trigger="change" animation="odometer">
|
|
@@ -229,7 +224,7 @@ import { Animate } from "trigr/text"
|
|
|
229
224
|
`trigr/paragraph` — 42 presets for prose. Animations use visual-line measurement for morphText and word/line-level effects. The paragraph wrapper stays intact.
|
|
230
225
|
|
|
231
226
|
```tsx
|
|
232
|
-
import { Animate } from "trigr/paragraph"
|
|
227
|
+
import { Animate } from "@emekaugbanu/trigr/paragraph"
|
|
233
228
|
|
|
234
229
|
<Animate.Paragraph trigger="scroll" animation="wordFadeIn" threshold={0.4}>
|
|
235
230
|
<p>Motion should support reading, not interrupt it.</p>
|
|
@@ -251,7 +246,7 @@ import { Animate } from "trigr/paragraph"
|
|
|
251
246
|
`trigr/list` — 55 presets for keyed collections. Handles staggered entrances, item presence (add/remove), reorder animation, parallax, marquee, and exit animations.
|
|
252
247
|
|
|
253
248
|
```tsx
|
|
254
|
-
import { Animate } from "trigr/list"
|
|
249
|
+
import { Animate } from "@emekaugbanu/trigr/list"
|
|
255
250
|
|
|
256
251
|
<Animate.List
|
|
257
252
|
trigger="scroll"
|
|
@@ -282,7 +277,7 @@ import { Animate } from "trigr/list"
|
|
|
282
277
|
`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
278
|
|
|
284
279
|
```tsx
|
|
285
|
-
import { Animate } from "trigr/block"
|
|
280
|
+
import { Animate } from "@emekaugbanu/trigr/block"
|
|
286
281
|
|
|
287
282
|
<Animate.Block trigger="scroll" animation="slideUp" threshold={0.5}>
|
|
288
283
|
<section className="card">Analytics</section>
|
|
@@ -315,7 +310,7 @@ import { Animate } from "trigr/block"
|
|
|
315
310
|
### Parallax
|
|
316
311
|
|
|
317
312
|
```tsx
|
|
318
|
-
import { Parallax } from "trigr/block"
|
|
313
|
+
import { Parallax } from "@emekaugbanu/trigr/block"
|
|
319
314
|
|
|
320
315
|
<Parallax type="parallaxFast" strength={0.4}>
|
|
321
316
|
<img src={hero} alt="" />
|