{"_id":"@ayo0la/scroll-animations","_rev":"2-f6265343f5e1ddabaf677e7f9a860285","name":"@ayo0la/scroll-animations","dist-tags":{"latest":"0.1.1"},"versions":{"0.1.0":{"name":"@ayo0la/scroll-animations","version":"0.1.0","license":"MIT","_id":"@ayo0la/scroll-animations@0.1.0","maintainers":[{"name":"ayo0la","email":"aymorakinyo1@gmail.com"}],"dist":{"shasum":"fdc67a23e756b0b2dbab29f9a9ba0753de33e768","tarball":"https://registry.npmjs.org/@ayo0la/scroll-animations/-/scroll-animations-0.1.0.tgz","fileCount":8,"integrity":"sha512-aJrwZg5qwYOeZfkAxiixvXZBl8YHV4FJbCHCVckx7sU9tqJHqncuD1o6ZqsRddEMa6eN4SoaYyJZs9XLjsPgvA==","signatures":[{"sig":"MEQCIHlOmi/3H/PDZMmCM3nA6XKd08Dvksrw7HGsYGlrl58JAiASScycAe5Ml6AsX4nIZaukuB+xFUvq+ILT7qovWpdZ9A==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":34375},"main":"./dist/index.cjs.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.esm.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"}},"gitHead":"d73d39cf5f694fe1b04154984a6bd5f99dbae287","scripts":{"dev":"tsup --watch","test":"vitest run","build":"tsup","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"_npmUser":{"name":"ayo0la","email":"aymorakinyo1@gmail.com"},"_npmVersion":"10.9.3","description":"Scroll-triggered text and element animations built on GSAP. charStagger, wordStagger, lineStagger, scrollFade, staggerCards.","directories":{},"_nodeVersion":"22.19.0","_hasShrinkwrap":false,"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.0","jsdom":"^24.0.0","vitest":"^1.6.0","typescript":"^5.0.0"},"peerDependencies":{"gsap":">=3.0.0"},"peerDependenciesMeta":{"gsap":{"optional":false}},"_npmOperationalInternal":{"tmp":"tmp/scroll-animations_0.1.0_1775667200968_0.6505233575218135","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@ayo0la/scroll-animations","version":"0.1.1","description":"Scroll-triggered text and element animations built on GSAP. charStagger, wordStagger, lineStagger, scrollFade, staggerCards.","license":"MIT","type":"module","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.esm.js","require":"./dist/index.cjs.js"}},"main":"./dist/index.cjs.js","module":"./dist/index.esm.js","types":"./dist/index.d.ts","scripts":{"build":"tsup","dev":"tsup --watch","test":"vitest run","typecheck":"tsc --noEmit","prepublishOnly":"npm run build"},"peerDependencies":{"gsap":">=3.0.0"},"peerDependenciesMeta":{"gsap":{"optional":false}},"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^1.6.0","jsdom":"^24.0.0"},"_id":"@ayo0la/scroll-animations@0.1.1","gitHead":"1bb07fd1e55708e041cbb0af3953590385dde7da","_nodeVersion":"22.19.0","_npmVersion":"10.9.3","dist":{"integrity":"sha512-+TYsZbboZwHafsY7CaDtSSEY0B2ijmGXQ1g9T10l5Q5JazyZETTeMiaBCUP3dlz6kv0LX4BEan9w5x+I1TFUYw==","shasum":"397794907a2ed53b0c0869352c53b77c5dbb24aa","tarball":"https://registry.npmjs.org/@ayo0la/scroll-animations/-/scroll-animations-0.1.1.tgz","fileCount":8,"unpackedSize":33473,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCYBcdcfGlvyiMUt3OyxEcToAgX6YqB4ZVBoE5TUAzFcwIhAKfFPNmqL4u1H39pqqBf4P0rdgc2tvvCdY3hqpkPlB2a"}]},"_npmUser":{"name":"ayo0la","email":"aymorakinyo1@gmail.com"},"directories":{},"maintainers":[{"name":"ayo0la","email":"aymorakinyo1@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/scroll-animations_0.1.1_1775667364635_0.8265349527322083"},"_hasShrinkwrap":false}},"time":{"created":"2026-04-08T16:53:20.859Z","modified":"2026-04-08T16:56:04.894Z","0.1.0":"2026-04-08T16:53:21.120Z","0.1.1":"2026-04-08T16:56:04.777Z"},"license":"MIT","description":"Scroll-triggered text and element animations built on GSAP. charStagger, wordStagger, lineStagger, scrollFade, staggerCards.","maintainers":[{"name":"ayo0la","email":"aymorakinyo1@gmail.com"}],"readme":"# @ayo0la/scroll-animations\n\nScroll-triggered text and element animations built on GSAP. Named exports: `charStagger`, `wordStagger`, `lineStagger`, `scrollFade`, `staggerCards`.\n\n## Install\n\n```bash\nnpm i @ayo0la/scroll-animations gsap\n```\n\n> **Requires gsap 3+** — install it separately. GSAP is a peer dependency.\n\n## Scope\n\n**Static HTML only.** These functions mutate the DOM at runtime (wrapping characters and words in `<span>` tags). Use them with plain HTML, Astro, Eleventy, or Next.js static export.\n\nDo not target elements inside a React, Vue, or Svelte component tree — the framework will overwrite the injected spans on next render. React/Vue/Svelte users should use GSAP with refs directly.\n\n**SSR safe:** All functions return early when `typeof window === 'undefined'`. Safe to import in Next.js, Nuxt, or SvelteKit builds without guards.\n\n## Usage\n\n```js\nimport { charStagger, wordStagger, lineStagger, scrollFade, staggerCards } from '@ayo0la/scroll-animations'\n\n// Register ScrollTrigger once in your app entry point\nimport { gsap } from 'gsap'\nimport { ScrollTrigger } from 'gsap/ScrollTrigger'\ngsap.registerPlugin(ScrollTrigger)\n\n// Animate each character of a heading\ncharStagger('.hero h1', { stagger: 0.02, delay: 0.3 })\n\n// Animate each word sliding in from left\nwordStagger('.about h2', { stagger: 0.08, x: -40 })\n\n// Animate line by line (element must use <br> for line breaks)\nlineStagger('.mdfld h2', { stagger: 0.12, y: 30 })\n\n// Fade + slide an element into view\nscrollFade('.about p', { y: 30, triggerStart: 'top 80%' })\n\n// Stagger a grid of cards\nstaggerCards('.project-card', { stagger: 0.1, reverse: true })\n```\n\n## Shared options (all functions)\n\n| Option | Type | Default | Notes |\n|---|---|---|---|\n| `duration` | `number` | `0.6` | Tween duration in seconds |\n| `delay` | `number` | `0` | Tween delay in seconds |\n| `ease` | `string` | `'power2.out'` | Any GSAP ease string |\n| `reverse` | `boolean` | `false` | `true` = replay animation on scroll-up |\n| `triggerStart` | `string` | `'top 75%'` | When the animation fires. `'top 80%'` fires later, `'top 60%'` fires earlier. |\n\n## `charStagger(selector, options?)`\n\nWraps each character in a `<span>`. Preserves inline HTML tags.\n\n| Option | Type | Default |\n|---|---|---|\n| `stagger` | `number` | `0.02` |\n| `y` | `number` | `20` |\n| `opacity` | `number` | `0` |\n\n## `wordStagger(selector, options?)`\n\nWraps each word in a `<span>`.\n\n| Option | Type | Default |\n|---|---|---|\n| `stagger` | `number` | `0.08` |\n| `x` | `number` | `-40` |\n| `y` | `number` | `0` |\n| `opacity` | `number` | `0` |\n\n## `lineStagger(selector, options?)`\n\nSplits on `<br>` elements and wraps each line in a `<span>`.\n\n| Option | Type | Default |\n|---|---|---|\n| `stagger` | `number` | `0.12` |\n| `y` | `number` | `30` |\n| `opacity` | `number` | `0` |\n\n## `scrollFade(selector, options?)`\n\nFades and slides the element itself — no DOM splitting.\n\n| Option | Type | Default |\n|---|---|---|\n| `x` | `number` | `0` |\n| `y` | `number` | `30` |\n| `opacity` | `number` | `0` |\n| `scale` | `number` | `1` |\n\n## `staggerCards(selector, options?)`\n\nStaggers all matching elements as a group.\n\n| Option | Type | Default |\n|---|---|---|\n| `stagger` | `number` | `0.1` |\n| `x` | `number` | `0` |\n| `y` | `number` | `40` |\n| `opacity` | `number` | `0` |\n\n## License\n\nMIT\n","readmeFilename":"README.md"}