{"_id":"@brandonsoccer22/gsap-editorial-carousel","_rev":"5-42b80de419637f8891227d4c9ec82cab","name":"@brandonsoccer22/gsap-editorial-carousel","dist-tags":{"latest":"0.1.6"},"versions":{"0.1.2":{"name":"@brandonsoccer22/gsap-editorial-carousel","version":"0.1.2","keywords":["gsap","carousel","animation","typescript"],"license":"MIT","_id":"@brandonsoccer22/gsap-editorial-carousel@0.1.2","maintainers":[{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"}],"homepage":"https://github.com/brandonsoccer22/gsap-editorial-carousel#readme","bugs":{"url":"https://github.com/brandonsoccer22/gsap-editorial-carousel/issues"},"dist":{"shasum":"e19a5d09f872c80256d72f09c9b2c590341fad15","tarball":"https://registry.npmjs.org/@brandonsoccer22/gsap-editorial-carousel/-/gsap-editorial-carousel-0.1.2.tgz","fileCount":4,"integrity":"sha512-AeErjh6SIrm+Oncc1OO5X0CYY4PP1WpYHxVbpDNW9i9iReedBoW1v2ZDfJ4LS0qABWgAFMCC5XkHewqr+U5yNg==","signatures":[{"sig":"MEYCIQDVLuzai2Tt7K4oIQkwnpODhd1ZaTmLHwLWMaXaiG9zxAIhAKcz+uATQMku8x0x3WBvGmEzp0lX6jxFz9AR7Uv6j6JO","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8762},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.cjs"},"./styles.css":"./styles.css"},"gitHead":"520aaecee68d5dfbace6524f98b8b6fa7af4e613","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist"},"_npmUser":{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"},"repository":{"url":"git+https://github.com/brandonsoccer22/gsap-editorial-carousel.git","type":"git"},"_npmVersion":"10.9.2","description":"A small, class-driven GSAP carousel controller with CMS-friendly animations.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.1","typescript":"^5.4.0"},"peerDependencies":{"gsap":"^3.12.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-editorial-carousel_0.1.2_1767491050557_0.6722246615434828","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@brandonsoccer22/gsap-editorial-carousel","version":"0.1.3","keywords":["gsap","carousel","animation","typescript"],"license":"MIT","_id":"@brandonsoccer22/gsap-editorial-carousel@0.1.3","maintainers":[{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"}],"homepage":"https://github.com/brandonsoccer22/gsap-editorial-carousel#readme","bugs":{"url":"https://github.com/brandonsoccer22/gsap-editorial-carousel/issues"},"dist":{"shasum":"f3cd58a6359f537f65438ac9ba22571c733dff6e","tarball":"https://registry.npmjs.org/@brandonsoccer22/gsap-editorial-carousel/-/gsap-editorial-carousel-0.1.3.tgz","fileCount":10,"integrity":"sha512-SWl59NENIELqvXOKzU8hIpe1be7e8c7RKtSaT0/PBgKEKpkg8taS+cpKoW2wMAWUci8k0vSVn7DlYrpF7Z/xtQ==","signatures":[{"sig":"MEUCICqd7um1Ges4vdiUfQ2u6leA7BwObA8Z08ZSVFn8SCy1AiEAxdGlKV2TBVq/aEnLRt7Fe8EolMluwgIM74X8GuEwsFk=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":143776},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./styles.css"},"gitHead":"953c4668031949ff02c98a97b62aa4a849fa9673","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"},"repository":{"url":"git+https://github.com/brandonsoccer22/gsap-editorial-carousel.git","type":"git"},"_npmVersion":"10.9.2","description":"A small, class-driven GSAP carousel controller with CMS-friendly animations.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.1","typescript":"^5.4.0"},"peerDependencies":{"gsap":"^3.12.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-editorial-carousel_0.1.3_1767491888128_0.511625347266957","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@brandonsoccer22/gsap-editorial-carousel","version":"0.1.4","keywords":["gsap","carousel","animation","typescript"],"license":"MIT","_id":"@brandonsoccer22/gsap-editorial-carousel@0.1.4","maintainers":[{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"}],"homepage":"https://github.com/brandonsoccer22/gsap-editorial-carousel#readme","bugs":{"url":"https://github.com/brandonsoccer22/gsap-editorial-carousel/issues"},"dist":{"shasum":"7649536bbc07ef0f937ead721f6e7e524679c218","tarball":"https://registry.npmjs.org/@brandonsoccer22/gsap-editorial-carousel/-/gsap-editorial-carousel-0.1.4.tgz","fileCount":10,"integrity":"sha512-EzKGwsjYDajatNG5eOkryuweKbIYPM0+lLxXaagQ04lnCzptmB59f5mXjbNJt9H/mub+xrLW9DJ1p7dT6GCwCg==","signatures":[{"sig":"MEQCIHbaDc252tddAHSSoUo+qU7ueoBki48K0HEEF++A+UtoAiB1lRKyiuhjTlQdXP90DySisJLG/S0YAEf9hPxmdgCG3w==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":202567},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./styles.css"},"gitHead":"f005c64c0cd1b722fec4d66851118f978b3fb657","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"},"repository":{"url":"git+https://github.com/brandonsoccer22/gsap-editorial-carousel.git","type":"git"},"_npmVersion":"10.9.2","description":"A small, class-driven GSAP carousel controller with CMS-friendly animations.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.1","typescript":"^5.4.0"},"peerDependencies":{"gsap":"^3.12.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-editorial-carousel_0.1.4_1767577073341_0.7938401063103382","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@brandonsoccer22/gsap-editorial-carousel","version":"0.1.5","keywords":["gsap","carousel","animation","typescript"],"license":"MIT","_id":"@brandonsoccer22/gsap-editorial-carousel@0.1.5","maintainers":[{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"}],"homepage":"https://github.com/brandonsoccer22/gsap-editorial-carousel#readme","bugs":{"url":"https://github.com/brandonsoccer22/gsap-editorial-carousel/issues"},"dist":{"shasum":"bce3c52051aee1507343d92d173b5aa9b47389fe","tarball":"https://registry.npmjs.org/@brandonsoccer22/gsap-editorial-carousel/-/gsap-editorial-carousel-0.1.5.tgz","fileCount":10,"integrity":"sha512-fm4qS8NAt/0J86XPV1VCQORn4Gh9DUX68mjPHJmBoSYqJnEgCf8/2T3e5ncyMz2po0GOpnD+tS+gxmi4jsgjLA==","signatures":[{"sig":"MEUCIDugFKqnNMbl+/Hta1LLRzLC7dYIohGyLyEfGdePREUSAiEAmsGLWJie0UAJ1HZhX2hWzAYlh6jkhgMH/Y07O6T9la0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":206044},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./styles.css"},"gitHead":"ee881babffe0340a207d6362ecd72de27154e4f4","scripts":{"dev":"tsup --watch","build":"tsup","clean":"rm -rf dist","prepublishOnly":"npm run build"},"_npmUser":{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"},"repository":{"url":"git+https://github.com/brandonsoccer22/gsap-editorial-carousel.git","type":"git"},"_npmVersion":"10.9.2","description":"A small, class-driven GSAP carousel controller with CMS-friendly animations.","directories":{},"_nodeVersion":"22.14.0","_hasShrinkwrap":false,"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.1","typescript":"^5.4.0"},"peerDependencies":{"gsap":"^3.12.0"},"_npmOperationalInternal":{"tmp":"tmp/gsap-editorial-carousel_0.1.5_1767661576198_0.33387961285185797","host":"s3://npm-registry-packages-npm-production"}},"0.1.6":{"name":"@brandonsoccer22/gsap-editorial-carousel","repository":{"type":"git","url":"git+https://github.com/brandonsoccer22/gsap-editorial-carousel.git"},"version":"0.1.6","description":"A small, class-driven GSAP carousel controller with CMS-friendly animations.","type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.js","require":"./dist/index.cjs"},"./styles.css":"./styles.css"},"scripts":{"build":"tsup","dev":"tsup --watch","clean":"rm -rf dist","prepublishOnly":"npm run build"},"peerDependencies":{"gsap":"^3.12.0"},"devDependencies":{"gsap":"^3.12.0","tsup":"^8.0.1","typescript":"^5.4.0"},"keywords":["gsap","carousel","animation","typescript"],"license":"MIT","_id":"@brandonsoccer22/gsap-editorial-carousel@0.1.6","gitHead":"a8936a5ab23a766d2505fdb2cab4a338b3d90f67","bugs":{"url":"https://github.com/brandonsoccer22/gsap-editorial-carousel/issues"},"homepage":"https://github.com/brandonsoccer22/gsap-editorial-carousel#readme","_nodeVersion":"22.14.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-gVdQiq0ryHcX7qGhtUJG7yvNdwvu7eqiIZSR+Z6gJSZxaa1RIZ4mOWYchX0em9uoPryyrQBfQ9KCvi2KkiN6bw==","shasum":"72d25ae6de5936a9adb5c932a3f1bbe2faac417a","tarball":"https://registry.npmjs.org/@brandonsoccer22/gsap-editorial-carousel/-/gsap-editorial-carousel-0.1.6.tgz","fileCount":10,"unpackedSize":206814,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIHdHTQzpYCNJvImBQL2uiwARD60SYWGtX/bNgh2ZRlNvAiArlmP72if+mq/Ng6DVZGt4FcgyvshD2htp5MpbrHgWuQ=="}]},"_npmUser":{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"},"directories":{},"maintainers":[{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/gsap-editorial-carousel_0.1.6_1767755214444_0.42388229367887353"},"_hasShrinkwrap":false}},"time":{"created":"2026-01-04T01:44:10.459Z","modified":"2026-01-07T03:06:54.769Z","0.1.2":"2026-01-04T01:44:10.686Z","0.1.3":"2026-01-04T01:58:08.254Z","0.1.4":"2026-01-05T01:37:53.493Z","0.1.5":"2026-01-06T01:06:16.343Z","0.1.6":"2026-01-07T03:06:54.602Z"},"bugs":{"url":"https://github.com/brandonsoccer22/gsap-editorial-carousel/issues"},"license":"MIT","homepage":"https://github.com/brandonsoccer22/gsap-editorial-carousel#readme","keywords":["gsap","carousel","animation","typescript"],"repository":{"type":"git","url":"git+https://github.com/brandonsoccer22/gsap-editorial-carousel.git"},"description":"A small, class-driven GSAP carousel controller with CMS-friendly animations.","maintainers":[{"name":"brandonsoccer22","email":"brandonsoccer22@gmail.com"}],"readme":"# @brandonsoccer22/gsap-editorial-carousel\n\nA small, class-driven GSAP carousel controller that wires state, accessibility, and animation sequencing without enforcing layout. You own the markup and CSS; the library handles wiring, timelines, and dot cloning.\n\n## Install\n\n```bash\nnpm i @brandonsoccer22/gsap-editorial-carousel gsap\n```\n\n## Quick start\n\n```html\n
\n
\n \n \n
\n\n
\n
\n

Headline

\n

Description

\n
\n\n
\n

Second

\n

More copy

\n
\n
\n\n
\n \n
\n
\n```\n\n```ts\nimport \"@brandonsoccer22/gsap-editorial-carousel/styles.css\";\nimport { createCarousel } from \"@brandonsoccer22/gsap-editorial-carousel\";\n\nconst carousel = createCarousel(\"[data-carousel]\", {\n loop: true,\n initialIndex: 0\n});\n\ncarousel.next();\ncarousel.goTo(2, { immediate: false });\n```\n\n- The base stylesheet only controls slide visibility (`.is-active`) and disabled controls; layout remains yours.\n- Add `.gsap-carousel__stack` to stack slides (positioned absolute) while keeping the active slide in flow.\n\n## Exports\n\n```ts\ncreateCarousel(root, options?): CarouselInstance\nregisterGsapPlugins(...plugins): void\nregisterAnimation(name, factory): void\nregisterAnimations(map): void\n```\n\nTypes are also exported: `CarouselOptions`, `CarouselInstance`, `AnimationFactory`, `AnimationFactoryContext`.\n\n## createCarousel(root, options?)\n\n### root\n`string | Element` \nIf a selector string is provided and no element is found, an error is thrown. The resolved root is forced to be focusable (`tabindex=\"0\"` is added if missing).\n\n### options\n\nAll options are optional; defaults are shown.\n\n#### loop\n`boolean` \nDefault: `true` \nWraps index changes at the ends. When `false`, indices are clamped.\n\n#### initialIndex\n`number` \nDefault: `0` \nStarting slide index.\n\n#### gsap\n`typeof gsap` \nDefault: the imported `gsap` instance. \nUseful when you are providing a custom GSAP bundle.\n\n#### selectors\n```ts\n{\n root: \"[data-carousel]\",\n slide: \"[data-carousel-slide], .gsap-carousel__slide\",\n prev: \"[data-carousel-prev]\",\n next: \"[data-carousel-next]\",\n dots: \"[data-carousel-dots]\",\n dotTemplate: \"[data-carousel-dot-template]\"\n}\n```\nSelectors are scoped to the root. If the root has an `id`, `prev`, `next`, and `dots` can live outside the root by adding `data-for=\"root-id\"` to the controls container.\n\n#### classNames\n```ts\n{\n activeSlide: \"is-active\",\n animatingRoot: \"is-animating\",\n disabledControl: \"is-disabled\",\n dot: \"gsap-carousel__dot\",\n activeDot: \"is-active\"\n}\n```\n\n#### defaults\n```ts\n{\n dur: 0.6,\n ease: \"power2.out\"\n}\n```\nThese are per-element defaults for animations when no data attribute overrides are provided.\n\n#### transition\n```ts\n{\n overlap: 0,\n exitOverlap?: number\n}\n```\n`overlap` defines how much the enter timeline overlaps the exit timeline. \n`exitOverlap` (if provided) overrides `overlap` for exit/enter overlap calculations. Values are clamped to `>= 0`.\n\n#### onInit\n`(instance: CarouselInstance) => void` \nCalled after initialization.\n\n#### onBeforeChange\n`({ from, to, direction }) => void` \nCalled before an animated change begins. `direction` is `1` or `-1`.\n\n#### onAfterChange\n`({ from, to, direction }) => void` \nCalled after the change completes (or immediately if reduced motion or `immediate`).\n\n## CarouselInstance\n\n```ts\ninterface CarouselInstance {\n goTo(index: number, opts?: { immediate?: boolean }): void\n next(opts?: { immediate?: boolean }): void\n prev(opts?: { immediate?: boolean }): void\n destroy(): void\n getIndex(): number\n getCount(): number\n isAnimating(): boolean\n}\n```\n\n`immediate: true` skips animation and updates state synchronously.\n\n## Animation system\n\nElements opt into animation by adding a class name that matches a registered animation. If multiple class names match registered animations, the first match in `classList` order wins.\n\n### Built-in animations\n\n- `fade-in`\n- `fade-out`\n- `fade-up`\n- `fade-up-in`\n- `fade-up-out`\n- `fade-down`\n- `fade-down-in`\n- `fade-down-out`\n- `fade-start-in`\n- `fade-start-out`\n- `fade-end-in`\n- `fade-end-out`\n- `slide-in`\n- `slide-out`\n\n`slide-in` and `slide-out` are direction-aware (left/right based on navigation direction).\n\n### AnimationFactory\n\n```ts\ntype AnimationFactoryContext = {\n el: Element\n tl: gsap.core.Timeline\n gsap: typeof gsap\n opts: {\n dur: number\n delay: number\n ease?: string\n direction: 1 | -1\n at: number\n }\n}\n\ntype AnimationFactory = (ctx: AnimationFactoryContext) => void\n```\n\nFactories may also define a `reverse` method, which is used for exit animations when no explicit `data-exit` animation is provided.\n\n### Registering animations\n\n```ts\nimport { registerAnimation } from \"@brandonsoccer22/gsap-editorial-carousel\";\nimport type { AnimationFactory } from \"@brandonsoccer22/gsap-editorial-carousel\";\n\nconst popIn: AnimationFactory = ({ el, tl, opts }) => {\n tl.fromTo(\n el,\n { scale: 0.9, autoAlpha: 0 },\n { scale: 1, autoAlpha: 1, duration: opts.dur, delay: opts.delay, ease: opts.ease },\n opts.at\n );\n};\n\npopIn.reverse = ({ el, tl, opts }) => {\n tl.to(el, { scale: 0.98, autoAlpha: 0, duration: opts.dur, delay: opts.delay }, opts.at);\n};\n\nregisterAnimation(\"pop-in\", popIn);\n```\n\n### Sequence + data attributes\n\nElements are grouped into sequence buckets and played in order. Within each sequence, elements can offset their start position using `data-at`.\n\n- `data-seq=\"1\"` sequence group (integer, default 1)\n- `data-exit-seq=\"1\"` exit sequence group (integer, defaults to `data-seq`)\n- `data-dur=\"0.6\"` duration in seconds (default from options)\n- `data-delay=\"0\"` delay in seconds (default 0)\n- `data-exit-dur=\"0.6\"` exit duration in seconds (defaults to `data-dur`)\n- `data-exit-delay=\"0\"` exit delay in seconds (defaults to `data-delay`)\n- `data-at=\"-=0.4\"` position offset in seconds for this element within its sequence\n- `data-exit-at=\"-=0.2\"` exit position offset in seconds (defaults to `data-at`)\n- `data-ease=\"power2.out\"` GSAP ease string\n- `data-exit-ease=\"power2.out\"` exit ease string (defaults to `data-ease`)\n- `data-exit=\"fade-in\"` explicit exit animation name\n\n`data-at` and `data-exit-at` support absolute values (`0.2`) or relative offsets (`+=0.1`, `-=0.1`).\n\n## Dots + controls\n\n- `data-carousel-dot-template` is cloned once per slide and hidden (`template.hidden = true`).\n- Generated dots receive `data-carousel-dot=\"true\"` and `data-carousel-dot-index`.\n- Re-initialization clears previously generated dots.\n- Add `data-carousel-disable-opacity` to the dot template to avoid the `.is-disabled` opacity rule.\n\nControls (`data-carousel-prev`, `data-carousel-next`) can be placed anywhere inside the root. If you need controls outside, add an `id` to the root and a matching `data-for=\"id\"` on the control.\n\n## Reduced motion\n\nIf `prefers-reduced-motion: reduce` is enabled, slide switching happens immediately and element-level animations are skipped.\n\n## Destroy\n\n```ts\ncarousel.destroy();\n```\n\n`destroy()` removes listeners, kills active timelines, reverts GSAP context, and removes generated dots (the template is unhidden).\n\n## Examples\n\n- Basic setup: `examples/basic`\n- Tailwind variant: `examples/tailwind`\n\n## More examples\n\n### Custom selectors + class names\n\n```ts\ncreateCarousel(\".my-carousel\", {\n selectors: {\n root: \".my-carousel\",\n slide: \".my-slide\",\n prev: \".my-prev\",\n next: \".my-next\",\n dots: \".my-dots\",\n dotTemplate: \".my-dot-template\"\n },\n classNames: {\n activeSlide: \"is-active\",\n animatingRoot: \"is-animating\",\n disabledControl: \"is-disabled\",\n dot: \"my-dot\",\n activeDot: \"is-active\"\n }\n});\n```\n\n### Custom transition overlap\n\n```ts\ncreateCarousel(\"[data-carousel]\", {\n transition: {\n overlap: 0.15,\n exitOverlap: 0.1\n }\n});\n```\n\n### SplitText + overlap sequencing\n\n```ts\nimport SplitText from \"gsap/SplitText\";\nimport { createCarousel, registerAnimation, registerGsapPlugins } from \"@brandonsoccer22/gsap-editorial-carousel\";\nimport type { AnimationFactory } from \"@brandonsoccer22/gsap-editorial-carousel\";\n\nregisterGsapPlugins(SplitText);\n\nconst splitLines: AnimationFactory = ({ el, tl, gsap, opts }) => {\n const split = new SplitText(el, { type: \"lines\" });\n gsap.set(split.lines, { yPercent: -120, opacity: 0 });\n tl.to(split.lines, { yPercent: 0, opacity: 1, duration: opts.dur, ease: opts.ease, stagger: 0.06 }, opts.at);\n tl.add(() => split.revert(), \">\");\n};\n\nregisterAnimation(\"split-lines\", splitLines);\n\ncreateCarousel(\"[data-carousel]\", {\n transition: { overlap: 0.05, exitOverlap: 0.05 }\n});\n```\n","readmeFilename":"README.md"}