@brandonsoccer22/gsap-editorial-carousel 0.1.2 → 0.1.4
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 +7 -2
- package/dist/index.cjs +976 -0
- package/dist/index.cjs.map +1 -0
- package/dist/index.d.cts +80 -0
- package/dist/index.d.ts +80 -0
- package/dist/index.js +971 -0
- package/dist/index.js.map +1 -0
- package/package.json +5 -4
- package/styles.css +3 -2
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ Content editors can add animation classes and data attributes directly in a CMS
|
|
|
8
8
|
## Install
|
|
9
9
|
|
|
10
10
|
```bash
|
|
11
|
-
npm
|
|
11
|
+
npm i @brandonsoccer22/gsap-editorial-carousel gsap
|
|
12
12
|
```
|
|
13
13
|
|
|
14
14
|
## Markup (semantic + user-placed controls)
|
|
@@ -153,17 +153,22 @@ registerAnimation("split-lines-exit", splitLinesExit);
|
|
|
153
153
|
|
|
154
154
|
createCarousel("[data-carousel]", {
|
|
155
155
|
gsap,
|
|
156
|
-
transition: { overlap: 0.05 }
|
|
156
|
+
transition: { overlap: 0.05, exitOverlap: 0.05 }
|
|
157
157
|
});
|
|
158
158
|
```
|
|
159
159
|
|
|
160
|
+
`transition.exitOverlap` controls how much the enter timeline overlaps the exit timeline; defaults to `transition.overlap`.
|
|
161
|
+
|
|
160
162
|
## Data attributes reference
|
|
161
163
|
- `data-seq="1"` sequence group (integer, default 1)
|
|
162
164
|
- `data-exit-seq="1"` exit sequence group (integer, defaults to `data-seq`)
|
|
163
165
|
- `data-dur="0.6"` duration in seconds (default from options)
|
|
164
166
|
- `data-delay="0"` delay in seconds (default 0)
|
|
167
|
+
- `data-exit-dur="0.6"` exit duration in seconds (defaults to `data-dur`)
|
|
168
|
+
- `data-exit-delay="0"` exit delay in seconds (defaults to `data-delay`)
|
|
165
169
|
- `data-at="-=0.4"` position offset in seconds for this element within its sequence; supports `+=`/`-=` or a plain number
|
|
166
170
|
- `data-ease="power2.out"` GSAP ease string
|
|
171
|
+
- `data-exit-ease="power2.out"` exit ease string (defaults to `data-ease`)
|
|
167
172
|
- `data-exit="fade-in"` explicit exit animation name
|
|
168
173
|
|
|
169
174
|
## Reduced motion
|