animotionjs-plus 1.1.0
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/LICENSE +0 -0
- package/README.md +337 -0
- package/dist/animotion.min.css +148 -0
- package/dist/animotion.min.js +1 -0
- package/package.json +100 -0
package/LICENSE
ADDED
|
File without changes
|
package/README.md
ADDED
|
@@ -0,0 +1,337 @@
|
|
|
1
|
+
# Animotion-js
|
|
2
|
+
|
|
3
|
+
Animotion is a custom web animation engine for Vanilla JS, React, and Next.js.
|
|
4
|
+
|
|
5
|
+
It now supports:
|
|
6
|
+
|
|
7
|
+
- direct JS tweens and timelines
|
|
8
|
+
- declarative `am-*` custom attributes
|
|
9
|
+
- DOM, CSS, CSS variables, transforms, filters, and scroll properties
|
|
10
|
+
- plain objects and nested property paths
|
|
11
|
+
- Three.js objects and scene state
|
|
12
|
+
- Lottie and dotLottie playback control
|
|
13
|
+
- scoped animation contexts for framework apps
|
|
14
|
+
|
|
15
|
+
## Core Setup Modes
|
|
16
|
+
|
|
17
|
+
You can use Animotion in 3 main ways:
|
|
18
|
+
|
|
19
|
+
1. Imperative JS with `Animotion.to()`, `Animotion.from()`, `Animotion.timeline()`
|
|
20
|
+
2. Declarative custom attributes with `am-*`
|
|
21
|
+
3. Scoped attribute hydration in React/Next with hooks
|
|
22
|
+
|
|
23
|
+
## Installation
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install animotion-js
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Optional peer integrations:
|
|
30
|
+
|
|
31
|
+
- `three`
|
|
32
|
+
- `@lottiefiles/dotlottie-web`
|
|
33
|
+
|
|
34
|
+
## Main API
|
|
35
|
+
|
|
36
|
+
```js
|
|
37
|
+
import Animotion from 'animotion-js';
|
|
38
|
+
import 'animotion-js/styles.css';
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
Available top-level methods:
|
|
42
|
+
|
|
43
|
+
- `Animotion.init()`
|
|
44
|
+
- `Animotion.initAttributes()`
|
|
45
|
+
- `Animotion.to()`
|
|
46
|
+
- `Animotion.from()`
|
|
47
|
+
- `Animotion.fromTo()`
|
|
48
|
+
- `Animotion.set()`
|
|
49
|
+
- `Animotion.tween()`
|
|
50
|
+
- `Animotion.timeline()`
|
|
51
|
+
- `Animotion.context()`
|
|
52
|
+
- `Animotion.interactions()`
|
|
53
|
+
- `Animotion.lottie()`
|
|
54
|
+
- `Animotion.dotLottie()`
|
|
55
|
+
- `Animotion.animotionAttrs()`
|
|
56
|
+
|
|
57
|
+
## Supported Property Scenarios
|
|
58
|
+
|
|
59
|
+
Animotion can tween:
|
|
60
|
+
|
|
61
|
+
- regular CSS properties like `opacity`, `backgroundColor`, `boxShadow`, `clipPath`, `borderRadius`
|
|
62
|
+
- transform aliases like `x`, `y`, `z`, `scale`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`, `rotateZ`
|
|
63
|
+
- filter aliases like `blur`, `brightness`, `contrast`, `grayscale`, `hueRotate`, `invert`, `saturate`, `sepia`
|
|
64
|
+
- CSS custom properties like `--brand-hue`
|
|
65
|
+
- DOM properties like `scrollTop`, `scrollLeft`, `value`
|
|
66
|
+
- attributes with `attr.data-state`
|
|
67
|
+
- nested object paths like `position.x`, `rotation.y`, `material.opacity`, `camera.position.z`
|
|
68
|
+
- plain JS state objects used for counters, controllers, and render loops
|
|
69
|
+
- Three.js object trees
|
|
70
|
+
- Lottie and dotLottie playhead/frame/progress control
|
|
71
|
+
|
|
72
|
+
Interpolation currently covers:
|
|
73
|
+
|
|
74
|
+
- numbers
|
|
75
|
+
- unit strings
|
|
76
|
+
- colors
|
|
77
|
+
- arrays
|
|
78
|
+
- nested objects
|
|
79
|
+
- complex CSS-like strings containing numbers
|
|
80
|
+
|
|
81
|
+
## Vanilla JS
|
|
82
|
+
|
|
83
|
+
```js
|
|
84
|
+
Animotion.to('.card', {
|
|
85
|
+
opacity: 1,
|
|
86
|
+
y: '0px',
|
|
87
|
+
rotateY: '0deg',
|
|
88
|
+
backgroundColor: '#111827',
|
|
89
|
+
boxShadow: '0 24px 80px rgba(0, 0, 0, 0.35)'
|
|
90
|
+
}, {
|
|
91
|
+
duration: 1.2,
|
|
92
|
+
ease: 'expo-out',
|
|
93
|
+
stagger: 0.08
|
|
94
|
+
});
|
|
95
|
+
|
|
96
|
+
Animotion.fromTo('.meter', {
|
|
97
|
+
'--fill': '0%'
|
|
98
|
+
}, {
|
|
99
|
+
'--fill': '100%'
|
|
100
|
+
}, {
|
|
101
|
+
duration: 1.4
|
|
102
|
+
});
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Timelines
|
|
106
|
+
|
|
107
|
+
```js
|
|
108
|
+
const timeline = Animotion.timeline({ autoplay: false })
|
|
109
|
+
.addLabel('intro')
|
|
110
|
+
.from('.hero-title', { opacity: 0, y: '60px' }, 0.9, 'expo-out', 'intro')
|
|
111
|
+
.from('.hero-copy', { opacity: 0, y: '30px' }, 0.7, 'expo-out', 'intro+=0.15')
|
|
112
|
+
.to('.hero-card', { rotateY: '14deg', z: '24px' }, 1.2, 'ease-in-out', 'intro+=0.2')
|
|
113
|
+
.set('.badge', { opacity: 1 }, 'intro+=0.4')
|
|
114
|
+
.call(() => console.log('intro complete'), 'intro+=1');
|
|
115
|
+
|
|
116
|
+
timeline.play();
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## The Declarative `am-*` Attribute System
|
|
120
|
+
|
|
121
|
+
Animotion now supports a custom attribute workflow built around the `am-*` prefix.
|
|
122
|
+
|
|
123
|
+
You can hydrate it with:
|
|
124
|
+
|
|
125
|
+
```js
|
|
126
|
+
Animotion.initAttributes();
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
or:
|
|
130
|
+
|
|
131
|
+
```js
|
|
132
|
+
Animotion.init({ root: document, attributePrefix: 'am' });
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### Base Motion Attributes
|
|
136
|
+
|
|
137
|
+
- `am`
|
|
138
|
+
- `am-id`
|
|
139
|
+
- `am-target`
|
|
140
|
+
- `am-to`
|
|
141
|
+
- `am-from`
|
|
142
|
+
- `am-set`
|
|
143
|
+
- `am-options`
|
|
144
|
+
- `am-duration`
|
|
145
|
+
- `am-delay`
|
|
146
|
+
- `am-ease`
|
|
147
|
+
- `am-repeat`
|
|
148
|
+
- `am-yoyo`
|
|
149
|
+
- `am-stagger`
|
|
150
|
+
|
|
151
|
+
### Trigger Attributes
|
|
152
|
+
|
|
153
|
+
- `am-on="load"`
|
|
154
|
+
- `am-on="click"`
|
|
155
|
+
- `am-on="mouseenter"`
|
|
156
|
+
- `am-on="focus"`
|
|
157
|
+
- `am-on="pointerdown"`
|
|
158
|
+
- `am-on="inview"`
|
|
159
|
+
- `am-on="click,mouseenter"`
|
|
160
|
+
- `am-once="true"`
|
|
161
|
+
- `am-prevent-default="true"`
|
|
162
|
+
|
|
163
|
+
### Timeline Attributes
|
|
164
|
+
|
|
165
|
+
- `am-timeline="hero"`
|
|
166
|
+
- `am-timeline-auto="true"`
|
|
167
|
+
- `am-timeline-options='{"repeat":1}'`
|
|
168
|
+
- `am-position=">"`
|
|
169
|
+
- `am-position="intro+=0.2"`
|
|
170
|
+
- `am-label="intro"`
|
|
171
|
+
- `am-control="hero"`
|
|
172
|
+
- `am-action="play"`
|
|
173
|
+
|
|
174
|
+
### Scroll / Scene Attributes
|
|
175
|
+
|
|
176
|
+
- `am-scroll='{"start":"top center","once":true}'`
|
|
177
|
+
- `am-scroll='{"scrub":true}'`
|
|
178
|
+
- `am-mouse='{"movement":24,"duration":0.35}'`
|
|
179
|
+
- `am-parallax="0.35"`
|
|
180
|
+
- `am-parallax-options='{"axis":"x","speed":0.2}'`
|
|
181
|
+
- `am-draggable='{"lockAxis":"x"}'`
|
|
182
|
+
|
|
183
|
+
### Text / Media Attributes
|
|
184
|
+
|
|
185
|
+
- `am-split="chars"`
|
|
186
|
+
- `am-split="words"`
|
|
187
|
+
- `am-split="lines"`
|
|
188
|
+
- `am-split-target="chars"`
|
|
189
|
+
- `am-lottie="/animations/hero.json"`
|
|
190
|
+
- `am-lottie-options='{"loop":false,"renderer":"svg"}'`
|
|
191
|
+
- `am-lottie-on="inview"`
|
|
192
|
+
- `am-lottie-action="play"`
|
|
193
|
+
- `am-lottie-progress="0.65"`
|
|
194
|
+
- `am-lottie-frame="120"`
|
|
195
|
+
- `am-lottie-segment="40,120"`
|
|
196
|
+
- `am-dotlottie="/animations/hero.lottie"`
|
|
197
|
+
- `am-dotlottie-options='{"loop":true}'`
|
|
198
|
+
- `am-dotlottie-on="click"`
|
|
199
|
+
|
|
200
|
+
## HTML Example
|
|
201
|
+
|
|
202
|
+
```html
|
|
203
|
+
<section am am-target=".card" am-from='{"opacity":0,"y":"60px","scale":0.92}' am-to='{"opacity":1,"y":"0px","scale":1}' am-duration="1" am-stagger="0.08">
|
|
204
|
+
<article class="card">One</article>
|
|
205
|
+
<article class="card">Two</article>
|
|
206
|
+
<article class="card">Three</article>
|
|
207
|
+
</section>
|
|
208
|
+
|
|
209
|
+
<button am-control="hero" am-action="play" am-on="click">Play Timeline</button>
|
|
210
|
+
|
|
211
|
+
<div am-scroll='{"scrub":true}' am-to='{"rotateY":"20deg","x":"80px"}'></div>
|
|
212
|
+
|
|
213
|
+
<h1 am am-split="chars" am-split-target="chars" am-from='{"opacity":0,"y":"40px"}' am-to='{"opacity":1,"y":"0px"}' am-stagger="0.03"></h1>
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
## React Setup
|
|
217
|
+
|
|
218
|
+
Use scoped hydration:
|
|
219
|
+
|
|
220
|
+
```jsx
|
|
221
|
+
import { useAnimotionAttributes, animotionAttrs } from 'animotion-js/react';
|
|
222
|
+
import 'animotion-js/styles.css';
|
|
223
|
+
|
|
224
|
+
export function Hero() {
|
|
225
|
+
const scopeRef = useAnimotionAttributes({}, []);
|
|
226
|
+
|
|
227
|
+
return (
|
|
228
|
+
<section ref={scopeRef}>
|
|
229
|
+
<h1
|
|
230
|
+
{...animotionAttrs({
|
|
231
|
+
split: 'chars',
|
|
232
|
+
splitTarget: 'chars',
|
|
233
|
+
from: { opacity: 0, y: '48px' },
|
|
234
|
+
to: { opacity: 1, y: '0px' },
|
|
235
|
+
duration: 0.9,
|
|
236
|
+
stagger: 0.03
|
|
237
|
+
})}
|
|
238
|
+
>
|
|
239
|
+
Animotion
|
|
240
|
+
</h1>
|
|
241
|
+
|
|
242
|
+
<div
|
|
243
|
+
{...animotionAttrs({
|
|
244
|
+
on: 'mouseenter',
|
|
245
|
+
from: { scale: 1 },
|
|
246
|
+
to: { scale: 1.08, rotateY: '8deg' },
|
|
247
|
+
duration: 0.4
|
|
248
|
+
})}
|
|
249
|
+
/>
|
|
250
|
+
</section>
|
|
251
|
+
);
|
|
252
|
+
}
|
|
253
|
+
```
|
|
254
|
+
|
|
255
|
+
## Next.js Setup
|
|
256
|
+
|
|
257
|
+
```jsx
|
|
258
|
+
'use client';
|
|
259
|
+
|
|
260
|
+
import { useAnimotionAttributes, animotionAttrs } from 'animotion-js/next';
|
|
261
|
+
import 'animotion-js/styles.css';
|
|
262
|
+
|
|
263
|
+
export default function Page() {
|
|
264
|
+
const scopeRef = useAnimotionAttributes({}, []);
|
|
265
|
+
|
|
266
|
+
return (
|
|
267
|
+
<main ref={scopeRef}>
|
|
268
|
+
<canvas
|
|
269
|
+
{...animotionAttrs({
|
|
270
|
+
dotlottie: '/animations/hero.lottie',
|
|
271
|
+
dotlottieOn: 'inview',
|
|
272
|
+
dotlottieAction: 'play'
|
|
273
|
+
})}
|
|
274
|
+
/>
|
|
275
|
+
</main>
|
|
276
|
+
);
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
## Three.js
|
|
281
|
+
|
|
282
|
+
```js
|
|
283
|
+
Animotion.to(mesh, {
|
|
284
|
+
position: { x: 3, y: 1.5, z: -2 },
|
|
285
|
+
rotation: { y: Math.PI * 1.5 },
|
|
286
|
+
material: { opacity: 0.4, color: '#22c55e' }
|
|
287
|
+
}, {
|
|
288
|
+
duration: 1.6,
|
|
289
|
+
ease: 'ease-in-out',
|
|
290
|
+
render: () => renderer.render(scene, camera)
|
|
291
|
+
});
|
|
292
|
+
```
|
|
293
|
+
|
|
294
|
+
## Lottie
|
|
295
|
+
|
|
296
|
+
```js
|
|
297
|
+
const lottie = Animotion.lottie({
|
|
298
|
+
container: document.querySelector('#lottie'),
|
|
299
|
+
renderer: 'svg',
|
|
300
|
+
loop: false,
|
|
301
|
+
autoplay: false,
|
|
302
|
+
path: '/animations/hero.json'
|
|
303
|
+
});
|
|
304
|
+
|
|
305
|
+
lottie.tweenToProgress(0.75, {
|
|
306
|
+
duration: 1.2,
|
|
307
|
+
ease: 'ease-in-out'
|
|
308
|
+
});
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
## dotLottie
|
|
312
|
+
|
|
313
|
+
```js
|
|
314
|
+
const dotLottie = Animotion.dotLottie({
|
|
315
|
+
canvas: document.querySelector('#dotlottie'),
|
|
316
|
+
src: '/animations/hero.lottie',
|
|
317
|
+
autoplay: false,
|
|
318
|
+
loop: true
|
|
319
|
+
});
|
|
320
|
+
|
|
321
|
+
dotLottie.setSpeed(1.2).play();
|
|
322
|
+
```
|
|
323
|
+
|
|
324
|
+
## Notes
|
|
325
|
+
|
|
326
|
+
- Legacy `data-anim-*` attributes still work.
|
|
327
|
+
- The new recommended declarative setup is `am-*`.
|
|
328
|
+
- React and Next can use the same attribute model via `animotionAttrs()`.
|
|
329
|
+
- `npm test` currently passes with no tests because the repo still has no actual Jest test suite.
|
|
330
|
+
|
|
331
|
+
## Commands
|
|
332
|
+
|
|
333
|
+
```bash
|
|
334
|
+
npm run lint
|
|
335
|
+
npm test
|
|
336
|
+
npm run build
|
|
337
|
+
```
|
|
@@ -0,0 +1,148 @@
|
|
|
1
|
+
/* Animotion Styles */
|
|
2
|
+
|
|
3
|
+
/* Reset animations */
|
|
4
|
+
[data-anim] {
|
|
5
|
+
will-change: transform, opacity;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
/* Split text */
|
|
9
|
+
[data-anim-split-text] {
|
|
10
|
+
line-height: 1.2;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
/* Draggable */
|
|
14
|
+
[data-anim-draggable] {
|
|
15
|
+
touch-action: none;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* Smooth scroll behavior */
|
|
19
|
+
html {
|
|
20
|
+
scroll-behavior: smooth;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Utility classes */
|
|
24
|
+
.is-visible {
|
|
25
|
+
opacity: 1 !important;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.is-hidden {
|
|
29
|
+
opacity: 0 !important;
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.is-animating {
|
|
34
|
+
pointer-events: none;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/* Animations */
|
|
38
|
+
@keyframes fadeIn {
|
|
39
|
+
from {
|
|
40
|
+
opacity: 0;
|
|
41
|
+
}
|
|
42
|
+
to {
|
|
43
|
+
opacity: 1;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
@keyframes slideUp {
|
|
48
|
+
from {
|
|
49
|
+
transform: translateY(30px);
|
|
50
|
+
opacity: 0;
|
|
51
|
+
}
|
|
52
|
+
to {
|
|
53
|
+
transform: translateY(0);
|
|
54
|
+
opacity: 1;
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
@keyframes slideDown {
|
|
59
|
+
from {
|
|
60
|
+
transform: translateY(-30px);
|
|
61
|
+
opacity: 0;
|
|
62
|
+
}
|
|
63
|
+
to {
|
|
64
|
+
transform: translateY(0);
|
|
65
|
+
opacity: 1;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@keyframes slideLeft {
|
|
70
|
+
from {
|
|
71
|
+
transform: translateX(30px);
|
|
72
|
+
opacity: 0;
|
|
73
|
+
}
|
|
74
|
+
to {
|
|
75
|
+
transform: translateX(0);
|
|
76
|
+
opacity: 1;
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@keyframes slideRight {
|
|
81
|
+
from {
|
|
82
|
+
transform: translateX(-30px);
|
|
83
|
+
opacity: 0;
|
|
84
|
+
}
|
|
85
|
+
to {
|
|
86
|
+
transform: translateX(0);
|
|
87
|
+
opacity: 1;
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
@keyframes scale {
|
|
92
|
+
from {
|
|
93
|
+
transform: scale(0.9);
|
|
94
|
+
opacity: 0;
|
|
95
|
+
}
|
|
96
|
+
to {
|
|
97
|
+
transform: scale(1);
|
|
98
|
+
opacity: 1;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
@keyframes rotate {
|
|
103
|
+
from {
|
|
104
|
+
transform: rotate(-10deg);
|
|
105
|
+
opacity: 0;
|
|
106
|
+
}
|
|
107
|
+
to {
|
|
108
|
+
transform: rotate(0);
|
|
109
|
+
opacity: 1;
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
/* Utility animation classes */
|
|
114
|
+
.animate-fade-in {
|
|
115
|
+
animation: fadeIn 0.6s ease-out forwards;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.animate-slide-up {
|
|
119
|
+
animation: slideUp 0.6s ease-out forwards;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.animate-slide-down {
|
|
123
|
+
animation: slideDown 0.6s ease-out forwards;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.animate-slide-left {
|
|
127
|
+
animation: slideLeft 0.6s ease-out forwards;
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.animate-slide-right {
|
|
131
|
+
animation: slideRight 0.6s ease-out forwards;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
.animate-scale {
|
|
135
|
+
animation: scale 0.6s ease-out forwards;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.animate-rotate {
|
|
139
|
+
animation: rotate 0.6s ease-out forwards;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* Stagger animation delays */
|
|
143
|
+
[data-stagger-delay="0"] { animation-delay: 0s; }
|
|
144
|
+
[data-stagger-delay="1"] { animation-delay: 0.1s; }
|
|
145
|
+
[data-stagger-delay="2"] { animation-delay: 0.2s; }
|
|
146
|
+
[data-stagger-delay="3"] { animation-delay: 0.3s; }
|
|
147
|
+
[data-stagger-delay="4"] { animation-delay: 0.4s; }
|
|
148
|
+
[data-stagger-delay="5"] { animation-delay: 0.5s; }
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Animotion=e():t.Animotion=e()}(this,function(){return function(){"use strict";var t={d:function(e,r){for(var s in r)t.o(r,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:r[s]})},o:function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},r:function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{AnimationContext:function(){return _t},AnimationCore:function(){return Yt},DomUtils:function(){return a},DotLottieSupport:function(){return jt},Draggable:function(){return Ft},Easing:function(){return s},EnvironmentUtils:function(){return n},Interactions:function(){return Ht},Logger:function(){return g},LottieSupport:function(){return qt},MathUtils:function(){return r},ParallaxEffect:function(){return Pt},ParserUtils:function(){return i},ScrollTrigger:function(){return Ot},SplitText:function(){return It},TextEffects:function(){return o},ThreeJsSupport:function(){return ee},Timeline:function(){return kt},Tween:function(){return Ct},VideoAnimation:function(){return Gt},WebGLSupport:function(){return te},animotionAttrs:function(){return he},default:function(){return ce}});var r={};t.r(r),t.d(r,{angle:function(){return m},clamp:function(){return u},distance:function(){return d},lerp:function(){return l},map:function(){return h},random:function(){return c},randomInt:function(){return p},round:function(){return f}});var s={};t.r(s),t.d(s,{easeInBack:function(){return R},easeInBounce:function(){return H},easeInCirc:function(){return $},easeInCubic:function(){return w},easeInElastic:function(){return U},easeInExpo:function(){return P},easeInOutBack:function(){return z},easeInOutBounce:function(){return _},easeInOutCirc:function(){return N},easeInOutCubic:function(){return E},easeInOutElastic:function(){return Y},easeInOutExpo:function(){return q},easeInOutQuad:function(){return b},easeInOutQuart:function(){return M},easeInOutQuint:function(){return k},easeInOutSine:function(){return F},easeInQuad:function(){return y},easeInQuart:function(){return S},easeInQuint:function(){return x},easeInSine:function(){return I},easeOutBack:function(){return B},easeOutBounce:function(){return W},easeOutCirc:function(){return j},easeOutCubic:function(){return T},easeOutElastic:function(){return X},easeOutExpo:function(){return D},easeOutQuad:function(){return A},easeOutQuart:function(){return L},easeOutQuint:function(){return C},easeOutSine:function(){return O},getAvailableEasings:function(){return Q},getEaseFunction:function(){return V},linear:function(){return v}});var n={};t.r(n),t.d(n,{getDocument:function(){return at},getWindow:function(){return ot},isBrowser:function(){return it},isElement:function(){return ut},isNodeList:function(){return lt}});var i={};t.r(i),t.d(i,{parseBoolean:function(){return Bt},parseCSS:function(){return zt},parseJSON:function(){return Nt},parseNumber:function(){return Rt}});var o={};t.r(o),t.d(o,{blurEffect:function(){return Jt},counterAnimation:function(){return Zt},scrambleText:function(){return Qt},typeText:function(){return Vt},waveEffect:function(){return Kt}});var a={};t.r(a),t.d(a,{addClass:function(){return ie},getData:function(){return le},getElement:function(){return re},getElements:function(){return se},hasClass:function(){return ne},removeClass:function(){return oe},setData:function(){return ue},toggleClass:function(){return ae}});const u=(t,e,r)=>Math.max(e,Math.min(r,t)),l=(t,e,r)=>t+(e-t)*u(r,0,1),h=(t,e,r,s,n)=>s+(t-e)*(n-s)/(r-e),c=(t,e)=>Math.random()*(e-t)+t,p=(t,e)=>Math.floor(Math.random()*(e-t+1))+t,d=(t,e,r,s)=>Math.sqrt(Math.pow(r-t,2)+Math.pow(s-e,2)),m=(t,e,r,s)=>Math.atan2(s-e,r-t),f=(t,e=0)=>Number(Math.round(t+"e"+e)+"e-"+e);var g=new class{constructor(){this.level="warn",this.levels={debug:0,info:1,warn:2,error:3}}setLevel(t){this.level=t}debug(t){this.levels[this.level]<=0&&console.log("[Animotion Debug]",t)}info(t){this.levels[this.level]<=1&&console.log("[Animotion Info]",t)}warn(t){this.levels[this.level]<=2&&console.warn("[Animotion Warn]",t)}error(t){this.levels[this.level]<=3&&console.error("[Animotion Error]",t)}};const v=t=>t,y=t=>t*t,A=t=>t*(2-t),b=t=>t<.5?2*t*t:(4-2*t)*t-1,w=t=>t*t*t,T=t=>--t*t*t+1,E=t=>t<.5?4*t*t*t:2*(t-2)*(t-1)*(2*(t-2))+1,S=t=>t*t*t*t,L=t=>1- --t*t*t*t,M=t=>t<.5?8*t*t*t*t:1-8*--t*t*t*t,x=t=>t*t*t*t*t,C=t=>1+--t*t*t*t*t,k=t=>t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t,I=t=>1-Math.cos(t*Math.PI/2),O=t=>Math.sin(t*Math.PI/2),F=t=>-(Math.cos(Math.PI*t)-1)/2,P=t=>0===t?0:Math.pow(2,10*t-10),D=t=>1===t?1:1-Math.pow(2,-10*t),q=t=>0===t?0:1===t?1:t<.5?Math.pow(2,20*t-10)/2:(2-Math.pow(2,-20*t+10))/2,$=t=>1-Math.sqrt(1-Math.pow(t,2)),j=t=>Math.sqrt(1-Math.pow(t-1,2)),N=t=>t<.5?(1-Math.sqrt(1-Math.pow(2*t,2)))/2:(Math.sqrt(1-Math.pow(-2*t+2,2))+1)/2,R=t=>{const e=1.70158;return 2.70158*t*t*t-e*t*t},B=t=>{const e=1.70158;return 1+2.70158*Math.pow(t-1,3)+e*Math.pow(t-1,2)},z=t=>{const e=2.5949095;return t<.5?Math.pow(2*t,2)*(7.189819*t-e)/2:(Math.pow(2*t-2,2)*((e+1)*(2*t-2)+e)+2)/2},U=t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:-Math.pow(2,10*t-10)*Math.sin((10*t-10.75)*e)},X=t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:Math.pow(2,-10*t)*Math.sin((10*t-.75)*e)+1},Y=t=>{const e=2*Math.PI/4.5;return 0===t?0:1===t?1:t<.5?-Math.pow(2,20*t-10)*Math.sin((20*t-11.125)*e)/2:Math.pow(2,-20*t+10)*Math.sin((20*t-11.125)*e)/2+1},W=t=>{const e=7.5625,r=2.75;return t<1/r?e*t*t:t<2/r?e*(t-=1.5/r)*t+.75:t<2.5/r?e*(t-=2.25/r)*t+.9375:e*(t-=2.625/r)*t+.984375},H=t=>1-W(1-t),_=t=>t<.5?(1-W(1-2*t))/2:(1+W(2*t-1))/2,V=(t="linear")=>({linear:v,"ease-in":y,"ease-out":A,"ease-in-out":b,none:v,"quad-in":y,"quad-out":A,"quad-in-out":b,"cubic-in":w,"cubic-out":T,"cubic-in-out":E,"quart-in":S,"quart-out":L,"quart-in-out":M,"quint-in":x,"quint-out":C,"quint-in-out":k,"sine-in":I,"sine-out":O,"sine-in-out":F,"expo-in":P,"expo-out":D,"expo-in-out":q,"circ-in":$,"circ-out":j,"circ-in-out":N,"back-in":R,"back-out":B,"back-in-out":z,"elastic-in":U,"elastic-out":X,"elastic-in-out":Y,"bounce-in":H,"bounce-out":W,"bounce-in-out":_}[t.toLowerCase()]||v),Q=()=>["linear","ease-in","ease-out","ease-in-out","quad-in","quad-out","quad-in-out","cubic-in","cubic-out","cubic-in-out","quart-in","quart-out","quart-in-out","quint-in","quint-out","quint-in-out","sine-in","sine-out","sine-in-out","expo-in","expo-out","expo-in-out","circ-in","circ-out","circ-in-out","back-in","back-out","back-in-out","elastic-in","elastic-out","elastic-in-out","bounce-in","bounce-out","bounce-in-out"],Z=/-?\d*\.?\d+(?:e[-+]?\d+)?/gi,J=t=>"[object Object]"===Object.prototype.toString.call(t),K=t=>{const e=Number(t);return Number.isFinite(e)?e:null},G=(t,e=255)=>Math.round(u(t,0,e)),tt=t=>{const e=t.match(/hsla?\(([^)]+)\)/i);if(!e)return null;const r=e[1].split(",").map(t=>t.trim().replace("%",""));if(r.length<3)return null;const s=((t,e,r)=>{const s=(t%360+360)%360/360,n=u(e/100,0,1),i=u(r/100,0,1);if(0===n){const t=255*i;return{r:t,g:t,b:t}}const o=i<.5?i*(1+n):i+n-i*n,a=2*i-o,l=t=>{let e=t;return e<0&&(e+=1),e>1&&(e-=1),e<1/6?a+6*(o-a)*e:e<.5?o:e<2/3?a+(o-a)*(2/3-e)*6:a};return{r:255*l(s+1/3),g:255*l(s),b:255*l(s-1/3)}})(K(r[0])??0,K(r[1])??0,K(r[2])??0);return{...s,a:K(r[3])??1}},et=t=>{if("string"!=typeof t)return null;const e=t.trim();return(t=>{const e=t.replace("#","").trim();if(![3,4,6,8].includes(e.length))return null;const r=e.length<=4?e.split("").map(t=>t+t).join(""):e,s=8===r.length?parseInt(r.slice(6,8),16)/255:1;return{r:parseInt(r.slice(0,2),16),g:parseInt(r.slice(2,4),16),b:parseInt(r.slice(4,6),16),a:s}})(e)||(t=>{const e=t.match(/rgba?\(([^)]+)\)/i);if(!e)return null;const r=e[1].split(",").map(t=>t.trim());return r.length<3?null:{r:K(r[0])??0,g:K(r[1])??0,b:K(r[2])??0,a:K(r[3])??1}})(e)||tt(e)},rt=(t,e)=>{const r=et(t),s=et(e);return r&&s?t=>(t=>{const e=Math.round(1e3*u(t.a,0,1))/1e3;return`rgba(${G(t.r)}, ${G(t.g)}, ${G(t.b)}, ${e})`})({r:r.r+(s.r-r.r)*t,g:r.g+(s.g-r.g)*t,b:r.b+(s.b-r.b)*t,a:r.a+(s.a-r.a)*t}):null},st=(t,e)=>{if("string"!=typeof t||"string"!=typeof e)return null;const r=t.match(Z),s=e.match(Z);if(!r||!s||r.length!==s.length)return null;const n=e.split(Z);if(n.length!==s.length+1)return null;const i=r.map(t=>Number(t)),o=s.map(t=>Number(t));return i.some(t=>!Number.isFinite(t))||o.some(t=>!Number.isFinite(t))?null:t=>{let e=n[0]||"";return o.forEach((r,s)=>{const o=i[s]+(r-i[s])*t;e+=(t=>{if(!Number.isFinite(t))return 0;const e=Math.round(1e4*t)/1e4;return String(e).replace(/\.0+$/,"").replace(/(\.\d*?)0+$/,"$1")})(o),e+=n[s+1]||""}),e}},nt=(t,e)=>{const r=K(t),s=K(e);if(null!==r&&null!==s)return t=>r+(s-r)*t;const n=rt(t,e);if(n)return n;const i=st(t,e);if(i)return i;const o=((t,e)=>{if(!Array.isArray(t)||!Array.isArray(e)||t.length!==e.length)return null;const r=t.map((t,r)=>nt(t,e[r]));return t=>r.map(e=>e(t))})(t,e);if(o)return o;if(J(t)&&J(e)){const r=Object.keys(e),s=r.reduce((r,s)=>(r[s]=nt(t[s],e[s]),r),{});return t=>r.reduce((e,r)=>(e[r]=s[r](t),e),{})}return r=>r<1?t:e},it=()=>"undefined"!=typeof window&&"undefined"!=typeof document,ot=()=>"undefined"!=typeof window?window:null,at=()=>"undefined"!=typeof document?document:null,ut=t=>!(!it()||"undefined"==typeof Element)&&t instanceof Element,lt=t=>"undefined"!=typeof NodeList&&t instanceof NodeList,ht=new WeakMap,ct=new WeakMap,pt={x:"0px",y:"0px",z:"0px",scale:1,scaleX:1,scaleY:1,scaleZ:1,rotate:"0deg",rotateX:"0deg",rotateY:"0deg",rotateZ:"0deg",skewX:"0deg",skewY:"0deg"},dt={blur:"0px",brightness:1,contrast:1,grayscale:0,hueRotate:"0deg",invert:0,saturate:1,sepia:0},mt=Object.keys(pt),ft=Object.keys(dt),gt=t=>t.replace(/-([a-z])/g,(t,e)=>e.toUpperCase()),vt=t=>t.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`),yt=t=>String(t).split(".").filter(Boolean),At=(t,e)=>yt(e).reduce((t,e)=>{if(null!=t)return t[e]},t),bt=(t,e,r)=>{const s=yt(e);if(0===s.length)return;const n=s.pop(),i=s.reduce((t,e)=>null==t?null:t[e],t);if(!i||!n)return;const o=i[n];!o||"function"!=typeof o.set||"string"!=typeof r&&"number"!=typeof r?o&&"function"==typeof o.copy&&r&&"object"==typeof r?o.copy(r):i[n]=r:o.set(r)},wt=t=>{if(ht.has(t))return ht.get(t);const e=ot(),r=e?.getComputedStyle?.(t).transform,s={base:r&&"none"!==r?r:"",values:{...pt}};return ht.set(t,s),s},Tt=t=>{if(ct.has(t))return ct.get(t);const e=ot(),r=e?.getComputedStyle?.(t).filter,s={base:r&&"none"!==r?r:"",values:{...dt}};return ct.set(t,s),s},Et=(t,e,r)=>{if(mt.includes(e)){const s=wt(t);return"scale"===e?(s.values.scaleX=r,s.values.scaleY=r,s.values.scaleZ=r):s.values[e]=r,void(t=>{const e=wt(t),r=[e.base,`translate3d(${e.values.x}, ${e.values.y}, ${e.values.z})`,`rotate(${e.values.rotate})`,`rotateX(${e.values.rotateX})`,`rotateY(${e.values.rotateY})`,`rotateZ(${e.values.rotateZ})`,`skewX(${e.values.skewX})`,`skewY(${e.values.skewY})`,`scale3d(${e.values.scaleX}, ${e.values.scaleY}, ${e.values.scaleZ})`].filter(Boolean);t.style.transform=r.join(" ").trim()})(t)}if(ft.includes(e))return Tt(t).values[e]=r,void(t=>{const e=Tt(t),r=[e.base,`blur(${e.values.blur})`,`brightness(${e.values.brightness})`,`contrast(${e.values.contrast})`,`grayscale(${e.values.grayscale})`,`hue-rotate(${e.values.hueRotate})`,`invert(${e.values.invert})`,`saturate(${e.values.saturate})`,`sepia(${e.values.sepia})`].filter(Boolean);t.style.filter=r.join(" ").trim()})(t);if(e.startsWith("--"))return void t.style.setProperty(e,r);if(e.startsWith("attr."))return void t.setAttribute(e.slice(5),r);if("scrollTop"===e||"scrollLeft"===e)return void(t[e]=Number(r));if(e.startsWith("style.")){const s=gt(e.slice(6));return void(t.style[s]=r)}if(e.includes("."))return void bt(t,e,r);const s=gt(e);s in t.style?t.style[s]=r:e in t&&"function"!=typeof t[e]?t[e]=r:bt(t,e,r)},St=t=>ut(t),Lt=(t,e={})=>{if(null==t)return[];if("string"==typeof t){if(!it())return[];const r=e.scope&&ut(e.scope)?e.scope:document;return Array.from(r.querySelectorAll(t))}return Array.isArray(t)?t.flatMap(t=>Lt(t,e)):lt(t)?Array.from(t):[t]},Mt=(t,e="")=>Object.entries(t||{}).reduce((t,[r,s])=>{const n=e?`${e}.${r}`:r;return!(t=>"[object Object]"===Object.prototype.toString.call(t))(s)||Array.isArray(s)||n.startsWith("attr.")||n.startsWith("style.")?(t[n]=s,t):(Object.assign(t,Mt(s,n)),t)},{}),xt=(t,e)=>{if(St(t))return((t,e)=>{const r=ot(),s=r?.getComputedStyle?.(t);if(mt.includes(e))return wt(t).values[e];if(ft.includes(e))return Tt(t).values[e];if(e.startsWith("--"))return s?.getPropertyValue(e).trim()||t.style.getPropertyValue(e).trim()||"0";if(e.startsWith("attr."))return t.getAttribute(e.slice(5));if("scrollTop"===e||"scrollLeft"===e)return t[e];if(e.startsWith("style.")){const r=gt(e.slice(6));return t.style[r]||s?.[r]||""}if(e.includes(".")&&!e.startsWith("style."))return At(t,e);if(e in t&&"function"!=typeof t[e])return t[e];const n=gt(e);return n in t.style||s?.getPropertyValue(vt(n))?t.style[n]||s?.getPropertyValue(vt(n)).trim()||s?.[n]||"":At(t,e)})(t,e);const r=At(t,e);if(r&&"object"==typeof r&&"function"==typeof r.getStyle)return r.getStyle();if(r&&"object"==typeof r&&"number"==typeof r.r&&"number"==typeof r.g&&"number"==typeof r.b){const t="number"==typeof r.a?r.a:1;return`rgba(${Math.round(255*r.r)}, ${Math.round(255*r.g)}, ${Math.round(255*r.b)}, ${t})`}return r};var Ct=class{constructor(t,e,r={}){this.originalTarget=t,this.targets=Lt(t,r),this.props=Mt(e),this.fromProps=r.fromTo?Mt(r.fromTo):null,this.duration=Math.max(r.duration||1,0),this.ease=r.ease||"ease-out",this.delay=r.delay||0,this.repeat=r.repeat||0,this.yoyo=!1!==r.yoyo,this.stagger=r.stagger||0,this.from=!0===r.from,this.render=r.render||null,this.onStart=r.onStart||null,this.onUpdate=r.onUpdate||null,this.onComplete=r.onComplete||null,this.onRepeat=r.onRepeat||null,this.paused=!0===r.paused,this.frameId=null,this.startTime=null,this.currentTime=0,this.currentRepeat=0,this.isReverse=!1,this.hasStarted=!1,this.totalDuration=this.duration+Math.max(this.targets.length-1,0)*this.stagger,this.targetStates=this.targets.map((t,e)=>({target:t,offset:e*this.stagger,properties:this.createPropertyAnimations(t,e)})),this.delay>0?setTimeout(()=>this.play(),1e3*this.delay):this.paused||this.play()}createPropertyAnimations(t,e){return Object.entries(this.props).map(([r,s])=>{const n=xt(t,r),i=this.resolveValue(s,t,e,n),o=this.from?this.resolveValue(s,t,e,n):this.resolveValue(this.fromProps?.[r],t,e,n),a=this.from||this.fromProps?o:n,u=this.from?n:i;return{path:r,startValue:a,endValue:u,interpolator:nt(a,u)}})}resolveValue(t,e,r,s){return"function"==typeof t?t(e,r,s):void 0===t?s:t}play(){if(this.paused||!this.frameId){if(this.paused=!1,0===this.totalDuration)return this.seek(1),void this.onComplete?.(this);this.startTime=performance.now()-this.currentTime*this.totalDuration*1e3,this.animate()}}pause(){this.paused=!0,this.frameId&&(cancelAnimationFrame(this.frameId),this.frameId=null)}reverse(){this.isReverse=!this.isReverse,this.seek(this.currentTime),this.paused||this.play()}restart(){this.currentTime=0,this.currentRepeat=0,this.hasStarted=!1,this.play()}seek(t){return this.currentTime=u(t,0,1),this.applyFrame(this.currentTime),this}progress(t){return void 0!==t&&this.seek(t),this.currentTime}kill(){this.pause(),this.targets=[],this.targetStates=[],this.props=null}animate=()=>{if(this.paused)return;this.startTime||(this.startTime=performance.now());const t=(performance.now()-this.startTime)/1e3;this.currentTime=0===this.totalDuration?1:u(t/this.totalDuration,0,1),this.applyFrame(this.currentTime),this.currentTime>=1?(this.currentRepeat++,this.repeat>0&&this.currentRepeat<=this.repeat?(this.yoyo&&(this.isReverse=!this.isReverse),this.startTime=performance.now(),this.onRepeat?.(this),this.frameId=requestAnimationFrame(this.animate)):(this.pause(),this.onComplete?.(this))):this.frameId=requestAnimationFrame(this.animate)};applyFrame(t){const e=u(t,0,1)*this.totalDuration,r=this.isReverse?this.totalDuration-e:e,s=V(this.ease);this.hasStarted||(this.hasStarted=!0,this.onStart?.(this)),this.targetStates.forEach(t=>{const e=this.getTargetProgress(r,t.offset),n=s(e);t.properties.forEach(e=>{const r=e.interpolator(n);((t,e,r)=>{St(t)?Et(t,e,r):bt(t,e,r)})(t.target,e.path,r)})}),this.render?.(this),this.onUpdate?.(this)}getTargetProgress(t,e){if(0===this.duration)return t>=e?1:0;const r=u(t-e,0,this.duration);return u(r/this.duration,0,1)}};var kt=class{constructor(t={}){this.id=t.id||`timeline-${Date.now()}`,this.items=[],this.labels=new Map,this.duration=0,this.currentTime=0,this.autoplay=!1!==t.autoplay,this.paused=!0===t.paused,this.autoplayPending=this.autoplay&&!this.paused,this.isPlaying=!1,this.repeat=t.repeat||0,this.yoyo=!1!==t.yoyo,this.currentRepeat=0,this.frameId=null,this.startTime=null,this.onComplete=t.onComplete||null,this.scope=t.scope||null,g.debug(`Timeline created: ${this.id}`)}to(t,e,r=1,s="ease-out",n=">"){return this.addTween(t,e,{duration:r,ease:s,paused:!0,scope:this.scope},n)}from(t,e,r=1,s="ease-out",n=">"){return this.addTween(t,e,{duration:r,ease:s,from:!0,paused:!0,scope:this.scope},n)}fromTo(t,e,r,s=1,n="ease-out",i=">"){return this.addTween(t,r,{duration:s,ease:n,fromTo:e,paused:!0,scope:this.scope},i)}set(t,e,r=">"){return this.addTween(t,e,{duration:0,paused:!0,scope:this.scope},r)}call(t,e=">"){return this.addItem({type:"call",callback:t,startTime:this.resolvePosition(e),hasApplied:!1})}addLabel(t,e=">"){return this.labels.set(t,this.resolvePosition(e)),this}addTween(t,e,r,s){const n=new Ct(t,e,r);return n.pause(),this.addItem({type:"tween",tween:n,startTime:this.resolvePosition(s),duration:n.totalDuration})}addItem(t){return this.items.push(t),this.calculateDuration(),this.scheduleAutoplay(),this}scheduleAutoplay(){this.autoplayPending&&!this.isPlaying&&queueMicrotask(()=>{this.autoplayPending&&!this.isPlaying&&0!==this.items.length&&(this.autoplayPending=!1,this.play())})}resolvePosition(t){if("number"==typeof t)return t;if("<"===t){const t=this.items[this.items.length-1];return t?t.startTime:0}if(">"===t||null==t)return this.duration;if("string"==typeof t){const e=t.match(/^([a-zA-Z0-9_-]+)?([+-]=)(\d*\.?\d+)$/);if(e){const[,t,r,s]=e,n=t?this.labels.get(t)??this.duration:this.duration,i=Number(s);return"+="===r?n+i:Math.max(0,n-i)}if(this.labels.has(t))return this.labels.get(t)}return this.duration}calculateDuration(){this.duration=this.items.reduce((t,e)=>{const r="tween"===e.type?e.duration:0;return Math.max(t,e.startTime+r)},0)}play(){if(!this.isPlaying||this.paused){if(this.paused=!1,this.isPlaying=!0,0===this.duration)return this.currentTime=1,this.applyFrame(),this.pause(),void this.onComplete?.();this.startTime=performance.now()-this.currentTime*this.duration*1e3,this.animate()}}pause(){this.paused=!0,this.isPlaying=!1,this.frameId&&(cancelAnimationFrame(this.frameId),this.frameId=null)}reverse(){this.currentTime=1-this.currentTime,this.applyFrame()}restart(){this.currentTime=0,this.currentRepeat=0,this.items.forEach(t=>{"call"===t.type&&(t.hasApplied=!1)}),this.play()}seek(t){return this.currentTime=u(t,0,1),this.applyFrame(),this}progress(t){return void 0!==t&&this.seek(t),this.currentTime}animate=()=>{if(this.paused)return;this.startTime||(this.startTime=performance.now());const t=(performance.now()-this.startTime)/1e3;this.currentTime=0===this.duration?1:u(t/this.duration,0,1),this.applyFrame(),this.currentTime>=1?(this.currentRepeat++,this.repeat>0&&this.currentRepeat<this.repeat?(this.startTime=performance.now(),this.yoyo&&this.items.forEach(t=>{"tween"===t.type&&t.tween.reverse()}),this.frameId=requestAnimationFrame(this.animate)):(this.pause(),this.onComplete?.())):this.frameId=requestAnimationFrame(this.animate)};applyFrame(){const t=this.currentTime*this.duration;this.items.forEach(e=>{if("call"===e.type)return void(t>=e.startTime&&!e.hasApplied?(e.callback?.(this),e.hasApplied=!0):t<e.startTime&&(e.hasApplied=!1));const r=e.startTime+e.duration;if(t<=e.startTime)return void e.tween.seek(0);if(t>=r)return void e.tween.seek(1);const s=t-e.startTime,n=0===e.duration?1:u(s/e.duration,0,1);e.tween.seek(n)})}kill(){this.pause(),this.items.forEach(t=>{t.tween?.kill?.()}),this.items=[],this.duration=0}};var It=class{constructor(t,e={}){this.element=t,this.type=e.type||"chars",this.id=e.id||`split-${Date.now()}`,this.spans=[],this.groups={chars:[],words:[],lines:[]},this.split(),g.debug(`SplitText created: ${this.id}`)}split(){const t=this.element.textContent||"";this.element.innerHTML="";const e=document.createDocumentFragment();if("words"===this.type){(t.match(/\s+|\S+/g)||[]).forEach(t=>{const r=document.createElement("span");r.textContent=t,r.style.display="inline-block",e.appendChild(r),this.spans.push(r),this.groups.words.push(r)})}else if("lines"===this.type){const r=t.split(/\r?\n/);r.forEach((t,s)=>{const n=document.createElement("span");n.textContent=t+(s<r.length-1?"\n":""),n.style.display="block",e.appendChild(n),this.spans.push(n),this.groups.lines.push(n)})}else for(let r=0;r<t.length;r++){const s=document.createElement("span");s.textContent=t[r],s.style.display="inline-block",e.appendChild(s),this.spans.push(s),this.groups.chars.push(s)}this.element.appendChild(e)}getSpans(t){if(!t||"all"===t)return this.spans;if("chars"===t)return this.groups.chars;if("words"===t)return this.groups.words;if("lines"===t)return this.groups.lines;if("first"===t)return[this.spans[0]];if("last"===t)return[this.spans[this.spans.length-1]];if(t.startsWith("index:")){const e=parseInt(t.split(":")[1]);return[this.spans[e]]}return this.spans}revert(){const t=this.spans.map(t=>t.textContent).join("");this.element.textContent=t}};var Ot=class{constructor(t={}){this.trigger=t.trigger,this.start=t.start||"top center",this.end=t.end||"bottom center",this.scrub=t.scrub||!1,this.pin=t.pin||!1,this.markers=t.markers||!1,this.onEnter=t.onEnter||null,this.onLeave=t.onLeave||null,this.onUpdate=t.onUpdate||null,this.progress=0,this.isActive=!1,this.handleScroll=this.handleScroll.bind(this),window.addEventListener("scroll",this.handleScroll),this.handleScroll(),g.debug("ScrollTrigger created for element")}handleScroll(){const t=this.trigger.getBoundingClientRect(),e=window.innerHeight,r=t.top,s=t.bottom,n=(e-r)/(e+t.height);this.progress=u(n,0,1);const i=this.isActive;this.isActive=r<e&&s>0,this.isActive&&!i?this.onEnter?.():!this.isActive&&i&&this.onLeave?.(),this.onUpdate?.({progress:this.progress,isActive:this.isActive})}refresh(){this.handleScroll()}kill(){window.removeEventListener("scroll",this.handleScroll)}};var Ft=class{constructor(t,e={}){this.element=t,this.isDragging=!1,this.startX=0,this.startY=0,this.currentX=0,this.currentY=0,this.bounds=e.bounds||null,this.lockAxis=e.lockAxis||null,this.cursor=e.cursor||"grab",this.activeCursor=e.activeCursor||"grabbing",this.onDragStart=e.onDragStart||null,this.onDrag=e.onDrag||null,this.onDragEnd=e.onDragEnd||null,this.handleMouseDown=this.onMouseDown.bind(this),this.handleMouseMove=this.onMouseMove.bind(this),this.handleMouseUp=this.onMouseUp.bind(this),this.element.style.cursor=this.cursor,this.element.style.userSelect="none",this.bindEvents()}bindEvents(){this.element.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}onMouseDown(t){this.isDragging=!0,this.startX=t.clientX,this.startY=t.clientY,this.element.style.cursor=this.activeCursor,this.onDragStart?.()}onMouseMove(t){if(!this.isDragging)return;let e=t.clientX-this.startX,r=t.clientY-this.startY;"x"===this.lockAxis&&(r=0),"y"===this.lockAxis&&(e=0),this.currentX+=e,this.currentY+=r,this.element.style.transform=`translate(${this.currentX}px, ${this.currentY}px)`,this.startX=t.clientX,this.startY=t.clientY,this.onDrag?.({x:this.currentX,y:this.currentY})}onMouseUp(){this.isDragging&&(this.isDragging=!1,this.element.style.cursor=this.cursor,this.onDragEnd?.({x:this.currentX,y:this.currentY}))}destroy(){this.element.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp)}};var Pt=class{constructor(t,e={}){this.element=t,this.speed=e.speed||.5,this.axis=e.axis||"y",this.handleScroll=this.handleScroll.bind(this),window.addEventListener("scroll",this.handleScroll),this.handleScroll()}handleScroll(){const t=-this.element.getBoundingClientRect().top*this.speed;"y"===this.axis?this.element.style.transform=`translateY(${t}px)`:"x"===this.axis&&(this.element.style.transform=`translateX(${t}px)`)}destroy(){window.removeEventListener("scroll",this.handleScroll)}};class Dt{constructor(t){this.instance=t}play(){return this.instance?.play?.(),this}pause(){return this.instance?.pause?.(),this}stop(){return this.instance?.stop?.(),this}destroy(){this.instance?.destroy?.()}setSpeed(t){return this.instance?.setSpeed?.(t),this}setDirection(t){return this.instance?.setDirection?.(t),this}playSegments(t,e=!0){return this.instance?.playSegments?.(t,e),this}goToAndPlay(t,e=!0){return this.instance?.goToAndPlay?.(t,e),this}goToAndStop(t,e=!0){return this.instance?.goToAndStop?.(t,e),this}setFrame(t){return this.goToAndStop(t,!0),this}setProgress(t){const e=this.instance?.totalFrames||0;return this.setFrame(e*t),this}tweenToFrame(t,e={}){const r={frame:this.instance?.currentFrame||0};return new Ct(r,{frame:t},{duration:e.duration||1,ease:e.ease||"ease-in-out",paused:!1,onUpdate:()=>{this.goToAndStop(r.frame,!0),e.onUpdate?.(r.frame,this.instance)},onComplete:()=>{e.onComplete?.(this.instance)}})}tweenToProgress(t,e={}){const r=this.instance?.totalFrames||0;return this.tweenToFrame(r*t,e)}on(t,e){return this.instance?.addEventListener?.(t,e),()=>this.instance?.removeEventListener?.(t,e)}}var qt=class{static resolveLibrary(t){if(t)return t;const e=ot();if(e?.lottie)return e.lottie;throw new Error("Lottie is not loaded")}static isLoaded(){const t=ot();return void 0!==t?.lottie}static get lottie(){return this.resolveLibrary()}static load(t={},e){return this.resolveLibrary(e).loadAnimation(t)}static createController(t,e={},r){if(t&&"function"==typeof t.play)return new Dt(t);const s=ut(t)?{...e,container:t}:{...t},n=this.load(s,r);return new Dt(n)}};class $t{constructor(t){this.instance=t}play(){return this.instance?.play?.(),this}pause(){return this.instance?.pause?.(),this}stop(){return this.instance?.stop?.(),this}destroy(){this.instance?.destroy?.()}setLoop(t){return"function"==typeof this.instance?.setLoop?this.instance.setLoop(t):this.instance.loop=t,this}setMode(t){return this.instance?.setMode?.(t),this}setSpeed(t){return this.instance?.setSpeed?.(t),this}setSegment(t,e){return this.instance?.setSegment?.(t,e),this}setFrame(t){return"function"==typeof this.instance?.setFrame&&this.instance.setFrame(t),this}setProgress(t){return"function"==typeof this.instance?.setProgress?(this.instance.setProgress(t),this):("number"==typeof this.instance?.totalFrames&&this.setFrame(this.instance.totalFrames*t),this)}tweenToFrame(t,e={}){const r={frame:this.instance?.currentFrame||0};return new Ct(r,{frame:t},{duration:e.duration||1,ease:e.ease||"ease-in-out",paused:!1,onUpdate:()=>{this.setFrame(r.frame),e.onUpdate?.(r.frame,this.instance)},onComplete:()=>{e.onComplete?.(this.instance)}})}on(t,e){return this.instance?.addEventListener?.(t,e),()=>this.instance?.removeEventListener?.(t,e)}}var jt=class{static resolveConstructor(t){if(t)return t;const e=ot();if(e?.DotLottie)return e.DotLottie;throw new Error("dotLottie is not loaded")}static isLoaded(){const t=ot();return void 0!==t?.DotLottie}static createController(t,e={},r){if(t&&"function"==typeof t.play)return new $t(t);const s=new(this.resolveConstructor(r))(ut(t)?{...e,canvas:t}:{...t});return new $t(s)}};const Nt=t=>{if(!t||!String(t).trim())return{};const e=String(t).trim().replace(/;$/,"");try{return JSON.parse(e)}catch(r){try{let t=e;return"{"!==t[0]&&t.includes(":")&&(t="{"+t+"}"),new Function("return ("+t+")")()}catch(e){return g.warn(`Invalid JSON/Object: ${t}`),{}}}},Rt=(t,e=0)=>{const r=Number(t);return isNaN(r)?e:r},Bt=(t,e=!1)=>{if(null==t||""===t)return e;if("boolean"==typeof t)return t;const r=String(t).toLowerCase();return!!["true","1","yes","on"].includes(r)||!["false","0","no","off"].includes(r)&&e},zt=t=>{const e={};return t.split(";").forEach(t=>{const[r,s]=t.split(":");r&&s&&(e[r.trim()]=s.trim())}),e},Ut={root:"data-anim",props:"data-anim-props",duration:"data-anim-duration",ease:"data-anim-ease",delay:"data-anim-delay",position:"data-anim-position",timeline:"data-anim-timeline",timelineAuto:"data-anim-timeline-auto",control:"data-anim-control",scroll:"data-anim-scroll-trigger",mouse:"data-anim-mouse",click:"data-anim-click",hover:"data-anim-hover",focus:"data-anim-focus",touch:"data-anim-touch",keyboard:"data-anim-keyboard",pointer:"data-anim-pointer",split:"data-anim-split-text"},Xt={enter:"mouseenter",leave:"mouseleave",press:"pointerdown",release:"pointerup",tap:"click"};var Yt=class{constructor(t={}){this.options={debug:!1,autoInit:!0,attributePrefix:"am",root:null,observeMutations:!1,legacyAttributes:!0,...t},this.root=null,this.timelines=new Map,this.tweens=new Map,this.splitTexts=new Map,this.scrollTriggers=new Map,this.draggables=new Map,this.parallaxEffects=new Map,this.lottieControllers=new Map,this.dotLottieControllers=new Map,this.observers=new Map,this.cleanups=[],this.initialized=!1,this.mutationObserver=null,this.options.debug&&g.setLevel("debug"),g.info("AnimationCore initialized")}init(){it()?this.initialized?g.warn("AnimationCore already initialized"):(this.root=this.resolveRoot(),this.initialized=!0,g.info("Initializing AnimationCore..."),this.initSplitTexts(),this.initTimelines(),this.initControls(),this.initDeclarativeAnimations(),this.initEventAnimations(),this.initScrollAnimations(),this.initMouseAnimations(),this.initParallaxEffects(),this.initDraggables(),this.initLottieAnimations(),this.initDotLottieAnimations(),this.observeMutations(),this.exposeGlobalState(),this.refreshScrollTriggers()):g.warn("AnimationCore.init() requires a browser environment")}destroy(){this.killAll(),this.cleanups.splice(0).forEach(t=>t()),this.mutationObserver?.disconnect(),this.mutationObserver=null,this.initialized=!1}resolveRoot(){if(ut(this.options.root))return this.options.root;if("string"==typeof this.options.root){const t=at();return t?.querySelector(this.options.root)||t}return at()}exposeGlobalState(){const t=ot();t&&(t.__ANIMOTION__={core:this,timelines:this.timelines,tweens:this.tweens,splitTexts:this.splitTexts,scrollTriggers:this.scrollTriggers,draggables:this.draggables,parallaxEffects:this.parallaxEffects,lottieControllers:this.lottieControllers,dotLottieControllers:this.dotLottieControllers,version:"1.1.0"})}observeMutations(){this.options.observeMutations&&this.root&&"undefined"!=typeof MutationObserver&&(this.mutationObserver=new MutationObserver(()=>{this.refresh()}),this.mutationObserver.observe(this.root,{childList:!0,subtree:!0}))}refresh(){this.destroy(),this.init()}registerCleanup(t){"function"==typeof t&&this.cleanups.push(t)}getAttrName(t){return t?`${this.options.attributePrefix}-${t}`:this.options.attributePrefix}getLegacyAttrName(t){return Ut[t]||null}getAttrCandidates(t){const e=[this.getAttrName(t)],r=this.options.legacyAttributes?this.getLegacyAttrName(t):null;return r&&e.push(r),e.filter(Boolean)}getSelectorForAttr(t){return this.getAttrCandidates(t).map(t=>`[${t}]`).join(", ")}getAttr(t,e){const r=this.getAttrCandidates(e).find(e=>t.hasAttribute(e));return r?t.getAttribute(r):null}hasAttr(t,e){return this.getAttrCandidates(e).some(e=>t.hasAttribute(e))}queryAllByAttr(t){const e=this.getSelectorForAttr(t);return e?Array.from(this.root.querySelectorAll(e)):[]}queryAll(t){return Array.from(this.root.querySelectorAll(t))}parseAttrObject(t,e,r=null){const s=this.getAttr(t,e);return null===s||""===s?r:Nt(s)}parseAttrString(t,e,r=""){const s=this.getAttr(t,e);return null===s||""===s?r:s}parseAttrNumber(t,e,r=0){const s=this.getAttr(t,e);return null===s||""===s?r:Rt(s,r)}parseAttrBoolean(t,e,r=!1){const s=this.getAttr(t,e);return null===s||""===s?r:Bt(s,r)}getAnimationMode(t){return this.hasAttr(t,"set")?"set":this.hasAttr(t,"from")&&(this.hasAttr(t,"to")||this.hasAttr(t,"props"))?"fromTo":this.hasAttr(t,"from")&&!this.hasAttr(t,"to")?"from":"to"}resolveAnimationTarget(t){const e=this.parseAttrString(t,"target"),r=this.parseAttrString(t,"split-target",""),s=this.splitTexts.get(t);return s?s.getSpans(r||"all"):e?Array.from(this.root.querySelectorAll(e)):t}buildTweenOptions(t,e={}){return{duration:this.parseAttrNumber(t,"duration",e.duration??1),ease:this.parseAttrString(t,"ease",e.ease||"ease-out"),delay:this.parseAttrNumber(t,"delay",e.delay??0),repeat:this.parseAttrNumber(t,"repeat",e.repeat??0),yoyo:this.parseAttrBoolean(t,"yoyo",e.yoyo??!0),stagger:this.parseAttrNumber(t,"stagger",e.stagger??0),paused:e.paused??!1,scope:this.root,...this.parseAttrObject(t,"options",{}),...e}}buildTweenConfig(t){const e=this.getAnimationMode(t),r=this.parseAttrObject(t,"to")||this.parseAttrObject(t,"props")||this.parseAttrObject(t,"set")||this.parseAttrObject(t,"from")||{};return{target:this.resolveAnimationTarget(t),mode:e,fromProps:this.parseAttrObject(t,"from",{}),toProps:r,options:this.buildTweenOptions(t)}}createTweenFromElement(t,e={}){const r=this.buildTweenConfig(t),s=e.target||r.target,n={...r.options,...e.options};let i=null;return i="set"===r.mode?new Ct(s,r.toProps,{...n,duration:0}):"fromTo"===r.mode?new Ct(s,r.toProps,{...n,fromTo:r.fromProps}):"from"===r.mode?new Ct(s,r.fromProps,{...n,from:!0}):new Ct(s,r.toProps,n),this.hasAttr(t,"id")?this.tweens.set(this.parseAttrString(t,"id"),i):this.tweens.set(`${Date.now()}-${this.tweens.size}`,i),i}shouldHandleAsImmediate(t){return!t.closest(this.getSelectorForAttr("timeline"))&&(!this.hasAttr(t,"on")&&(!this.hasAttr(t,"scroll")&&(!this.hasAttr(t,"parallax")&&(!this.hasAttr(t,"mouse")&&(!this.hasAttr(t,"draggable")&&(!this.hasAttr(t,"lottie")&&!this.hasAttr(t,"dotlottie")&&(this.hasAttr(t,"root")||this.hasAttr(t,"to")||this.hasAttr(t,"from")||this.hasAttr(t,"set"))))))))}initSplitTexts(){this.queryAllByAttr("split").forEach(t=>{if(this.splitTexts.has(t))return;const e=this.parseAttrString(t,"split","chars"),r="string"==typeof e&&e.trim().startsWith("{")?Nt(e):{type:e||"chars"},s=new It(t,{...r,...this.parseAttrObject(t,"split-options",{})});this.splitTexts.set(t,s)})}initTimelines(){this.queryAllByAttr("timeline").forEach(t=>{const e=this.parseAttrString(t,"timeline",`timeline-${this.timelines.size+1}`),r=new kt({id:e,autoplay:this.parseAttrBoolean(t,"timeline-auto",!0),...this.parseAttrObject(t,"timeline-options",{}),scope:this.root});this.timelines.set(e,r);const s=[this.getSelectorForAttr("root"),this.getSelectorForAttr("to"),this.getSelectorForAttr("from"),this.getSelectorForAttr("set")].filter(Boolean).join(", ");Array.from(t.querySelectorAll(s)).forEach(e=>{if(e.closest(this.getSelectorForAttr("timeline"))!==t)return;const s=this.parseAttrString(e,"label");s&&r.addLabel(s,this.parseAttrString(e,"position",">"));const n=this.buildTweenConfig(e),i=this.parseAttrString(e,"position",">");"set"===n.mode?r.set(n.target,n.toProps,i):"fromTo"===n.mode?r.fromTo(n.target,n.fromProps,n.toProps,n.options.duration,n.options.ease,i):"from"===n.mode?r.from(n.target,n.fromProps,n.options.duration,n.options.ease,i):r.to(n.target,n.toProps,n.options.duration,n.options.ease,i)})})}initControls(){this.queryAll(`${this.getSelectorForAttr("control")}, ${this.getSelectorForAttr("action")}`).forEach(t=>{const e=this.parseAttrString(t,"control"),r=e.includes("|")?e:null;if(r){const[e,s="click",n,i="play"]=r.split("|").map(t=>t.trim());return void this.bindTimelineControl(e?Array.from(this.root.querySelectorAll(e)):[t],s,n,i)}const s=this.parseAttrString(t,"control")||this.parseAttrString(t,"timeline-target"),n=this.parseAttrString(t,"action","play"),i=Xt[this.parseAttrString(t,"on","click")]||this.parseAttrString(t,"on","click");s&&this.bindTimelineControl([t],i,s,n)})}bindTimelineControl(t,e,r,s){t.forEach(t=>{const n=e=>{this.parseAttrBoolean(t,"prevent-default",!0)&&e.preventDefault?.(),this.runTimelineCommand(r,s)};t.addEventListener(e,n),this.registerCleanup(()=>t.removeEventListener(e,n))})}runTimelineCommand(t,e){const r=this.timelines.get(t);r?"play"===e?r.play():"pause"===e?r.pause():"reverse"===e?r.reverse():"restart"===e?r.restart():e.startsWith("seek:")?r.seek(parseFloat(e.split(":")[1])):e.startsWith("progress:")&&r.progress(parseFloat(e.split(":")[1])):g.warn(`Timeline not found: ${t}`)}initDeclarativeAnimations(){const t=[this.getSelectorForAttr("root"),this.getSelectorForAttr("to"),this.getSelectorForAttr("from"),this.getSelectorForAttr("set")].filter(Boolean).join(", ");this.queryAll(t).forEach(t=>{this.shouldHandleAsImmediate(t)&&this.createTweenFromElement(t)})}initEventAnimations(){this.queryAllByAttr("on").forEach(t=>{const e=this.parseAttrString(t,"on").split(",").map(t=>t.trim()).filter(Boolean),r=this.parseAttrBoolean(t,"once",!1),s=this.parseAttrBoolean(t,"prevent-default",!0);e.forEach(e=>{const n=Xt[e]||e;if("load"===n||"init"===n)return void this.createTweenFromElement(t);if("inview"===n){const e=new Ot({trigger:t,...this.parseAttrObject(t,"scroll-options",{}),onEnter:()=>{this.createTweenFromElement(t),r&&e.kill()}});return void this.scrollTriggers.set(t,e)}const i=e=>{s&&e.preventDefault?.(),this.createTweenFromElement(t),r&&t.removeEventListener(n,i)};t.addEventListener(n,i),this.registerCleanup(()=>t.removeEventListener(n,i))})})}initScrollAnimations(){this.queryAllByAttr("scroll").forEach(t=>{const e=this.parseAttrObject(t,"scroll",{}),r=this.createTweenFromElement(t,{options:{paused:!0,duration:this.parseAttrNumber(t,"duration",e.duration||1)}});r.pause();const s=new Ot({trigger:t,...e,onEnter:()=>{e.scrub||(r.play(),e.once&&s.kill())},onUpdate:({progress:t})=>{e.scrub&&r.seek(t)}});this.scrollTriggers.set(t,s)})}initMouseAnimations(){this.queryAllByAttr("mouse").forEach(t=>{const e=this.parseAttrObject(t,"mouse",{}),r=e.movement||30,s=e.duration||.5,n=e.axis||"both",i=this.resolveAnimationTarget(t),o=t=>{const{innerWidth:o,innerHeight:a}=ot(),u=100*(t.clientX/o-.5),l=100*(t.clientY/a-.5),h={};"both"!==n&&"x"!==n||(h.x=u*r/100+"px"),"both"!==n&&"y"!==n||(h.y=l*r/100+"px"),new Ct(i,h,{duration:s,ease:e.ease||"ease-out",paused:!1,scope:this.root})};at().addEventListener("mousemove",o),this.registerCleanup(()=>at().removeEventListener("mousemove",o))})}initParallaxEffects(){this.queryAllByAttr("parallax").forEach(t=>{const e=this.parseAttrString(t,"parallax","0.5"),r=e.trim().startsWith("{")?Nt(e):{speed:Rt(e,.5)},s=new Pt(t,{...r,...this.parseAttrObject(t,"parallax-options",{})});this.parallaxEffects.set(t,s)})}initDraggables(){this.queryAllByAttr("draggable").forEach(t=>{const e=this.parseAttrObject(t,"draggable",{}),r=new Ft(t,e);this.draggables.set(t,r)})}initLottieAnimations(){this.queryAllByAttr("lottie").forEach(t=>{const e=this.parseAttrString(t,"lottie"),r=e&&e.trim().startsWith("{")?Nt(e):{path:e,container:t},s=qt.createController({container:t,renderer:"svg",autoplay:!1,loop:!1,...r,...this.parseAttrObject(t,"lottie-options",{})});this.lottieControllers.set(t,s),this.bindPlaybackController(t,s,"lottie")})}initDotLottieAnimations(){this.queryAllByAttr("dotlottie").forEach(t=>{const e=this.parseAttrString(t,"dotlottie"),r=e&&e.trim().startsWith("{")?Nt(e):{src:e,canvas:t},s=jt.createController({canvas:t,autoplay:!1,loop:!1,...r,...this.parseAttrObject(t,"dotlottie-options",{})});this.dotLottieControllers.set(t,s),this.bindPlaybackController(t,s,"dotlottie")})}bindPlaybackController(t,e,r){const s=this.parseAttrString(t,`${r}-on`,"load"),n=this.parseAttrString(t,`${r}-action`,"play"),i=this.getAttr(t,`${r}-progress`),o=this.getAttr(t,`${r}-frame`),a=this.parseAttrString(t,`${r}-segment`,""),u=()=>{if(a){const[t,r]=a.split(",").map(t=>Number(t.trim()));Number.isFinite(t)&&Number.isFinite(r)&&(e.setSegment?.(t,r),e.playSegments?.([t,r],!0))}null!==i&&e.setProgress(Rt(i,0)),null!==o&&e.setFrame(Rt(o,0)),"play"===n?e.play():"pause"===n?e.pause():"stop"===n&&e.stop()};if("load"===s||"init"===s)return void u();if("inview"===s){const e=new Ot({trigger:t,onEnter:()=>u()});return void this.scrollTriggers.set(t,e)}const l=Xt[s]||s,h=()=>u();t.addEventListener(l,h),this.registerCleanup(()=>t.removeEventListener(l,h))}refreshScrollTriggers(){this.scrollTriggers.forEach(t=>{t.refresh?.()})}killAll(){this.timelines.forEach(t=>t.kill()),this.tweens.forEach(t=>t.kill()),this.scrollTriggers.forEach(t=>t.kill?.()),this.draggables.forEach(t=>t.destroy?.()),this.parallaxEffects.forEach(t=>t.destroy?.()),this.splitTexts.forEach(t=>t.revert?.()),this.lottieControllers.forEach(t=>t.destroy?.()),this.dotLottieControllers.forEach(t=>t.destroy?.())}getStats(){return{timelines:this.timelines.size,tweens:this.tweens.size,splitTexts:this.splitTexts.size,scrollTriggers:this.scrollTriggers.size,draggables:this.draggables.size,parallaxEffects:this.parallaxEffects.size,lottieControllers:this.lottieControllers.size,dotLottieControllers:this.dotLottieControllers.size}}};class Wt{constructor(t={}){this.interactions=new Map,this.activeInteractions=new Set,this.eventListeners=new Map,this.options={debug:!1,preventDefault:!0,globalEvents:!0,scope:null,...t},this.boundHandlers=new Map}on(t,e,r={}){return this.resolveTarget(t).forEach(t=>{const s=`${t.id||Math.random()}_${e}`,n={element:t,eventType:e,config:{animation:r.animation||{},duration:r.duration||.5,ease:r.ease||"ease-out",delay:r.delay||0,target:r.target||t,onStart:r.onStart||null,onComplete:r.onComplete||null,autoReverse:r.autoReverse||!1,reverseDelay:r.reverseDelay||0,...r}};this.interactions.set(s,n),this.attachListener(t,e,n)}),this}resolveTarget(t){if("string"==typeof t){const e=this.options.scope||document;return Array.from(e.querySelectorAll(t))}return[t]}attachListener(t,e,r){this.eventListeners.has(t)||this.eventListeners.set(t,new Map);const s=this.eventListeners.get(t);let n;switch(e){case"click":n=t=>{t.preventDefault?.(),this.executeAnimation(r,t)},t.addEventListener("click",n);break;case"hover":{const e=t=>this.executeAnimation(r,t),n=t=>{r.config.autoReverse&&this.reverseAnimation(r,t)};return t.addEventListener("mouseenter",e),t.addEventListener("mouseleave",n),s.set("hoverIn",e),void s.set("hoverOut",n)}case"focus":{n=t=>this.executeAnimation(r,t);const e=t=>{r.config.autoReverse&&this.reverseAnimation(r,t)};return t.addEventListener("focus",n),t.addEventListener("blur",e),s.set("focus",n),void s.set("blur",e)}case"touch":{n=t=>this.executeAnimation(r,t);const e=t=>{r.config.autoReverse&&this.reverseAnimation(r,t)};return t.addEventListener("touchstart",n),t.addEventListener("touchend",e),s.set("touchstart",n),void s.set("touchend",e)}case"pointer":{n=t=>this.executeAnimation(r,t);const e=t=>{r.config.autoReverse&&this.reverseAnimation(r,t)};return t.addEventListener("pointerdown",n),t.addEventListener("pointerup",e),s.set("pointerdown",n),void s.set("pointerup",e)}case"keyboard":return void this.attachKeyboardListener(t,r);case"doubletap":return void this.attachDoubleTapListener(t,r);case"longpress":return void this.attachLongPressListener(t,r);case"swipe":return void this.attachSwipeListener(t,r);case"wheel":n=t=>{t.preventDefault?.(),this.executeAnimation(r,t)},t.addEventListener("wheel",n,{passive:!1});break;default:n=t=>this.executeAnimation(r,t),t.addEventListener(e,n)}n&&s.set(e,n)}attachKeyboardListener(t,e){const r=t=>{const r=e.config.key;(!r||t.key===r||t.code===r)&&(t.preventDefault?.(),this.executeAnimation(e,t))};document.addEventListener("keydown",r),this.eventListeners.has(t)||this.eventListeners.set(t,new Map),this.eventListeners.get(t).set("keyboard",r)}attachDoubleTapListener(t,e){let r=0;const s=t=>{const s=(new Date).getTime(),n=s-r;n<300&&n>0&&this.executeAnimation(e,t),r=s};t.addEventListener("touchend",s),this.eventListeners.has(t)||this.eventListeners.set(t,new Map),this.eventListeners.get(t).set("doubletap",s)}attachLongPressListener(t,e){let r=null;const s=e.config.pressDuration||500,n=()=>{r=setTimeout(()=>{this.executeAnimation(e)},s)},i=()=>clearTimeout(r);t.addEventListener("mousedown",n),t.addEventListener("mouseup",i),t.addEventListener("mouseleave",i),this.eventListeners.has(t)||this.eventListeners.set(t,new Map),this.eventListeners.get(t).set("longpress",{onMouseDown:n,onMouseUp:i})}attachSwipeListener(t,e){let r,s;const n=t=>{r=t.changedTouches[0].screenX},i=t=>{s=t.changedTouches[0].screenX;const n=s-r,i=e.config.swipeThreshold||50;if(Math.abs(n)>i){const t=n>0?"right":"left";e.config.direction!==t&&e.config.direction||this.executeAnimation(e)}};t.addEventListener("touchstart",n),t.addEventListener("touchend",i),this.eventListeners.has(t)||this.eventListeners.set(t,new Map),this.eventListeners.get(t).set("swipe",{onTouchStart:n,onTouchEnd:i})}executeAnimation(t,e=null){const r=t.config,s=r.target||t.element;r.onStart?.(e,s);const n=new Ct(s,r.animation,{duration:r.duration,ease:r.ease,delay:r.delay,onComplete:()=>{r.onComplete?.(e,s)}});this.activeInteractions.add(n),this.options.debug&&g.debug(`Animation executed on ${s.tagName||"object"}`)}reverseAnimation(t){const e=t.config,r=e.target||t.element,s=this.reverseProps(e.animation),n=new Ct(r,s,{duration:e.duration,ease:e.ease,delay:e.reverseDelay});this.activeInteractions.add(n)}reverseProps(t){const e={};for(const[r,s]of Object.entries(t))e[r]="number"==typeof s?-s:"opacity"===r?1:"transform"===r?"none":s;return e}static initFromDOM(){const t=new Wt;return document.querySelectorAll("[data-anim-click]").forEach(e=>{const r=Nt(e.dataset.animClick||"{}");t.on(e,"click",r)}),document.querySelectorAll("[data-anim-hover]").forEach(e=>{const r=Nt(e.dataset.animHover||"{}");t.on(e,"hover",r)}),document.querySelectorAll("[data-anim-focus]").forEach(e=>{const r=Nt(e.dataset.animFocus||"{}");t.on(e,"focus",r)}),document.querySelectorAll("[data-anim-touch]").forEach(e=>{const r=Nt(e.dataset.animTouch||"{}");t.on(e,"touch",r)}),document.querySelectorAll("[data-anim-keyboard]").forEach(e=>{const r=Nt(e.dataset.animKeyboard||"{}");t.on(e,"keyboard",r)}),document.querySelectorAll("[data-anim-pointer]").forEach(e=>{const r=Nt(e.dataset.animPointer||"{}");t.on(e,"pointer",r)}),t}off(t,e){return this.resolveTarget(t).forEach(t=>{if(!this.eventListeners.has(t))return;const r=this.eventListeners.get(t);this.getHandlerKeys(e,r).forEach(e=>{this.removeStoredHandler(t,r,e)}),0===r.size&&this.eventListeners.delete(t)}),this}offAll(){return this.eventListeners.forEach((t,e)=>{Array.from(t.keys()).forEach(r=>{this.removeStoredHandler(e,t,r)})}),this.interactions.clear(),this.activeInteractions.clear(),this.eventListeners.clear(),this.boundHandlers.clear(),this}getHandlerKeys(t,e){if(!t)return Array.from(e.keys());return{hover:["hoverIn","hoverOut"],focus:["focus","blur"],touch:["touchstart","touchend"],pointer:["pointerdown","pointerup"],longpress:["longpress"],swipe:["swipe"]}[t]||[t]}removeStoredHandler(t,e,r){const s=e.get(r);s&&("keyboard"===r?document.removeEventListener("keydown",s):"hoverIn"===r?t.removeEventListener("mouseenter",s):"hoverOut"===r?t.removeEventListener("mouseleave",s):"touchstart"===r?t.removeEventListener("touchstart",s):"touchend"===r?t.removeEventListener("touchend",s):"pointerdown"===r?t.removeEventListener("pointerdown",s):"pointerup"===r?t.removeEventListener("pointerup",s):"longpress"===r?(t.removeEventListener("mousedown",s.onMouseDown),t.removeEventListener("mouseup",s.onMouseUp),t.removeEventListener("mouseleave",s.onMouseUp)):"swipe"===r?(t.removeEventListener("touchstart",s.onTouchStart),t.removeEventListener("touchend",s.onTouchEnd)):"wheel"===r?t.removeEventListener("wheel",s):t.removeEventListener(r,s),e.delete(r))}getStats(){return{totalInteractions:this.interactions.size,activeAnimations:this.activeInteractions.size,registeredElements:this.eventListeners.size}}}var Ht=Wt;var _t=class{constructor(t={}){this.scope=t.scope||null,this.instances=new Set,this.cleanups=[]}add(t){return t?(this.instances.add(t),t):t}addCleanup(t){return"function"==typeof t&&this.cleanups.push(t),t}resolveScopeTarget(t){return"string"==typeof t&&ut(this.scope)?Array.from(this.scope.querySelectorAll(t)):t}tween(t,e,r={}){return this.add(new Ct(this.resolveScopeTarget(t),e,{...r,scope:this.scope,paused:!1}))}to(t,e,r={}){return this.tween(t,e,r)}from(t,e,r={}){return this.add(new Ct(this.resolveScopeTarget(t),e,{...r,from:!0,scope:this.scope,paused:!1}))}fromTo(t,e,r,s={}){return this.add(new Ct(this.resolveScopeTarget(t),r,{...s,fromTo:e,scope:this.scope,paused:!1}))}set(t,e,r={}){return this.add(new Ct(this.resolveScopeTarget(t),e,{...r,duration:0,scope:this.scope,paused:!1}))}timeline(t={}){return this.add(new kt({...t,scope:t.scope||this.scope}))}interactions(t={}){return this.add(new Ht({...t,scope:t.scope||this.scope}))}initAttributes(t={}){const e=new Yt({...t,root:t.root||this.scope,autoInit:!1});return e.init(),this.add(e)}query(t){return ut(this.scope)?Array.from(this.scope.querySelectorAll(t)):[]}revert(){this.cleanups.slice().reverse().forEach(t=>t()),this.cleanups=[],this.instances.forEach(t=>{"function"==typeof t.revert?t.revert():"function"==typeof t.kill?t.kill():"function"==typeof t.destroy&&t.destroy()}),this.instances.clear()}};const Vt=(t,e,r={})=>{const s=r.speed||50,n=r.startDelay||0;let i=0;t.textContent="";const o=()=>{const n=setInterval(()=>{i<e.length?(t.textContent+=e[i],i++):(clearInterval(n),r.onComplete?.())},s)};n>0?setTimeout(o,1e3*n):o()},Qt=(t,e={})=>{const r=e.chars||"0123456789!@#$%^&*()_+-=[]{}|;:,.<>?/",s=t.textContent,n=e.duration||1,i=e.revealDelay||.05,o=performance.now(),a=u=>{const l=(u-o)/1e3,h=Math.min(l/n,1);let c="";for(let t=0;t<s.length;t++){c+=Math.max(0,h-t*i)>=1?s[t]:r[Math.floor(Math.random()*r.length)]}t.textContent=c,h<1?requestAnimationFrame(a):(t.textContent=s,e.onComplete?.())};requestAnimationFrame(a)},Zt=(t,e={})=>{const r=e.from||0,s=e.to||100,n=e.duration||1,i=e.ease||(t=>t),o=e.prefix||"",a=e.suffix||"",u=performance.now(),l=h=>{const c=(h-u)/1e3,p=Math.min(c/n,1),d=i(p),m=r+(s-r)*d;t.textContent=o+Math.floor(m)+a,p<1?requestAnimationFrame(l):e.onComplete?.()};requestAnimationFrame(l)},Jt=(t,e={})=>{const r=e.duration||1,s=performance.now(),n=i=>{const o=(i-s)/1e3,a=Math.min(o/r,1),u=10*(1-a);t.style.filter=`blur(${u}px)`,a<1?requestAnimationFrame(n):(t.style.filter="blur(0px)",e.onComplete?.())};requestAnimationFrame(n)},Kt=(t,e={})=>{const r=e.duration||1,s=e.wave||10,n=e.speed||1,i=t.textContent;t.innerHTML="";const o=i.split("").map(e=>{const r=document.createElement("span");return r.textContent=e,r.style.display="inline-block",t.appendChild(r),r}),a=performance.now(),u=t=>{const i=(t-a)/1e3;o.forEach((t,e)=>{const r=Math.sin((i*n+.1*e)*Math.PI)*s;t.style.transform=`translateY(${r}px)`}),i<r?requestAnimationFrame(u):e.onComplete?.()};requestAnimationFrame(u)};var Gt=class{constructor(t,e={}){this.element=t,this.url=e.src||t.dataset.animVideoUrl,this.autoplay=!1!==e.autoplay,this.muted=!1!==e.muted,this.objectFit=e.objectFit||"cover",this.video=null,this.createVideo()}createVideo(){this.video=document.createElement("video"),this.video.src=this.url,this.video.muted=this.muted,this.video.playsInline=!0,this.video.preload="auto",this.video.style.position="absolute",this.video.style.top="0",this.video.style.left="0",this.video.style.width="100%",this.video.style.height="100%",this.video.style.objectFit=this.objectFit,this.video.style.zIndex="-1",this.element.style.position="relative",this.element.style.overflow="hidden",this.element.prepend(this.video),this.autoplay&&this.video.play().catch(()=>{g.warn("Video autoplay failed")})}scrubToProgress(t){this.video&&this.video.duration&&(this.video.currentTime=t*this.video.duration)}play(){this.video?.play()}pause(){this.video?.pause()}destroy(){this.video?.remove()}};var te=class{static isSupported(){try{const t=document.createElement("canvas");return!!t.getContext("webgl")||!!t.getContext("webgl2")}catch{return!1}}static createContext(t){return t.getContext("webgl2")||t.getContext("webgl")}};var ee=class{static resolveLibrary(t){if(t)return t;const e=ot();if(e?.THREE)return e.THREE;throw new Error("Three.js is not loaded")}static isLoaded(){const t=ot();return void 0!==t?.THREE}static get THREE(){return this.resolveLibrary()}static tween(t,e,r={}){return new Ct(t,e,{...r,paused:!0===r.paused,render:e=>{r.renderer?.render?.(r.scene,r.camera),r.onRender?.(e,t)}})}static orbit(t,e={}){const r={angle:e.fromAngle||0},s=e.radius||5,n=e.center||{x:0,y:0,z:0};return new Ct(r,{angle:void 0===e.toAngle?2*Math.PI:e.toAngle},{duration:e.duration||2,ease:e.ease||"linear",paused:!0===e.paused,repeat:e.repeat||0,render:()=>{t.position.x=n.x+Math.cos(r.angle)*s,t.position.z=n.z+Math.sin(r.angle)*s,t.position.y=n.y,"function"==typeof t.lookAt&&t.lookAt(n.x,n.y,n.z),e.renderer?.render?.(e.scene,e.camera)}})}};const re=(t,e=null)=>{if(!t)return e;if("string"==typeof t)try{return document.querySelector(t)||e}catch(t){return e}return t},se=(t,e=[])=>{if(!t)return e;if("string"==typeof t)try{return Array.from(document.querySelectorAll(t))}catch(t){return e}return t instanceof Element?[t]:Array.isArray(t)?t:e},ne=(t,e)=>t.classList.contains(e),ie=(t,e)=>t.classList.add(e),oe=(t,e)=>t.classList.remove(e),ae=(t,e)=>t.classList.toggle(e),ue=(t,e,r)=>{t.dataset[e]=r},le=(t,e,r=null)=>t.dataset[e]||r,he=(t={},e="am")=>Object.entries(t).reduce((t,[r,s])=>{if(null==s||!1===s)return t;const n=`${e}-${r.replace(/[A-Z]/g,t=>`-${t.toLowerCase()}`)}`,i=(t=>{if(null!=t&&!1!==t)return"string"==typeof t?t:"number"==typeof t||"boolean"==typeof t?String(t):JSON.stringify(t)})(s);return void 0===i||(t[n]=i),t},{[e]:""});var ce={version:"1.1.0",AnimationCore:Yt,AnimationContext:_t,Timeline:kt,Tween:Ct,Easing:s,SplitText:It,ScrollTrigger:Ot,Draggable:Ft,ParallaxEffect:Pt,TextEffects:o,VideoAnimation:Gt,Interactions:Ht,WebGLSupport:te,ThreeJsSupport:ee,LottieSupport:qt,DotLottieSupport:jt,animotionAttrs:he,DomUtils:a,EnvironmentUtils:n,MathUtils:r,ParserUtils:i,Logger:g,init(t={}){const e=new Yt(t);return e.init(),e},initAttributes(t={}){return this.init(t)},timeline(t={}){return new kt(t)},tween(t,e,r={}){return new Ct(t,e,r)},to(t,e,r={}){return new Ct(t,e,{...r,paused:!1})},from(t,e,r={}){return new Ct(t,e,{...r,from:!0,paused:!1})},fromTo(t,e,r,s={}){return new Ct(t,r,{...s,fromTo:e,paused:!1})},set(t,e){return new Ct(t,e,{duration:0,paused:!1})},interactions(t={}){return new Ht(t)},initInteractions(){return Ht.initFromDOM()},context(t={}){return new _t(t)},lottie(t,e={}){return qt.createController(t,e)},dotLottie(t,e={}){return jt.createController(t,e)},getTimeline(t){return ot()?.__ANIMOTION__?.timelines?.get(t)||null},getSplitText(t){return ot()?.__ANIMOTION__?.splitTexts?.get(t)||null}};return e}()});
|
package/package.json
ADDED
|
@@ -0,0 +1,100 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "animotionjs-plus",
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"description": "An advanced custom web animation engine for Vanilla JS, React, and Next.js with CSS, Three.js, Lottie, and dotLottie support.",
|
|
5
|
+
"main": "dist/animotion.min.js",
|
|
6
|
+
"module": "src/index.core.js",
|
|
7
|
+
"types": "src/index.d.ts",
|
|
8
|
+
"style": "dist/animotion.min.css",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"import": "./src/index.core.js",
|
|
12
|
+
"default": "./dist/animotion.min.js"
|
|
13
|
+
},
|
|
14
|
+
"./react": "./src/framework/react.js",
|
|
15
|
+
"./next": "./src/framework/next.js",
|
|
16
|
+
"./attrs": "./src/framework/attrs.js",
|
|
17
|
+
"./styles.css": "./dist/animotion.min.css"
|
|
18
|
+
},
|
|
19
|
+
"scripts": {
|
|
20
|
+
"start": "webpack --mode development --watch",
|
|
21
|
+
"build": "webpack --mode production",
|
|
22
|
+
"build:dev": "webpack --mode development",
|
|
23
|
+
"test": "jest",
|
|
24
|
+
"test:watch": "jest --watch",
|
|
25
|
+
"test:coverage": "jest --coverage",
|
|
26
|
+
"lint": "eslint src/",
|
|
27
|
+
"lint:fix": "eslint src/ --fix",
|
|
28
|
+
"format": "prettier --write \"src/**/*.js\"",
|
|
29
|
+
"docs": "jsdoc -c jsdoc.json",
|
|
30
|
+
"prebuild": "npm run lint",
|
|
31
|
+
"pretest": "npm run lint",
|
|
32
|
+
"serve": "http-server dist -p 8080 -c-1 --cors",
|
|
33
|
+
"release": "npm run build && npm publish"
|
|
34
|
+
},
|
|
35
|
+
"keywords": [
|
|
36
|
+
"animation",
|
|
37
|
+
"gsap-free",
|
|
38
|
+
"timeline",
|
|
39
|
+
"scroll-trigger",
|
|
40
|
+
"split-text",
|
|
41
|
+
"webgl",
|
|
42
|
+
"three.js",
|
|
43
|
+
"lottie",
|
|
44
|
+
"vanilla-js",
|
|
45
|
+
"es6",
|
|
46
|
+
"animation-library",
|
|
47
|
+
"web-animation",
|
|
48
|
+
"react-animation",
|
|
49
|
+
"nextjs-animation",
|
|
50
|
+
"dotlottie"
|
|
51
|
+
],
|
|
52
|
+
"author": "Your Name <your.email@example.com>",
|
|
53
|
+
"license": "MIT",
|
|
54
|
+
"repository": {
|
|
55
|
+
"type": "git",
|
|
56
|
+
"url": "https://github.com/yourusername/animotion.git"
|
|
57
|
+
},
|
|
58
|
+
"bugs": {
|
|
59
|
+
"url": "https://github.com/yourusername/animotion/issues"
|
|
60
|
+
},
|
|
61
|
+
"homepage": "https://github.com/yourusername/animotion#readme",
|
|
62
|
+
"devDependencies": {
|
|
63
|
+
"@babel/core": "^7.20.0",
|
|
64
|
+
"@babel/preset-env": "^7.20.0",
|
|
65
|
+
"babel-loader": "^9.1.0",
|
|
66
|
+
"css-loader": "^6.7.0",
|
|
67
|
+
"eslint": "^8.30.0",
|
|
68
|
+
"http-server": "^14.1.1",
|
|
69
|
+
"jest": "^29.3.0",
|
|
70
|
+
"jest-environment-jsdom": "^29.3.0",
|
|
71
|
+
"jsdoc": "^4.0.0",
|
|
72
|
+
"mini-css-extract-plugin": "^2.7.0",
|
|
73
|
+
"prettier": "^2.8.0",
|
|
74
|
+
"style-loader": "^3.3.0",
|
|
75
|
+
"terser-webpack-plugin": "^5.3.0",
|
|
76
|
+
"webpack": "^5.75.0",
|
|
77
|
+
"webpack-cli": "^5.0.0"
|
|
78
|
+
},
|
|
79
|
+
"peerDependencies": {
|
|
80
|
+
"three": "^r128",
|
|
81
|
+
"@lottiefiles/dotlottie-web": "^0.27.0"
|
|
82
|
+
},
|
|
83
|
+
"peerDependenciesMeta": {
|
|
84
|
+
"three": {
|
|
85
|
+
"optional": true
|
|
86
|
+
},
|
|
87
|
+
"@lottiefiles/dotlottie-web": {
|
|
88
|
+
"optional": true
|
|
89
|
+
}
|
|
90
|
+
},
|
|
91
|
+
"engines": {
|
|
92
|
+
"node": ">=14.0.0",
|
|
93
|
+
"npm": ">=6.0.0"
|
|
94
|
+
},
|
|
95
|
+
"browserslist": [
|
|
96
|
+
"> 1%",
|
|
97
|
+
"last 2 versions",
|
|
98
|
+
"not dead"
|
|
99
|
+
]
|
|
100
|
+
}
|