@wix/motion 2.1.6 → 2.1.7
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 +129 -123
- package/dist/cjs/motion.js +1 -1
- package/dist/cjs/motion.js.map +1 -1
- package/dist/es/motion.js +212 -206
- package/dist/es/motion.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/dist/types/AnimationGroup.d.ts +2 -0
- package/dist/types/AnimationGroup.d.ts.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,182 +1,188 @@
|
|
|
1
|
-
#
|
|
1
|
+
# @wix/motion
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Low-level, web-native animation engine — WAAPI, CSS, scroll-driven, and pointer-tracking animations with a single dependency.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
[](https://www.npmjs.com/package/@wix/motion)
|
|
6
|
+
[](https://bundlephobia.com/package/@wix/motion)
|
|
7
|
+
[](https://github.com/wix/interact/blob/master/LICENSE)
|
|
6
8
|
|
|
7
|
-
|
|
8
|
-
- **82+ Animation Presets** - Professionally designed animations ready to use
|
|
9
|
-
- **5 Animation Categories** - Entrance, Ongoing, Scroll, Mouse, and Background Scroll effects
|
|
10
|
-
- **TypeScript Support** - Complete type definitions with IntelliSense support
|
|
11
|
-
- **Dual Rendering** - Both Web Animations API and CSS-based rendering
|
|
12
|
-
- **Scroll Integration** - Advanced scroll-driven animations with ViewTimeline API support
|
|
13
|
-
- **Mouse Parallax** - Interactive pointer-based animations
|
|
14
|
-
- **Performance Optimized** - Uses fastdom to minimize layout thrashing
|
|
9
|
+
## Why Motion?
|
|
15
10
|
|
|
16
|
-
|
|
11
|
+
- **Native-first** — Built directly on the Web Animations API and CSS Animations.
|
|
12
|
+
- **ViewTimeline** — First-class scroll-driven animations via the ViewTimeline API, with a scrub fallback when the API is unavailable.
|
|
13
|
+
- **Pointer-driven** — `pointer-move` animations map cursor `(x, y)` progress to effects, with optional transition smoothing.
|
|
14
|
+
- **Custom effects** — Plug in programmatic render callbacks — no preset registration required.
|
|
15
|
+
- **Dual rendering** — Choose CSS for declarative effects or WAAPI for fine-grained control, using the same options shape.
|
|
16
|
+
- **Performance** — `fastdom` batches DOM reads/writes; no `requestAnimationFrame` loop (except for customEffect callbacks).
|
|
17
|
+
- **Pluggable presets** — `registerEffects()` accepts any effect module. Use [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) or create your own.
|
|
17
18
|
|
|
18
|
-
|
|
19
|
+
## Install
|
|
19
20
|
|
|
20
21
|
```bash
|
|
21
22
|
npm install @wix/motion
|
|
22
23
|
```
|
|
23
24
|
|
|
24
|
-
|
|
25
|
+
## Quick Start
|
|
26
|
+
|
|
27
|
+
### Time-based animation (WAAPI)
|
|
25
28
|
|
|
26
29
|
```typescript
|
|
27
30
|
import { getWebAnimation } from '@wix/motion';
|
|
28
31
|
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
32
|
+
const animation = getWebAnimation(document.getElementById('hero'), {
|
|
33
|
+
keyframeEffect: {
|
|
34
|
+
name: 'fade-up',
|
|
35
|
+
keyframes: [
|
|
36
|
+
{ opacity: 0, transform: 'translateY(20px)' },
|
|
37
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
38
|
+
],
|
|
39
|
+
},
|
|
40
|
+
duration: 600,
|
|
41
|
+
easing: 'ease-out',
|
|
34
42
|
});
|
|
35
43
|
|
|
36
|
-
|
|
37
|
-
await animation.play();
|
|
44
|
+
animation.play();
|
|
38
45
|
```
|
|
39
46
|
|
|
40
|
-
### Scroll-
|
|
47
|
+
### Scroll-driven (ViewTimeline)
|
|
41
48
|
|
|
42
49
|
```typescript
|
|
43
|
-
import {
|
|
50
|
+
import { getWebAnimation } from '@wix/motion';
|
|
44
51
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
52
|
+
const scrollRoot = document.getElementById('scrollRoot')!;
|
|
53
|
+
|
|
54
|
+
const animation = getWebAnimation(
|
|
55
|
+
document.getElementById('parallax'),
|
|
48
56
|
{
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
57
|
+
keyframeEffect: {
|
|
58
|
+
name: 'parallax',
|
|
59
|
+
keyframes: [{ transform: 'translateY(80px)' }, { transform: 'translateY(-80px)' }],
|
|
52
60
|
},
|
|
61
|
+
startOffset: { name: 'cover', offset: { value: 0, unit: 'percentage' } },
|
|
62
|
+
endOffset: { name: 'cover', offset: { value: 100, unit: 'percentage' } },
|
|
53
63
|
},
|
|
54
|
-
{ trigger: 'view-progress', element:
|
|
64
|
+
{ trigger: 'view-progress', element: scrollRoot },
|
|
55
65
|
);
|
|
56
66
|
```
|
|
57
67
|
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
### 🎭 Entrance Animations (24 presets)
|
|
61
|
-
|
|
62
|
-
Perfect for element reveals and page transitions:
|
|
63
|
-
|
|
64
|
-
- **FadeIn** - Simple opacity transition
|
|
65
|
-
- **ArcIn** - Curved motion with 3D rotation
|
|
66
|
-
- **BounceIn** - Spring-based entrance with bounce effect
|
|
67
|
-
- **SlideIn** - Directional slides from off-screen
|
|
68
|
-
- **FlipIn** - 3D flip transitions
|
|
69
|
-
- [See all entrance animations →](docs/categories/entrance-animations.md)
|
|
70
|
-
|
|
71
|
-
### 🔄 Ongoing Animations (16 presets)
|
|
72
|
-
|
|
73
|
-
Continuous looping animations for attention and delight:
|
|
74
|
-
|
|
75
|
-
- **Pulse** - Rhythmic scaling effect
|
|
76
|
-
- **Breathe** - Organic scaling animation
|
|
77
|
-
- **Spin** - Smooth rotation loops
|
|
78
|
-
- **Wiggle** - Playful shake motions
|
|
79
|
-
- **Float** - Gentle floating movement
|
|
80
|
-
- [See all ongoing animations →](docs/categories/ongoing-animations.md)
|
|
81
|
-
|
|
82
|
-
### 📜 Scroll Animations (19 presets)
|
|
83
|
-
|
|
84
|
-
Scroll-synchronized effects that respond to viewport position:
|
|
68
|
+
### Scroll-driven (polyfill / custom scrubbing)
|
|
85
69
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
- **GrowScroll** - Scale transformations
|
|
89
|
-
- **RevealScroll** - Clip-path reveals
|
|
90
|
-
- **TiltScroll** - 3D perspective tilting
|
|
91
|
-
- [See all scroll animations →](docs/categories/scroll-animations.md)
|
|
70
|
+
```typescript
|
|
71
|
+
import { getScrubScene } from '@wix/motion';
|
|
92
72
|
|
|
93
|
-
|
|
73
|
+
const scrollRoot = document.getElementById('scrollRoot')!;
|
|
94
74
|
|
|
95
|
-
|
|
75
|
+
const scenes = getScrubScene(
|
|
76
|
+
document.getElementById('parallax'),
|
|
77
|
+
{
|
|
78
|
+
keyframeEffect: {
|
|
79
|
+
name: 'parallax',
|
|
80
|
+
keyframes: [{ transform: 'translateY(80px)' }, { transform: 'translateY(-80px)' }],
|
|
81
|
+
},
|
|
82
|
+
startOffset: { name: 'cover', offset: { value: 0, unit: 'percentage' } },
|
|
83
|
+
endOffset: { name: 'cover', offset: { value: 100, unit: 'percentage' } },
|
|
84
|
+
},
|
|
85
|
+
{ trigger: 'view-progress', element: scrollRoot },
|
|
86
|
+
);
|
|
87
|
+
// Drive each scene's `effect(scene, progress)` from your own scroll/IO listener
|
|
88
|
+
// when ViewTimeline is unavailable.
|
|
89
|
+
```
|
|
96
90
|
|
|
97
|
-
|
|
98
|
-
- **Tilt3DMouse** - 3D tilt based on pointer position
|
|
99
|
-
- **ScaleMouse** - Dynamic scaling on hover
|
|
100
|
-
- **BlurMouse** - Motion blur effects
|
|
101
|
-
- [See all mouse animations →](docs/categories/mouse-animations.md)
|
|
91
|
+
Quickstart examples use `keyframeEffect` (inline keyframes) so they run without registering presets.
|
|
102
92
|
|
|
103
|
-
|
|
93
|
+
## Animation Modes
|
|
104
94
|
|
|
105
|
-
|
|
95
|
+
| Mode | Driver | API |
|
|
96
|
+
| -------------- | ----------------------------- | ---------------------------------------------- |
|
|
97
|
+
| Time-based | Duration + easing | `getWebAnimation()` / `getCSSAnimation()` |
|
|
98
|
+
| Scroll-driven | ViewTimeline / external scrub | `getScrubScene()` with `view-progress` trigger |
|
|
99
|
+
| Pointer-driven | Mouse / touch position | `getScrubScene()` with `pointer-move` trigger |
|
|
106
100
|
|
|
107
|
-
|
|
108
|
-
- **BgZoom** - Dynamic background scaling
|
|
109
|
-
- **BgFade** - Background opacity transitions
|
|
110
|
-
- **BgRotate** - Background rotation effects
|
|
111
|
-
- [See all background animations →](docs/categories/background-scroll-animations.md)
|
|
101
|
+
## Core API
|
|
112
102
|
|
|
113
|
-
|
|
103
|
+
| Function | Purpose |
|
|
104
|
+
| -------------------- | ----------------------------------------------------------- |
|
|
105
|
+
| `getWebAnimation()` | Create WAAPI-backed animations (time- or scroll-linked) |
|
|
106
|
+
| `getCSSAnimation()` | Generate CSS animation descriptors for stylesheet injection |
|
|
107
|
+
| `getScrubScene()` | Build scroll-polyfill or pointer-driven scrub scenes |
|
|
108
|
+
| `prepareAnimation()` | Pre-measure / mutate DOM via `fastdom` before animating |
|
|
109
|
+
| `getAnimation()` | Auto-select CSS (if present) or WAAPI path |
|
|
110
|
+
| `getSequence()` | Coordinate staggered groups with easing-based offsets |
|
|
111
|
+
| `registerEffects()` | Register named effect modules into the global registry |
|
|
114
112
|
|
|
115
|
-
|
|
113
|
+
See [`docs/api/`](https://github.com/wix/interact/blob/master/packages/motion/docs/api/README.md) for full signatures and options.
|
|
116
114
|
|
|
117
|
-
|
|
118
|
-
- `getScrubScene()` - Generate scroll/pointer-driven scenes
|
|
119
|
-
- `prepareAnimation()` - Pre-calculate measurements for performance
|
|
115
|
+
## Custom Effects
|
|
120
116
|
|
|
121
|
-
|
|
117
|
+
Three ways to define what an animation does:
|
|
122
118
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
-
|
|
119
|
+
1. **Inline keyframes** — pass `keyframeEffect: { name, keyframes }` directly. Zero registration.
|
|
120
|
+
2. **Custom callback** — pass `customEffect: (element, progress) => void` for full programmatic control per frame.
|
|
121
|
+
3. **Named presets** — pass `namedEffect: { type: '…', …params }` referencing effects you've registered via `registerEffects()` (use [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) or your own modules).
|
|
126
122
|
|
|
127
|
-
|
|
123
|
+
## Sequences and Staggering
|
|
128
124
|
|
|
129
|
-
|
|
125
|
+
`getSequence()` plays multiple animations with staggered start times. Pass `offset` (ms between each start) and an optional `offsetEasing` to shape how the offsets are distributed across the sequence.
|
|
130
126
|
|
|
131
127
|
```typescript
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
128
|
+
import { getSequence } from '@wix/motion';
|
|
129
|
+
|
|
130
|
+
const sequence = getSequence(
|
|
131
|
+
{ offset: 150, offsetEasing: 'quadIn' },
|
|
132
|
+
Array.from(document.querySelectorAll('.card')).map((el) => ({
|
|
133
|
+
target: el,
|
|
134
|
+
options: {
|
|
135
|
+
duration: 600,
|
|
136
|
+
easing: 'ease-out',
|
|
137
|
+
keyframeEffect: {
|
|
138
|
+
name: 'fade-up',
|
|
139
|
+
keyframes: [
|
|
140
|
+
{ opacity: 0, transform: 'translateY(20px)' },
|
|
141
|
+
{ opacity: 1, transform: 'translateY(0)' },
|
|
142
|
+
],
|
|
143
|
+
},
|
|
144
|
+
},
|
|
145
|
+
})),
|
|
146
|
+
);
|
|
139
147
|
|
|
140
|
-
|
|
148
|
+
sequence.play();
|
|
149
|
+
```
|
|
141
150
|
|
|
142
|
-
|
|
143
|
-
- **[Core Concepts](docs/core-concepts.md)** - Understanding the animation system
|
|
144
|
-
- **[API Reference](docs/api/)** - Complete function documentation
|
|
145
|
-
- **[Category Guides](docs/categories/)** - Detailed category overviews
|
|
146
|
-
- **[Preset Reference](docs/presets/)** - Individual animation documentation
|
|
147
|
-
- **[Advanced Usage](docs/guides/)** - Performance tips and patterns
|
|
151
|
+
See [`docs/api/get-sequence.md`](https://github.com/wix/interact/blob/master/packages/motion/docs/api/get-sequence.md) for the full stagger model.
|
|
148
152
|
|
|
149
|
-
##
|
|
153
|
+
## ViewTimeline and Polyfills
|
|
150
154
|
|
|
151
|
-
|
|
155
|
+
Motion is built around progressive enhancement:
|
|
152
156
|
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
157
|
+
- **Native path** — when `window.ViewTimeline` is available, `getWebAnimation()` with a `view-progress` trigger returns a WAAPI animation linked to the scroll timeline.
|
|
158
|
+
- **Polyfill path** — `getScrubScene()` with `view-progress` returns `ScrubScrollScene[]` objects exposing `start`, `end`, `viewSource`, and `effect(scene, progress)`. Drive these from your own IntersectionObserver/scroll listener. If using `@wix/interact`, its bundled scroll polyfill - [`fizban`](https://github.com/wix-incubator/fizban) - handles this automatically.
|
|
159
|
+
- **Pointer smoothing** — `ScrubPointerScene` accepts `transitionDuration` and `transitionEasing` so pointer-tracking effects don't snap to the cursor.
|
|
156
160
|
|
|
157
|
-
##
|
|
161
|
+
## Performance Notes
|
|
158
162
|
|
|
159
|
-
|
|
163
|
+
- `prepareAnimation()` runs `fastdom` measure/mutate phases before the animation starts, avoiding layout thrash.
|
|
164
|
+
- The CSS rendering path (`getCSSAnimation`) offloads work to the compositor thread.
|
|
165
|
+
- No `requestAnimationFrame` loop runs unless a `customEffect` callback is used.
|
|
160
166
|
|
|
161
|
-
|
|
162
|
-
- GSAP and Framer Motion compatibility
|
|
163
|
-
- CSS-in-JS libraries
|
|
164
|
-
- Server-side rendering support
|
|
167
|
+
## Browser Support
|
|
165
168
|
|
|
166
|
-
|
|
169
|
+
Modern evergreen browsers with Web Animations API support (Chrome, Edge, Firefox, Safari). The ViewTimeline API is used where available; pair `getScrubScene()` with an external driver for older browsers.
|
|
167
170
|
|
|
168
|
-
|
|
169
|
-
- **Progressive enhancement** with CSS fallbacks
|
|
170
|
-
- **ViewTimeline API** for advanced scroll effects (with polyfill)
|
|
171
|
+
## Related Packages
|
|
171
172
|
|
|
172
|
-
|
|
173
|
+
Motion is the engine layer. The other packages in this repo build on top of it:
|
|
173
174
|
|
|
174
|
-
|
|
175
|
+
- [`@wix/interact`](https://github.com/wix/interact/tree/master/packages/interact) — declarative, config-driven interaction layer built on Motion.
|
|
176
|
+
- [`@wix/motion-presets`](https://github.com/wix/interact/tree/master/packages/motion-presets) — ready-made effect catalog (entrance, ongoing, scroll, mouse, background-scroll).
|
|
175
177
|
|
|
176
|
-
##
|
|
178
|
+
## Documentation
|
|
177
179
|
|
|
178
|
-
|
|
180
|
+
- [Getting Started](https://github.com/wix/interact/blob/master/packages/motion/docs/getting-started.md)
|
|
181
|
+
- [Core Concepts](https://github.com/wix/interact/blob/master/packages/motion/docs/core-concepts.md)
|
|
182
|
+
- [API Reference](https://github.com/wix/interact/blob/master/packages/motion/docs/api/README.md)
|
|
183
|
+
- [Category Guides](https://github.com/wix/interact/blob/master/packages/motion/docs/categories/README.md)
|
|
184
|
+
- [Advanced Patterns](https://github.com/wix/interact/blob/master/packages/motion/docs/guides/README.md)
|
|
179
185
|
|
|
180
|
-
|
|
186
|
+
## License
|
|
181
187
|
|
|
182
|
-
|
|
188
|
+
[MIT](https://github.com/wix/interact/blob/master/LICENSE)
|
package/dist/cjs/motion.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{animations;options;ready;isCSS;longestAnimation;constructor(e,n){this.animations=e,this.options=n,this.ready=n?.measured||Promise.resolve(),this.isCSS=e[0]instanceof CSSAnimation,this.longestAnimation=this._getAnimationWithLongestEndTime()}_getAnimationWithLongestEndTime(){return this.animations.reduce((e,n)=>{const i=e.effect?.getComputedTiming().endTime??0,s=n.effect?.getComputedTiming().endTime??0;return i>s?e:n},this.animations[0])}getProgress(){return this.longestAnimation?.effect?.getComputedTiming().progress||0}async play(e){await this.ready;for(const n of this.animations)n.play();await Promise.all(this.animations.map(n=>n.ready)),e&&e()}pause(){for(const e of this.animations)e.pause()}async reverse(e){await this.ready;for(const n of this.animations)n.reverse();await Promise.all(this.animations.map(n=>n.ready)),e&&e()}progress(e){for(const n of this.animations){const{delay:i,duration:s,iterations:r}=n.effect.getTiming(),c=(Number.isFinite(s)?s:0)*(Number.isFinite(r)?r:1);n.currentTime=((i||0)+c)*e}}cancel(){for(const e of this.animations)e.cancel()}setPlaybackRate(e){for(const n of this.animations)n.playbackRate=e}async onFinish(e){try{await Promise.all(this.animations.map(i=>i.finished));const n=this.animations[0];if(n&&!this.isCSS){const i=n.effect?.target;if(i){const s=new Event("animationend");i.dispatchEvent(s)}}e()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}async onAbort(e){try{await Promise.all(this.animations.map(n=>n.finished))}catch(n){if(n.name==="AbortError"){const i=this.animations[0];if(i&&!this.isCSS){const s=i.effect?.target;if(s){const r=new Event("animationcancel");s.dispatchEvent(r)}}e()}}}get finished(){return Promise.all(this.animations.map(e=>e.finished))}get playState(){return this.animations[0]?.playState}getTimingOptions(){return this.animations.map(e=>{const n=e.effect?.getTiming(),i=n?.delay??0,s=Number(n?.duration)||0,r=n?.iterations??1;return{delay:i,duration:s,iterations:r}})}}const P=t=>t,L=t=>1-Math.cos(t*Math.PI/2),j=t=>Math.sin(t*Math.PI/2),H=t=>-(Math.cos(Math.PI*t)-1)/2,W=t=>t**2,V=t=>1-(1-t)**2,B=t=>t<.5?2*t**2:1-(-2*t+2)**2/2,K=t=>t**3,J=t=>1-(1-t)**3,U=t=>t<.5?4*t**3:1-(-2*t+2)**3/2,X=t=>t**4,Y=t=>1-(1-t)**4,Q=t=>t<.5?8*t**4:1-(-2*t+2)**4/2,Z=t=>t**5,tt=t=>1-(1-t)**5,et=t=>t<.5?16*t**5:1-(-2*t+2)**5/2,nt=t=>t===0?0:2**(10*t-10),it=t=>t===1?1:1-2**(-10*t),st=t=>t===0?0:t===1?1:t<.5?2**(20*t-10)/2:(2-2**(-20*t+10))/2,rt=t=>1-Math.sqrt(1-t**2),ot=t=>Math.sqrt(1-(t-1)**2),at=t=>t<.5?(1-Math.sqrt(1-4*t**2))/2:(Math.sqrt(-(2*t-3)*(2*t-1))+1)/2,ct=t=>2.70158*t**3-1.70158*t**2,ut=t=>1+2.70158*(t-1)**3+1.70158*(t-1)**2,ft=(t,e=1.70158*1.525)=>t<.5?(2*t)**2*((e+1)*2*t-e)/2:((2*t-2)**2*((e+1)*(t*2-2)+e)+2)/2,q={linear:P,sineIn:L,sineOut:j,sineInOut:H,quadIn:W,quadOut:V,quadInOut:B,cubicIn:K,cubicOut:J,cubicInOut:U,quartIn:X,quartOut:Y,quartInOut:Q,quintIn:Z,quintOut:tt,quintInOut:et,expoIn:nt,expoOut:it,expoInOut:st,circIn:rt,circOut:ot,circInOut:at,backIn:ct,backOut:ut,backInOut:ft},S={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",sineIn:"cubic-bezier(0.47, 0, 0.745, 0.715)",sineOut:"cubic-bezier(0.39, 0.575, 0.565, 1)",sineInOut:"cubic-bezier(0.445, 0.05, 0.55, 0.95)",quadIn:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",quadOut:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",quadInOut:"cubic-bezier(0.455, 0.03, 0.515, 0.955)",cubicIn:"cubic-bezier(0.55, 0.055, 0.675, 0.19)",cubicOut:"cubic-bezier(0.215, 0.61, 0.355, 1)",cubicInOut:"cubic-bezier(0.645, 0.045, 0.355, 1)",quartIn:"cubic-bezier(0.895, 0.03, 0.685, 0.22)",quartOut:"cubic-bezier(0.165, 0.84, 0.44, 1)",quartInOut:"cubic-bezier(0.77, 0, 0.175, 1)",quintIn:"cubic-bezier(0.755, 0.05, 0.855, 0.06)",quintOut:"cubic-bezier(0.23, 1, 0.32, 1)",quintInOut:"cubic-bezier(0.86, 0, 0.07, 1)",expoIn:"cubic-bezier(0.95, 0.05, 0.795, 0.035)",expoOut:"cubic-bezier(0.19, 1, 0.22, 1)",expoInOut:"cubic-bezier(1, 0, 0, 1)",circIn:"cubic-bezier(0.6, 0.04, 0.98, 0.335)",circOut:"cubic-bezier(0.075, 0.82, 0.165, 1)",circInOut:"cubic-bezier(0.785, 0.135, 0.15, 0.86)",backIn:"cubic-bezier(0.6, -0.28, 0.735, 0.045)",backOut:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",backInOut:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function mt(t){return t==="percentage"?"%":t||"px"}function lt(t){return t?S[t]||t:S.linear}function It(t,e,n,i){const s=3*t,r=3*(n-t)-s,c=1-s-r,a=3*e,m=3*(i-e)-a,l=1-a-m,o=h=>((c*h+r)*h+s)*h,u=h=>((l*h+m)*h+a)*h,f=h=>(3*c*h+2*r)*h+s;function p(h){let d=h;for(let b=0;b<8;b++){const y=o(d)-h;if(Math.abs(y)<1e-7)return d;const O=f(d);if(Math.abs(O)<1e-6)break;d-=y/O}let E=0,g=1;for(d=(E+g)/2;g-E>1e-7;){const b=o(d);if(Math.abs(b-h)<1e-7)return d;h>b?E=d:g=d,d=(E+g)/2}return d}return h=>h<=0?0:h>=1?1:u(p(h))}function _t(t){const e=t.match(/^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/);if(!e)return;const n=parseFloat(e[1]),i=parseFloat(e[2]),s=parseFloat(e[3]),r=parseFloat(e[4]);if(![n,i,s,r].some(isNaN))return It(n,i,s,r)}function wt(t){const e=t.match(/^linear\((.+)\)$/);if(!e)return;const n=e[1].split(",").map(c=>c.trim()).filter(Boolean);if(n.length===0)return;const i=[];for(const c of n){const a=c.split(/\s+/),m=parseFloat(a[0]);if(isNaN(m))return;const l=[];for(let o=1;o<a.length;o++)if(a[o].endsWith("%")){const u=parseFloat(a[o])/100;if(isNaN(u))return;l.push(u)}l.length===0?i.push({output:m,pos:null}):l.length===1?i.push({output:m,pos:l[0]}):(i.push({output:m,pos:l[0]}),i.push({output:m,pos:l[1]}))}if(i.length===0)return;i[0].pos===null&&(i[0].pos=0),i[i.length-1].pos===null&&(i[i.length-1].pos=1);let s=0;for(;s<i.length;)if(i[s].pos===null){const c=s-1;let a=s;for(;a<i.length&&i[a].pos===null;)a++;const m=i[c].pos,l=i[a].pos,o=a-c;for(let u=c+1;u<a;u++)i[u].pos=m+(l-m)*(u-c)/o;s=a+1}else s++;for(let c=1;c<i.length;c++)i[c].pos<i[c-1].pos&&(i[c].pos=i[c-1].pos);const r=i;return c=>{if(c<=r[0].pos)return r[0].output;const a=r[r.length-1];if(c>=a.pos)return a.output;let m=0,l=r.length-1;for(;m<l-1;){const f=m+l>>>1;r[f].pos<=c?m=f:l=f}const o=r[m],u=r[l];return u.pos===o.pos?u.output:o.output+(u.output-o.output)*(c-o.pos)/(u.pos-o.pos)}}function C(t){if(!t)return;const e=q[t];return e||(_t(t)??wt(t)??q.linear)}class At extends w{animationGroups;delay;offset;offsetEasing;timingOptions;constructor(e,n={}){const i=e.flatMap(s=>[...s.animations]);super(i),this.animationGroups=e,this.delay=n.delay??0,this.offset=n.offset??0,this.offsetEasing=typeof n.offsetEasing=="function"?n.offsetEasing:C(n.offsetEasing)??P,this.timingOptions=this.animationGroups.map(s=>s.getTimingOptions().map(({delay:r,duration:c,iterations:a})=>({delay:r,duration:Number.isFinite(c)?c:0,iterations:Number.isFinite(a)?a:1}))),this.applyOffsets(),this.ready=Promise.all(e.map(s=>s.ready)).then(()=>{})}calculateOffsets(){const e=this.animationGroups.length;if(e<=1)return[0];const n=e-1;return Array.from({length:e},(i,s)=>this.offsetEasing(s/n)*n*this.offset|0)}applyOffsets(){if(this.animationGroups.length===0||this.animations.length===0)return;const e=this.calculateOffsets(),n=this.getSequenceActiveDuration(e);this.animationGroups.forEach((i,s)=>{i.animations.forEach((r,c)=>{const a=r.effect;if(!a)return;const{delay:m,duration:l,iterations:o}=this.timingOptions[s][c],u=m+e[s],f=n-(u+l*o);a.updateTiming({delay:u+this.delay,endDelay:f})})})}getSequenceActiveDuration(e){const n=[];for(let i=0;i<this.timingOptions.length;i++){const s=this.timingOptions[i].reduce((r,c)=>{if(!c)return r;const{delay:a,duration:m,iterations:l}=c;return Math.max(r,a+m*l)},0);n.push(e[i]+s)}return Math.max(...n)}addGroups(e){if(e.length===0)return;const n=[...e].sort((i,s)=>s.index-i.index);for(const{index:i,group:s}of n){const r=Math.min(i,this.animationGroups.length);this.animationGroups.splice(r,0,s),this.timingOptions.splice(r,0,s.getTimingOptions());const c=[...s.animations],a=this.animationGroups.slice(0,r).reduce((m,l)=>m+l.animations.length,0);this.animations.splice(a,0,...c)}this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(i=>i.ready)).then(()=>{})}removeGroups(e){const n=[],i=[],s=[];for(let r=0;r<this.animationGroups.length;r++)e(this.animationGroups[r])?n.push(this.animationGroups[r]):(i.push(this.animationGroups[r]),s.push(this.timingOptions[r]));if(n.length===0)return n;for(const r of n)r.cancel();return this.animationGroups=i,this.timingOptions=s,this.animations=i.flatMap(r=>[...r.animations]),this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(r=>r.ready)).then(()=>{}),n}async onFinish(e){try{await Promise.all(this.animationGroups.map(n=>n.finished)),e()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}}class Tt{_animation;customEffect;progress;_tickCbId;_finishHandler;constructor(e,n,i,s){const r=new KeyframeEffect(n,[],{...i,composite:"add"}),{timeline:c}=s;this._animation=new Animation(r,c),this._tickCbId=null,this.progress=null,this.customEffect=a=>e(r.target,a),this._finishHandler=a=>{this.effect.target?.getAnimations().find(m=>m===this._animation)||this.cancel()},this.addEventListener("finish",this._finishHandler),this.addEventListener("remove",this._finishHandler)}_tick(){try{const e=this.effect?.getComputedTiming().progress??null;e!==this.progress&&(this.customEffect?.(e),this.progress=e),this._tickCbId=requestAnimationFrame(()=>{this._tick()})}catch(e){this._tickCbId=null,console.error(`failed to run customEffect! effectId: ${this.id}, error: ${e instanceof Error?e.message:e}`)}}get currentTime(){return this._animation.currentTime}set currentTime(e){this._animation.currentTime=e}get startTime(){return this._animation.startTime}set startTime(e){this._animation.startTime=e}get playbackRate(){return this._animation.playbackRate}set playbackRate(e){this._animation.playbackRate=e}get id(){return this._animation.id}set id(e){this._animation.id=e}get effect(){return this._animation.effect}set effect(e){this._animation.effect=e}get timeline(){return this._animation.timeline}set timeline(e){this._animation.timeline=e}get finished(){return this._animation.finished}get pending(){return this._animation.pending}get playState(){return this._animation.playState}get ready(){return this._animation.ready}get replaceState(){return this._animation.replaceState}get oncancel(){return this._animation.oncancel}set oncancel(e){this._animation.oncancel=e}get onfinish(){return this._animation.onfinish}set onfinish(e){this._animation.onfinish=e}get onremove(){return this._animation.onremove}set onremove(e){this._animation.onremove=e}play(){this._animation.play(),cancelAnimationFrame(this._tickCbId),this._tickCbId=requestAnimationFrame(()=>this._tick())}pause(){this._animation.pause(),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}cancel(){this.removeEventListener("finish",this._finishHandler),this.removeEventListener("remove",this._finishHandler),this._animation.cancel(),this.customEffect(null),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}commitStyles(){console.warn("CustomEffect animations do not support commitStyles method as they have no style to commit")}finish(){this._animation.finish()}persist(){this._animation.persist()}reverse(){this._animation.reverse()}updatePlaybackRate(e){this._animation.updatePlaybackRate(e)}addEventListener(e,n,i){this._animation.addEventListener(e,n,i)}removeEventListener(e,n,i){this._animation.removeEventListener(e,n,i)}dispatchEvent(e){return this._animation.dispatchEvent(e)}}function kt(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var A={exports:{}},G=A.exports,N;function qt(){return N||(N=1,(function(t){(function(e){var n=function(){},i=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.msRequestAnimationFrame||function(o){return setTimeout(o,16)};function s(){var o=this;o.reads=[],o.writes=[],o.raf=i.bind(e)}s.prototype={constructor:s,runTasks:function(o){for(var u;u=o.shift();)u()},measure:function(o,u){var f=u?o.bind(u):o;return this.reads.push(f),r(this),f},mutate:function(o,u){var f=u?o.bind(u):o;return this.writes.push(f),r(this),f},clear:function(o){return a(this.reads,o)||a(this.writes,o)},extend:function(o){if(typeof o!="object")throw new Error("expected object");var u=Object.create(this);return m(u,o),u.fastdom=this,u.initialize&&u.initialize(),u},catch:null};function r(o){o.scheduled||(o.scheduled=!0,o.raf(c.bind(null,o)))}function c(o){var u=o.writes,f=o.reads,p;try{n("flushing reads",f.length),o.runTasks(f),n("flushing writes",u.length),o.runTasks(u)}catch(h){p=h}if(o.scheduled=!1,(f.length||u.length)&&r(o),p)if(n("task errored",p.message),o.catch)o.catch(p);else throw p}function a(o,u){var f=o.indexOf(u);return!!~f&&!!o.splice(f,1)}function m(o,u){for(var f in u)u.hasOwnProperty(f)&&(o[f]=u[f])}var l=e.fastdom=e.fastdom||new s;t.exports=l})(typeof window<"u"?window:typeof G<"u"?G:globalThis)})(A)),A.exports}var St=qt();const v=kt(St),$={};function $t(t){Object.assign($,t)}function Pt(t){return t in $?$[t]:(console.warn(`${t} not found in registry. Please make sure to import and register the preset.`),null)}function I(t,e){return t?(e||document).getElementById(t):null}function Ct(t,e){return t?.matches(`[data-motion-part~="${e}"]`)?t:t?.querySelector(`[data-motion-part~="${e}"]`)}function zt(t){const e=t.alternate?"alternate":"";return t.reversed?`${e?`${e}-`:""}reverse`:e||"normal"}function k(t){return`${t.value}${mt(t.unit)}`}function D(t,e,n){return`${t.name||"cover"} ${n&&t.offset.unit!=="percentage"?`calc(100% + ${k(t.offset)}${e?` + ${e}`:""})`:e?`calc(${k(t.offset)} + ${e})`:k(t.offset)}`}function ht(t){return{start:D(t.startOffset,t.startOffsetAdd),end:D(t.endOffset,t.endOffsetAdd,!0)}}function dt(t){return e=>v.measure(()=>e(t))}function pt(t){return e=>v.mutate(()=>e(t))}function _(t){if(t.namedEffect){const e=t.namedEffect.type;return typeof e=="string"?Pt(e):null}else if(t.keyframeEffect){const e=i=>{const{name:s,keyframes:r}=i.keyframeEffect;return[{...i,name:s,keyframes:r}]};return{web:e,style:e,getNames:i=>{const{effectId:s}=i,{name:r}=i.keyframeEffect,c=r||s;return c?[c]:[]}}}else if(t.customEffect)return e=>[{...e,keyframes:[]}];return null}function gt(t,e,n,i){return t.map((s,r)=>{const c={fill:s.fill,easing:lt(s.easing),iterations:s.iterations===0?1/0:s.iterations||1,composite:s.composite,direction:zt(s)};return z(e)?(c.duration=s.duration,c.delay=s.delay||0):e?.trigger==="view-progress"&&(i||window.ViewTimeline)?c.duration="auto":(c.duration=99.99,c.delay=.01),{effect:s,options:c,id:n&&`${n}-${r+1}`,part:s.part}})}function z(t){return!t||t.trigger!=="pointer-move"&&t.trigger!=="view-progress"}function R(t,e,n,i,s){if(t){if(z(i)&&(e.duration=e.duration||1,s?.reducedMotion))if(e.iterations===1||e.iterations==null)e={...e,duration:1};else return[];let r;return n instanceof HTMLElement&&(r={measure:dt(n),mutate:pt(n)}),t.web?t.web(e,r,s):t(e,r,s)}return[]}function x(t,e,n,i,s){const r=t instanceof HTMLElement?t:I(t,s);if(n?.trigger==="pointer-move"&&!e.keyframeEffect){let f=e;e.customEffect&&(f={...e,namedEffect:{id:"",type:"CustomMouse"}});const p=_(f),h=R(p,e,r,n,i);return typeof h!="function"?null:h(r)}const c=_(e),a=R(c,e,r,n,i);if(!a||a.length===0)return null;const m=gt(a,n,e.effectId);let l;const o=n?.trigger==="view-progress";o&&window.ViewTimeline&&(l=new ViewTimeline({subject:n.element||I(n.componentId)}));const u=m.map(({effect:f,options:p,id:h,part:d})=>{const E=d?Ct(r,d):r,g=new KeyframeEffect(E||null,[],p);v.mutate(()=>{"timing"in f&&g.updateTiming(f.timing),g.setKeyframes(f.keyframes)});const b=o&&l?{timeline:l}:{},y=typeof f.customEffect=="function"?new Tt(f.customEffect,E||null,p,b):new Animation(g,b.timeline);if(o)if(l)v.mutate(()=>{const{start:O,end:T}=ht(f);y.rangeStart=O,y.rangeEnd=T,y.play()});else{const{startOffset:O,endOffset:T}=e;v.mutate(()=>{const F=f.startOffset||O,M=f.endOffset||T;Object.assign(y,{start:{name:F.name,offset:F.offset?.value,add:f.startOffsetAdd},end:{name:M.name,offset:M.offset?.value,add:f.endOffsetAdd}})})}return h&&(y.id=h),y});return new w(u,{...e,trigger:{...n||{}},measured:new Promise(f=>v.mutate(f))})}function xt(t,e){return t?`#${t}${e?`[data-motion-part~="${e}"]`:""}`:""}function Ft(t,e){const{duration:n,delay:i,iterations:s=1,fill:r,easing:c="linear",direction:a}=t.options,m=t.effect.name,l=n==="auto";return`${m} ${l?"auto":`${n}ms`}${l?" ":` ${i||1}ms `}${c}${r&&r!=="none"?` ${r}`:""} ${!s||s===1/0?"infinite":s}${a==="normal"?"":` ${a}`} ${e?"":"paused"}`}function Mt(t,e,n){return t?.style?(z(n)&&(e.duration=e.duration||1),t.style(e)):[]}function Gt(t,e,n){const i=_(e),s=Mt(i,e),r=gt(s,n,e.effectId,!0),c=n?.trigger==="view-progress";return r.map((a,m)=>{const{start:l,end:o}=c?ht(a.effect):{};return{target:xt(t,a.part),animation:Ft(a,c),composition:a.options.composite,custom:a.effect.custom,name:a.effect.name,keyframes:a.effect.keyframes,id:a.id&&`${a.id}-${m+1}`,animationTimeline:c?`--${n?.id}`:"",animationRange:l||o?`${l} ${o}`:""}})}function bt(t,e,n){const i=_(e),s=t instanceof HTMLElement?t:I(t);if(i&&i.prepare&&s){const r={measure:dt(s),mutate:pt(s)};i.prepare(e,r)}n&&v.mutate(n)}function yt(t,e){const n=_(e);if(!n)return null;if(!n.style)return e.effectId&&t?Et(t,e.effectId):null;const i=n.getNames(e),r=(typeof t=="string"?I(t):t)?.getAnimations(),c=r?.map(m=>m.animationName)||[],a=[];return i.forEach(m=>{c.includes(m)&&a.push(r?.find(l=>l.animationName===m))}),a?.length?new w(a):null}function Et(t,e){const i=(typeof t=="string"?I(t):t)?.getAnimations().filter(s=>{const r=s.id||s.animationName;return r?r.startsWith(e):!0});return i?.length?new w(i):null}function Nt(t,e,n,i={}){const{disabled:s,allowActiveEvent:r,...c}=i,a=x(t,e,n,c);if(!a)return null;let m={};if(n.trigger==="view-progress"&&!window.ViewTimeline){const l=n.element||I(n.componentId),{ready:o}=a;return a.animations.map(u=>({get start(){return u.start},get end(){return u.end},viewSource:l,ready:o,getProgress(){return a.getProgress()},effect(f,p){const{activeDuration:h}=u.effect.getComputedTiming(),{delay:d}=u.effect.getTiming();u.currentTime=((d||0)+(h||0))*p},disabled:s,destroy(){u.cancel()}}))}else if(n.trigger==="pointer-move"){const l=e,{centeredToTarget:o,transitionDuration:u,transitionEasing:f}=l,p=n.axis;if(l.keyframeEffect){const h=a;return h.animations?.length===0?null:{target:void 0,centeredToTarget:o,ready:h.ready,_currentProgress:0,getProgress(){return this._currentProgress},effect(E,g){const b=p==="x"?g.x:g.y;this._currentProgress=b,h.progress(b)},disabled:s??!1,destroy(){h.cancel()}}}m={centeredToTarget:o,allowActiveEvent:r},e.customEffect&&u&&(m.transitionDuration=u,m.transitionEasing=C(f)),m.target=a.target}return{...m,getProgress(){return a.getProgress()},effect(l,o,u,f){a.progress(u?{...o,v:u,active:f}:o)},disabled:s,destroy(){a.cancel()}}}function vt(t,e,n,i=!1){const s=yt(t,e);return s?(s.ready=new Promise(r=>{bt(t,e,r)}),s):x(t,e,n,{reducedMotion:i})}function Dt(t){return t===null?[null]:typeof t=="string"?Array.from(document.querySelectorAll(t)):Array.isArray(t)?t:[t]}function Ot(t,e){const n=[];for(const{target:i,options:s}of t){const r=Dt(i);for(const c of r){const a=vt(c,s,void 0,e?.reducedMotion);a instanceof w&&n.push(a)}}return n}function Rt(t,e,n){const i=Ot(e,n);return new At(i,t)}exports.backIn=ct;exports.backInOut=ft;exports.backOut=ut;exports.circIn=rt;exports.circInOut=at;exports.circOut=ot;exports.createAnimationGroups=Ot;exports.cssEasings=S;exports.cubicIn=K;exports.cubicInOut=U;exports.cubicOut=J;exports.expoIn=nt;exports.expoInOut=st;exports.expoOut=it;exports.getAnimation=vt;exports.getCSSAnimation=Gt;exports.getCssUnits=mt;exports.getEasing=lt;exports.getElementAnimation=Et;exports.getElementCSSAnimation=yt;exports.getJsEasing=C;exports.getScrubScene=Nt;exports.getSequence=Rt;exports.getWebAnimation=x;exports.jsEasings=q;exports.linear=P;exports.prepareAnimation=bt;exports.quadIn=W;exports.quadInOut=B;exports.quadOut=V;exports.quartIn=X;exports.quartInOut=Q;exports.quartOut=Y;exports.quintIn=Z;exports.quintInOut=et;exports.quintOut=tt;exports.registerEffects=$t;exports.sineIn=L;exports.sineInOut=H;exports.sineOut=j;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class w{animations;options;ready;isCSS;longestAnimation;constructor(t,n){this.animations=t,this.options=n,this.ready=n?.measured||Promise.resolve(),this.isCSS=t[0]instanceof CSSAnimation,this.longestAnimation=this._getAnimationWithLongestEndTime()}_getAnimationWithLongestEndTime(){return this.animations.reduce((t,n)=>{const i=t.effect?.getComputedTiming().endTime??0,s=n.effect?.getComputedTiming().endTime??0;return i>s?t:n},this.animations[0])}getProgress(){return this.longestAnimation?.effect?.getComputedTiming().progress||0}async play(t){await this.ready;for(const n of this.animations)n.play();await Promise.all(this.animations.map(n=>n.ready)),t&&t()}pause(){for(const t of this.animations)t.pause()}async reverse(t){await this.ready;for(const n of this.animations)n.reverse();await Promise.all(this.animations.map(n=>n.ready)),t&&t()}progress(t){for(const n of this.animations){const{delay:i,duration:s,iterations:r}=n.effect.getTiming(),c=(Number.isFinite(s)?s:0)*(Number.isFinite(r)?r:1);n.currentTime=((i||0)+c)*t}}cancel(){for(const t of this.animations)t.cancel()}setPlaybackRate(t){for(const n of this.animations)n.playbackRate=t}async onFinish(t){try{await Promise.all(this.animations.map(i=>i.finished));const n=this.animations[0];if(n&&!this.isCSS){const i=n.effect?.target;if(i){const s=this.options?.effectId||n.id,r=new CustomEvent("animationend",{detail:{effectId:s}});i.dispatchEvent(r)}}t()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}async onAbort(t){try{await Promise.all(this.animations.map(n=>n.finished))}catch(n){if(n.name==="AbortError"){const i=this.animations[0];if(i&&!this.isCSS){const s=i.effect?.target;if(s){const r=new Event("animationcancel");s.dispatchEvent(r)}}t()}}}get finished(){return Promise.all(this.animations.map(t=>t.finished))}get playState(){return this.animations.some(t=>t.playState==="running")?"running":this.animations[0]?.playState}hasAnimationName(t){return this.animations.some(n=>n.animationName===t)}hasAnimationId(t){return this.animations.some(n=>n.id===t)}getTimingOptions(){return this.animations.map(t=>{const n=t.effect?.getTiming(),i=n?.delay??0,s=Number(n?.duration)||0,r=n?.iterations??1;return{delay:i,duration:s,iterations:r}})}}const P=e=>e,L=e=>1-Math.cos(e*Math.PI/2),j=e=>Math.sin(e*Math.PI/2),H=e=>-(Math.cos(Math.PI*e)-1)/2,W=e=>e**2,V=e=>1-(1-e)**2,B=e=>e<.5?2*e**2:1-(-2*e+2)**2/2,K=e=>e**3,J=e=>1-(1-e)**3,U=e=>e<.5?4*e**3:1-(-2*e+2)**3/2,X=e=>e**4,Y=e=>1-(1-e)**4,Q=e=>e<.5?8*e**4:1-(-2*e+2)**4/2,Z=e=>e**5,tt=e=>1-(1-e)**5,et=e=>e<.5?16*e**5:1-(-2*e+2)**5/2,nt=e=>e===0?0:2**(10*e-10),it=e=>e===1?1:1-2**(-10*e),st=e=>e===0?0:e===1?1:e<.5?2**(20*e-10)/2:(2-2**(-20*e+10))/2,rt=e=>1-Math.sqrt(1-e**2),ot=e=>Math.sqrt(1-(e-1)**2),at=e=>e<.5?(1-Math.sqrt(1-4*e**2))/2:(Math.sqrt(-(2*e-3)*(2*e-1))+1)/2,ct=e=>2.70158*e**3-1.70158*e**2,ut=e=>1+2.70158*(e-1)**3+1.70158*(e-1)**2,ft=(e,t=1.70158*1.525)=>e<.5?(2*e)**2*((t+1)*2*e-t)/2:((2*e-2)**2*((t+1)*(e*2-2)+t)+2)/2,S={linear:P,sineIn:L,sineOut:j,sineInOut:H,quadIn:W,quadOut:V,quadInOut:B,cubicIn:K,cubicOut:J,cubicInOut:U,quartIn:X,quartOut:Y,quartInOut:Q,quintIn:Z,quintOut:tt,quintInOut:et,expoIn:nt,expoOut:it,expoInOut:st,circIn:rt,circOut:ot,circInOut:at,backIn:ct,backOut:ut,backInOut:ft},q={linear:"linear",ease:"ease",easeIn:"ease-in",easeOut:"ease-out",easeInOut:"ease-in-out",sineIn:"cubic-bezier(0.47, 0, 0.745, 0.715)",sineOut:"cubic-bezier(0.39, 0.575, 0.565, 1)",sineInOut:"cubic-bezier(0.445, 0.05, 0.55, 0.95)",quadIn:"cubic-bezier(0.55, 0.085, 0.68, 0.53)",quadOut:"cubic-bezier(0.25, 0.46, 0.45, 0.94)",quadInOut:"cubic-bezier(0.455, 0.03, 0.515, 0.955)",cubicIn:"cubic-bezier(0.55, 0.055, 0.675, 0.19)",cubicOut:"cubic-bezier(0.215, 0.61, 0.355, 1)",cubicInOut:"cubic-bezier(0.645, 0.045, 0.355, 1)",quartIn:"cubic-bezier(0.895, 0.03, 0.685, 0.22)",quartOut:"cubic-bezier(0.165, 0.84, 0.44, 1)",quartInOut:"cubic-bezier(0.77, 0, 0.175, 1)",quintIn:"cubic-bezier(0.755, 0.05, 0.855, 0.06)",quintOut:"cubic-bezier(0.23, 1, 0.32, 1)",quintInOut:"cubic-bezier(0.86, 0, 0.07, 1)",expoIn:"cubic-bezier(0.95, 0.05, 0.795, 0.035)",expoOut:"cubic-bezier(0.19, 1, 0.22, 1)",expoInOut:"cubic-bezier(1, 0, 0, 1)",circIn:"cubic-bezier(0.6, 0.04, 0.98, 0.335)",circOut:"cubic-bezier(0.075, 0.82, 0.165, 1)",circInOut:"cubic-bezier(0.785, 0.135, 0.15, 0.86)",backIn:"cubic-bezier(0.6, -0.28, 0.735, 0.045)",backOut:"cubic-bezier(0.175, 0.885, 0.32, 1.275)",backInOut:"cubic-bezier(0.68, -0.55, 0.265, 1.55)"};function mt(e){return e==="percentage"?"%":e||"px"}function lt(e){return e?q[e]||e:q.linear}function Ot(e,t,n,i){const s=3*e,r=3*(n-e)-s,c=1-s-r,a=3*t,m=3*(i-t)-a,l=1-a-m,o=h=>((c*h+r)*h+s)*h,u=h=>((l*h+m)*h+a)*h,f=h=>(3*c*h+2*r)*h+s;function p(h){let d=h;for(let b=0;b<8;b++){const y=o(d)-h;if(Math.abs(y)<1e-7)return d;const I=f(d);if(Math.abs(I)<1e-6)break;d-=y/I}let E=0,g=1;for(d=(E+g)/2;g-E>1e-7;){const b=o(d);if(Math.abs(b-h)<1e-7)return d;h>b?E=d:g=d,d=(E+g)/2}return d}return h=>h<=0?0:h>=1?1:u(p(h))}function _t(e){const t=e.match(/^cubic-bezier\(\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\)$/);if(!t)return;const n=parseFloat(t[1]),i=parseFloat(t[2]),s=parseFloat(t[3]),r=parseFloat(t[4]);if(![n,i,s,r].some(isNaN))return Ot(n,i,s,r)}function wt(e){const t=e.match(/^linear\((.+)\)$/);if(!t)return;const n=t[1].split(",").map(c=>c.trim()).filter(Boolean);if(n.length===0)return;const i=[];for(const c of n){const a=c.split(/\s+/),m=parseFloat(a[0]);if(isNaN(m))return;const l=[];for(let o=1;o<a.length;o++)if(a[o].endsWith("%")){const u=parseFloat(a[o])/100;if(isNaN(u))return;l.push(u)}l.length===0?i.push({output:m,pos:null}):l.length===1?i.push({output:m,pos:l[0]}):(i.push({output:m,pos:l[0]}),i.push({output:m,pos:l[1]}))}if(i.length===0)return;i[0].pos===null&&(i[0].pos=0),i[i.length-1].pos===null&&(i[i.length-1].pos=1);let s=0;for(;s<i.length;)if(i[s].pos===null){const c=s-1;let a=s;for(;a<i.length&&i[a].pos===null;)a++;const m=i[c].pos,l=i[a].pos,o=a-c;for(let u=c+1;u<a;u++)i[u].pos=m+(l-m)*(u-c)/o;s=a+1}else s++;for(let c=1;c<i.length;c++)i[c].pos<i[c-1].pos&&(i[c].pos=i[c-1].pos);const r=i;return c=>{if(c<=r[0].pos)return r[0].output;const a=r[r.length-1];if(c>=a.pos)return a.output;let m=0,l=r.length-1;for(;m<l-1;){const f=m+l>>>1;r[f].pos<=c?m=f:l=f}const o=r[m],u=r[l];return u.pos===o.pos?u.output:o.output+(u.output-o.output)*(c-o.pos)/(u.pos-o.pos)}}function C(e){if(!e)return;const t=S[e];return t||(_t(e)??wt(e)??S.linear)}class At extends w{animationGroups;delay;offset;offsetEasing;timingOptions;constructor(t,n={}){const i=t.flatMap(s=>[...s.animations]);super(i),this.animationGroups=t,this.delay=n.delay??0,this.offset=n.offset??0,this.offsetEasing=typeof n.offsetEasing=="function"?n.offsetEasing:C(n.offsetEasing)??P,this.timingOptions=this.animationGroups.map(s=>s.getTimingOptions().map(({delay:r,duration:c,iterations:a})=>({delay:r,duration:Number.isFinite(c)?c:0,iterations:Number.isFinite(a)?a:1}))),this.applyOffsets(),this.ready=Promise.all(t.map(s=>s.ready)).then(()=>{})}calculateOffsets(){const t=this.animationGroups.length;if(t<=1)return[0];const n=t-1;return Array.from({length:t},(i,s)=>this.offsetEasing(s/n)*n*this.offset|0)}applyOffsets(){if(this.animationGroups.length===0||this.animations.length===0)return;const t=this.calculateOffsets(),n=this.getSequenceActiveDuration(t);this.animationGroups.forEach((i,s)=>{i.animations.forEach((r,c)=>{const a=r.effect;if(!a)return;const{delay:m,duration:l,iterations:o}=this.timingOptions[s][c],u=m+t[s],f=n-(u+l*o);a.updateTiming({delay:u+this.delay,endDelay:f})})})}getSequenceActiveDuration(t){const n=[];for(let i=0;i<this.timingOptions.length;i++){const s=this.timingOptions[i].reduce((r,c)=>{if(!c)return r;const{delay:a,duration:m,iterations:l}=c;return Math.max(r,a+m*l)},0);n.push(t[i]+s)}return Math.max(...n)}addGroups(t){if(t.length===0)return;const n=[...t].sort((i,s)=>s.index-i.index);for(const{index:i,group:s}of n){const r=Math.min(i,this.animationGroups.length);this.animationGroups.splice(r,0,s),this.timingOptions.splice(r,0,s.getTimingOptions());const c=[...s.animations],a=this.animationGroups.slice(0,r).reduce((m,l)=>m+l.animations.length,0);this.animations.splice(a,0,...c)}this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(i=>i.ready)).then(()=>{})}removeGroups(t){const n=[],i=[],s=[];for(let r=0;r<this.animationGroups.length;r++)t(this.animationGroups[r])?n.push(this.animationGroups[r]):(i.push(this.animationGroups[r]),s.push(this.timingOptions[r]));if(n.length===0)return n;for(const r of n)r.cancel();return this.animationGroups=i,this.timingOptions=s,this.animations=i.flatMap(r=>[...r.animations]),this.applyOffsets(),this.ready=Promise.all(this.animationGroups.map(r=>r.ready)).then(()=>{}),n}async onFinish(t){try{await Promise.all(this.animationGroups.map(n=>n.finished)),t()}catch(n){console.warn("animation was interrupted - aborting onFinish callback - ",n)}}}class Tt{_animation;customEffect;progress;_tickCbId;_finishHandler;constructor(t,n,i,s){const r=new KeyframeEffect(n,[],{...i,composite:"add"}),{timeline:c}=s;this._animation=new Animation(r,c),this._tickCbId=null,this.progress=null,this.customEffect=a=>t(r.target,a),this._finishHandler=a=>{this.effect.target?.getAnimations().find(m=>m===this._animation)||this.cancel()},this.addEventListener("finish",this._finishHandler),this.addEventListener("remove",this._finishHandler)}_tick(){try{const t=this.effect?.getComputedTiming().progress??null;t!==this.progress&&(this.customEffect?.(t),this.progress=t),this._tickCbId=requestAnimationFrame(()=>{this._tick()})}catch(t){this._tickCbId=null,console.error(`failed to run customEffect! effectId: ${this.id}, error: ${t instanceof Error?t.message:t}`)}}get currentTime(){return this._animation.currentTime}set currentTime(t){this._animation.currentTime=t}get startTime(){return this._animation.startTime}set startTime(t){this._animation.startTime=t}get playbackRate(){return this._animation.playbackRate}set playbackRate(t){this._animation.playbackRate=t}get id(){return this._animation.id}set id(t){this._animation.id=t}get effect(){return this._animation.effect}set effect(t){this._animation.effect=t}get timeline(){return this._animation.timeline}set timeline(t){this._animation.timeline=t}get finished(){return this._animation.finished}get pending(){return this._animation.pending}get playState(){return this._animation.playState}get ready(){return this._animation.ready}get replaceState(){return this._animation.replaceState}get oncancel(){return this._animation.oncancel}set oncancel(t){this._animation.oncancel=t}get onfinish(){return this._animation.onfinish}set onfinish(t){this._animation.onfinish=t}get onremove(){return this._animation.onremove}set onremove(t){this._animation.onremove=t}play(){this._animation.play(),cancelAnimationFrame(this._tickCbId),this._tickCbId=requestAnimationFrame(()=>this._tick())}pause(){this._animation.pause(),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}cancel(){this.removeEventListener("finish",this._finishHandler),this.removeEventListener("remove",this._finishHandler),this._animation.cancel(),this.customEffect(null),cancelAnimationFrame(this._tickCbId),this._tickCbId=null}commitStyles(){console.warn("CustomEffect animations do not support commitStyles method as they have no style to commit")}finish(){this._animation.finish()}persist(){this._animation.persist()}reverse(){this._animation.reverse()}updatePlaybackRate(t){this._animation.updatePlaybackRate(t)}addEventListener(t,n,i){this._animation.addEventListener(t,n,i)}removeEventListener(t,n,i){this._animation.removeEventListener(t,n,i)}dispatchEvent(t){return this._animation.dispatchEvent(t)}}function kt(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var A={exports:{}},N=A.exports,G;function St(){return G||(G=1,(function(e){(function(t){var n=function(){},i=t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||t.msRequestAnimationFrame||function(o){return setTimeout(o,16)};function s(){var o=this;o.reads=[],o.writes=[],o.raf=i.bind(t)}s.prototype={constructor:s,runTasks:function(o){for(var u;u=o.shift();)u()},measure:function(o,u){var f=u?o.bind(u):o;return this.reads.push(f),r(this),f},mutate:function(o,u){var f=u?o.bind(u):o;return this.writes.push(f),r(this),f},clear:function(o){return a(this.reads,o)||a(this.writes,o)},extend:function(o){if(typeof o!="object")throw new Error("expected object");var u=Object.create(this);return m(u,o),u.fastdom=this,u.initialize&&u.initialize(),u},catch:null};function r(o){o.scheduled||(o.scheduled=!0,o.raf(c.bind(null,o)))}function c(o){var u=o.writes,f=o.reads,p;try{n("flushing reads",f.length),o.runTasks(f),n("flushing writes",u.length),o.runTasks(u)}catch(h){p=h}if(o.scheduled=!1,(f.length||u.length)&&r(o),p)if(n("task errored",p.message),o.catch)o.catch(p);else throw p}function a(o,u){var f=o.indexOf(u);return!!~f&&!!o.splice(f,1)}function m(o,u){for(var f in u)u.hasOwnProperty(f)&&(o[f]=u[f])}var l=t.fastdom=t.fastdom||new s;e.exports=l})(typeof window<"u"?window:typeof N<"u"?N:globalThis)})(A)),A.exports}var qt=St();const v=kt(qt),$={};function $t(e){Object.assign($,e)}function Pt(e){return e in $?$[e]:(console.warn(`${e} not found in registry. Please make sure to import and register the preset.`),null)}function O(e,t){return e?(t||document).getElementById(e):null}function Ct(e,t){return e?.matches(`[data-motion-part~="${t}"]`)?e:e?.querySelector(`[data-motion-part~="${t}"]`)}function zt(e){const t=e.alternate?"alternate":"";return e.reversed?`${t?`${t}-`:""}reverse`:t||"normal"}function k(e){return`${e.value}${mt(e.unit)}`}function D(e,t,n){return`${e.name||"cover"} ${n&&e.offset.unit!=="percentage"?`calc(100% + ${k(e.offset)}${t?` + ${t}`:""})`:t?`calc(${k(e.offset)} + ${t})`:k(e.offset)}`}function ht(e){return{start:D(e.startOffset,e.startOffsetAdd),end:D(e.endOffset,e.endOffsetAdd,!0)}}function dt(e){return t=>v.measure(()=>t(e))}function pt(e){return t=>v.mutate(()=>t(e))}function _(e){if(e.namedEffect){const t=e.namedEffect.type;return typeof t=="string"?Pt(t):null}else if(e.keyframeEffect){const t=i=>{const{name:s,keyframes:r}=i.keyframeEffect;return[{...i,name:s,keyframes:r}]};return{web:t,style:t,getNames:i=>{const{effectId:s}=i,{name:r}=i.keyframeEffect,c=r||s;return c?[c]:[]}}}else if(e.customEffect)return t=>[{...t,keyframes:[]}];return null}function gt(e,t,n,i){return e.map((s,r)=>{const c={fill:s.fill,easing:lt(s.easing),iterations:s.iterations===0?1/0:s.iterations||1,composite:s.composite,direction:zt(s)};return z(t)?(c.duration=s.duration,c.delay=s.delay||0):t?.trigger==="view-progress"&&(i||window.ViewTimeline)?c.duration="auto":(c.duration=99.99,c.delay=.01),{effect:s,options:c,id:n&&`${n}-${r+1}`,part:s.part}})}function z(e){return!e||e.trigger!=="pointer-move"&&e.trigger!=="view-progress"}function R(e,t,n,i,s){if(e){if(z(i)&&(t.duration=t.duration||1,s?.reducedMotion))if(t.iterations===1||t.iterations==null)t={...t,duration:1};else return[];let r;return n instanceof HTMLElement&&(r={measure:dt(n),mutate:pt(n)}),e.web?e.web(t,r,s):e(t,r,s)}return[]}function x(e,t,n,i,s){const r=e instanceof HTMLElement?e:O(e,s);if(n?.trigger==="pointer-move"&&!t.keyframeEffect){let f=t;t.customEffect&&(f={...t,namedEffect:{id:"",type:"CustomMouse"}});const p=_(f),h=R(p,t,r,n,i);return typeof h!="function"?null:h(r)}const c=_(t),a=R(c,t,r,n,i);if(!a||a.length===0)return null;const m=gt(a,n,t.effectId);let l;const o=n?.trigger==="view-progress";o&&window.ViewTimeline&&(l=new ViewTimeline({subject:n.element||O(n.componentId)}));const u=m.map(({effect:f,options:p,id:h,part:d})=>{const E=d?Ct(r,d):r,g=new KeyframeEffect(E||null,[],p);v.mutate(()=>{"timing"in f&&g.updateTiming(f.timing),g.setKeyframes(f.keyframes)});const b=o&&l?{timeline:l}:{},y=typeof f.customEffect=="function"?new Tt(f.customEffect,E||null,p,b):new Animation(g,b.timeline);if(o)if(l)v.mutate(()=>{const{start:I,end:T}=ht(f);y.rangeStart=I,y.rangeEnd=T,y.play()});else{const{startOffset:I,endOffset:T}=t;v.mutate(()=>{const F=f.startOffset||I,M=f.endOffset||T;Object.assign(y,{start:{name:F.name,offset:F.offset?.value,add:f.startOffsetAdd},end:{name:M.name,offset:M.offset?.value,add:f.endOffsetAdd}})})}return h&&(y.id=h),y});return new w(u,{...t,trigger:{...n||{}},measured:new Promise(f=>v.mutate(f))})}function xt(e,t){return e?`#${e}${t?`[data-motion-part~="${t}"]`:""}`:""}function Ft(e,t){const{duration:n,delay:i,iterations:s=1,fill:r,easing:c="linear",direction:a}=e.options,m=e.effect.name,l=n==="auto";return`${m} ${l?"auto":`${n}ms`}${l?" ":` ${i||1}ms `}${c}${r&&r!=="none"?` ${r}`:""} ${!s||s===1/0?"infinite":s}${a==="normal"?"":` ${a}`} ${t?"":"paused"}`}function Mt(e,t,n){return e?.style?(z(n)&&(t.duration=t.duration||1),e.style(t)):[]}function Nt(e,t,n){const i=_(t),s=Mt(i,t),r=gt(s,n,t.effectId,!0),c=n?.trigger==="view-progress";return r.map((a,m)=>{const{start:l,end:o}=c?ht(a.effect):{};return{target:xt(e,a.part),animation:Ft(a,c),composition:a.options.composite,custom:a.effect.custom,name:a.effect.name,keyframes:a.effect.keyframes,id:a.id&&`${a.id}-${m+1}`,animationTimeline:c?`--${n?.id}`:"",animationRange:l||o?`${l} ${o}`:""}})}function bt(e,t,n){const i=_(t),s=e instanceof HTMLElement?e:O(e);if(i&&i.prepare&&s){const r={measure:dt(s),mutate:pt(s)};i.prepare(t,r)}n&&v.mutate(n)}function yt(e,t){const n=_(t);if(!n)return null;if(!n.style)return t.effectId&&e?Et(e,t.effectId):null;const i=n.getNames(t),r=(typeof e=="string"?O(e):e)?.getAnimations(),c=r?.map(m=>m.animationName)||[],a=[];return i.forEach(m=>{c.includes(m)&&a.push(r?.find(l=>l.animationName===m))}),a?.length?new w(a):null}function Et(e,t){const i=(typeof e=="string"?O(e):e)?.getAnimations().filter(s=>{const r=s.id||s.animationName;return r?r.startsWith(t):!0});return i?.length?new w(i):null}function Gt(e,t,n,i={}){const{disabled:s,allowActiveEvent:r,...c}=i,a=x(e,t,n,c);if(!a)return null;let m={};if(n.trigger==="view-progress"&&!window.ViewTimeline){const l=n.element||O(n.componentId),{ready:o}=a;return a.animations.map(u=>({get start(){return u.start},get end(){return u.end},viewSource:l,ready:o,getProgress(){return a.getProgress()},effect(f,p){const{activeDuration:h}=u.effect.getComputedTiming(),{delay:d}=u.effect.getTiming();u.currentTime=((d||0)+(h||0))*p},disabled:s,destroy(){u.cancel()}}))}else if(n.trigger==="pointer-move"){const l=t,{centeredToTarget:o,transitionDuration:u,transitionEasing:f}=l,p=n.axis;if(l.keyframeEffect){const h=a;return h.animations?.length===0?null:{target:void 0,centeredToTarget:o,ready:h.ready,_currentProgress:0,getProgress(){return this._currentProgress},effect(E,g){const b=p==="x"?g.x:g.y;this._currentProgress=b,h.progress(b)},disabled:s??!1,destroy(){h.cancel()}}}m={centeredToTarget:o,allowActiveEvent:r},t.customEffect&&u&&(m.transitionDuration=u,m.transitionEasing=C(f)),m.target=a.target}return{...m,getProgress(){return a.getProgress()},effect(l,o,u,f){a.progress(u?{...o,v:u,active:f}:o)},disabled:s,destroy(){a.cancel()}}}function vt(e,t,n,i=!1){const s=yt(e,t);return s?(s.ready=new Promise(r=>{bt(e,t,r)}),s):x(e,t,n,{reducedMotion:i})}function Dt(e){return e===null?[null]:typeof e=="string"?Array.from(document.querySelectorAll(e)):Array.isArray(e)?e:[e]}function It(e,t){const n=[];for(const{target:i,options:s}of e){const r=Dt(i);for(const c of r){const a=vt(c,s,void 0,t?.reducedMotion);a instanceof w&&n.push(a)}}return n}function Rt(e,t,n){const i=It(t,n);return new At(i,e)}exports.backIn=ct;exports.backInOut=ft;exports.backOut=ut;exports.circIn=rt;exports.circInOut=at;exports.circOut=ot;exports.createAnimationGroups=It;exports.cssEasings=q;exports.cubicIn=K;exports.cubicInOut=U;exports.cubicOut=J;exports.expoIn=nt;exports.expoInOut=st;exports.expoOut=it;exports.getAnimation=vt;exports.getCSSAnimation=Nt;exports.getCssUnits=mt;exports.getEasing=lt;exports.getElementAnimation=Et;exports.getElementCSSAnimation=yt;exports.getJsEasing=C;exports.getScrubScene=Gt;exports.getSequence=Rt;exports.getWebAnimation=x;exports.jsEasings=S;exports.linear=P;exports.prepareAnimation=bt;exports.quadIn=W;exports.quadInOut=B;exports.quadOut=V;exports.quartIn=X;exports.quartInOut=Q;exports.quartOut=Y;exports.quintIn=Z;exports.quintInOut=et;exports.quintOut=tt;exports.registerEffects=$t;exports.sineIn=L;exports.sineInOut=H;exports.sineOut=j;
|
|
2
2
|
//# sourceMappingURL=motion.js.map
|