gsap-timeline-viewer 0.1.8 → 0.1.9
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 +20 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -39,8 +39,8 @@ npm install gsap
|
|
|
39
39
|
import { TimelineViewer } from 'gsap-timeline-viewer';
|
|
40
40
|
import gsap from 'gsap';
|
|
41
41
|
|
|
42
|
-
// Create the viewer -
|
|
43
|
-
TimelineViewer.create();
|
|
42
|
+
// Create the viewer - pass gsap for ES module imports
|
|
43
|
+
TimelineViewer.create({ gsap });
|
|
44
44
|
|
|
45
45
|
// All timelines are auto-detected
|
|
46
46
|
const tl = gsap.timeline({ id: 'My Animation' });
|
|
@@ -58,6 +58,7 @@ Creates and attaches the viewer to the page. Call once - subsequent calls return
|
|
|
58
58
|
|
|
59
59
|
```typescript
|
|
60
60
|
TimelineViewer.create({
|
|
61
|
+
gsap: gsap, // Required for ES module imports, optional for UMD/script tag
|
|
61
62
|
height: 200, // Optional: Initial panel height (default: 200)
|
|
62
63
|
collapsed: false, // Optional: Start collapsed (default: false)
|
|
63
64
|
defaultTimeline: 'My Animation', // Optional: Auto-select this timeline
|
|
@@ -108,6 +109,23 @@ tl.to('.hero', {
|
|
|
108
109
|
});
|
|
109
110
|
```
|
|
110
111
|
|
|
112
|
+
## ES Modules (React, Vue, Astro, etc.)
|
|
113
|
+
|
|
114
|
+
When using gsap as an ES module import, you must pass the gsap instance to the viewer:
|
|
115
|
+
|
|
116
|
+
```javascript
|
|
117
|
+
import gsap from 'gsap';
|
|
118
|
+
import { TimelineViewer } from 'gsap-timeline-viewer';
|
|
119
|
+
|
|
120
|
+
// Pass gsap so the viewer can access globalTimeline
|
|
121
|
+
TimelineViewer.create({ gsap });
|
|
122
|
+
|
|
123
|
+
const tl = gsap.timeline({ id: 'My Animation' });
|
|
124
|
+
tl.to('.box', { x: 100, duration: 1 });
|
|
125
|
+
```
|
|
126
|
+
|
|
127
|
+
This is required because ES module imports don't set `window.gsap`.
|
|
128
|
+
|
|
111
129
|
## UMD / Script Tag
|
|
112
130
|
|
|
113
131
|
```html
|