@infinityfx/lively 4.0.0-beta.4 → 4.0.0-beta.6
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 +3 -281
- package/dist/core/action.js +1 -1
- package/dist/core/action.js.map +1 -1
- package/dist/core/clip.js +1 -1
- package/dist/core/clip.js.map +1 -1
- package/dist/core/timeline.js +1 -1
- package/dist/core/timeline.js.map +1 -1
- package/dist/core/track.js +1 -1
- package/dist/core/track.js.map +1 -1
- package/dist/core/utils.js +1 -1
- package/dist/core/utils.js.map +1 -1
- package/dist/hooks/use-visible.js +1 -1
- package/dist/layout/morph.js +1 -1
- package/dist/types/core/track.d.ts +3 -2
- package/dist/types/core/utils.d.ts +2 -0
- package/dist/types/layout/morph.d.ts +2 -5
- package/package.json +14 -5
package/README.md
CHANGED
|
@@ -8,29 +8,10 @@
|
|
|
8
8
|
|
|
9
9
|
Feature complete, lightweight react animation library. Lively lets u create complex animations without the hassle.
|
|
10
10
|
|
|
11
|
-
## Table of contents
|
|
12
|
-
- [Get started](#get-started)
|
|
13
|
-
- [Installation](#installation)
|
|
14
|
-
- [Usage](#usage)
|
|
15
|
-
- [Defining animations](#defining-animations)
|
|
16
|
-
- [Components](#components)
|
|
17
|
-
- [Animatable `<Animatable />`](#animatable-animatable)
|
|
18
|
-
- [Animate `<Animate />`](#animate-animate)
|
|
19
|
-
- [LayoutGroup `<LayoutGroup />`](#layoutgroup-layoutgroup)
|
|
20
|
-
- [Morph `<Morph />`](#morph-morph)
|
|
21
|
-
- [Hooks](#hooks)
|
|
22
|
-
- [`useLink()`](#uselink)
|
|
23
|
-
- [`useScroll()`](#usescroll)
|
|
24
|
-
- [`usePath()`](#usepath)
|
|
25
|
-
- [`useAudio()`](#useaudio)
|
|
26
|
-
- [`useReducedMotion()`](#usereducedmotion)
|
|
27
|
-
- [Animations](#animations)
|
|
28
|
-
- [Bundled](#bundled)
|
|
29
|
-
- [Creating clips](#creating-clips)
|
|
30
|
-
|
|
31
11
|
# Get started
|
|
32
12
|
|
|
33
|
-
|
|
13
|
+
## Documentation
|
|
14
|
+
Visit [infinityfx.dev/lively](https://infinityfx.dev/lively) for the complete documentation.
|
|
34
15
|
|
|
35
16
|
## Installation
|
|
36
17
|
|
|
@@ -45,268 +26,9 @@ import { Animatable } from '@infinityfx/lively';
|
|
|
45
26
|
|
|
46
27
|
...
|
|
47
28
|
|
|
48
|
-
<Animatable
|
|
29
|
+
<Animatable animate={{ opacity: [0, 1] }} triggers={[{ on: 'mount' }]}>
|
|
49
30
|
<div class="my-class">
|
|
50
31
|
Lorem ipsum enim amet consequat ut reprehenderit cupidatat et incididunt qui minim culpa. Dolor do laborum nulla pariatur tempor excepteur duis et ipsum.
|
|
51
32
|
</div>
|
|
52
33
|
</Animatable>
|
|
53
|
-
```
|
|
54
|
-
|
|
55
|
-
## Defining animations
|
|
56
|
-
|
|
57
|
-
The `<Animatable>` component exposes the `animate` and `animations` properties which can be used to define animatable properties, as well as animation options. Animatable properties can accept single values, arrays, functions and [reactive links](#uselink) as arguments.
|
|
58
|
-
|
|
59
|
-
```jsx
|
|
60
|
-
<Animatable
|
|
61
|
-
animate={{
|
|
62
|
-
opacity: 1,
|
|
63
|
-
scale: ['0 0', '0.5 0', '1 1'],
|
|
64
|
-
borderRadius: (progress) => progress * 10,
|
|
65
|
-
duration: 2, // Animation will last 2 seconds
|
|
66
|
-
immediate: true // Animation will override any currently playing animation
|
|
67
|
-
}}
|
|
68
|
-
animations={{
|
|
69
|
-
myAnimation: {
|
|
70
|
-
opacity: [0, 1, 0.5]
|
|
71
|
-
}
|
|
72
|
-
}}>
|
|
73
|
-
...
|
|
74
|
-
</Animatable>
|
|
75
|
-
```
|
|
76
|
-
|
|
77
|
-
# Components
|
|
78
|
-
|
|
79
|
-
## Animatable `<Animatable />`
|
|
80
|
-
|
|
81
|
-
Base animation component that allows for fully customizable animations.
|
|
82
|
-
|
|
83
|
-
```jsx
|
|
84
|
-
import { Animatable } from '@infinityfx/lively';
|
|
85
|
-
|
|
86
|
-
...
|
|
87
|
-
|
|
88
|
-
<Animatable
|
|
89
|
-
triggers={[{ on: 'mount' }]}
|
|
90
|
-
initial={{ opacity: 0 }}
|
|
91
|
-
animate={{ opacity: 1 }}>
|
|
92
|
-
<div>...</div>
|
|
93
|
-
</Animatable>
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
## Animate `<Animate />`
|
|
97
|
-
|
|
98
|
-
Fully automated animations based on animation clips.
|
|
99
|
-
|
|
100
|
-
```jsx
|
|
101
|
-
import { Animate } from '@infinityfx/lively';
|
|
102
|
-
import { Scale, Fade } from '@infinityfx/lively/animations';
|
|
103
|
-
|
|
104
|
-
...
|
|
105
|
-
|
|
106
|
-
<Animate animations={[Scale.unique({ duration: 2 }), Fade]} triggers={[{ on: 'mount' }]}>
|
|
107
|
-
<div class="my-class">
|
|
108
|
-
...
|
|
109
|
-
</div>
|
|
110
|
-
</Animate>
|
|
111
|
-
```
|
|
112
|
-
|
|
113
|
-
## LayoutGroup `<LayoutGroup />`
|
|
114
|
-
|
|
115
|
-
Allows for animating direct `<Animatable />` and `<Animate />` child components, when their layout changes or the our unmounted. This requires the respective child components to have a key specified.
|
|
116
|
-
|
|
117
|
-
```jsx
|
|
118
|
-
import { Animatable } from '@infinityfx/lively';
|
|
119
|
-
import { LayoutGroup } from '@infinityfx/lively/layout';
|
|
120
|
-
|
|
121
|
-
...
|
|
122
|
-
|
|
123
|
-
<LayoutGroup>
|
|
124
|
-
<Animatable key="mykey" unmount animate={{ opacity: 1 }} initial={{ opacity: 0 }}>
|
|
125
|
-
<div class="my-class">
|
|
126
|
-
Hello world!
|
|
127
|
-
</div>
|
|
128
|
-
</Animatable>
|
|
129
|
-
</LayoutGroup>
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
## Morph `<Morph />`
|
|
133
|
-
|
|
134
|
-
Morphs one element into another.
|
|
135
|
-
|
|
136
|
-
```jsx
|
|
137
|
-
import { useState } from 'react';
|
|
138
|
-
import { Morph } from '@infinityfx/lively/layout';
|
|
139
|
-
|
|
140
|
-
...
|
|
141
|
-
|
|
142
|
-
const [state, setState] = useState(false);
|
|
143
|
-
|
|
144
|
-
...
|
|
145
|
-
|
|
146
|
-
<Morph id="mymorph" shown={state}>
|
|
147
|
-
<div onClick={() => setState(!state)}>
|
|
148
|
-
...
|
|
149
|
-
</div>
|
|
150
|
-
</Morph>
|
|
151
|
-
|
|
152
|
-
<Morph id="mymorph" shown={!state} transition={{ duration: 0.5 }}>
|
|
153
|
-
<div onClick={() => setState(!state)}>
|
|
154
|
-
...
|
|
155
|
-
</div>
|
|
156
|
-
</Morph>
|
|
157
|
-
```
|
|
158
|
-
|
|
159
|
-
# Hooks
|
|
160
|
-
|
|
161
|
-
Lively comes with a set of hooks that allow for the creation of complex reactive animations.
|
|
162
|
-
|
|
163
|
-
## `useLink()`
|
|
164
|
-
|
|
165
|
-
The useLink hook can be used to create a reactive value, which can be linked to animation components to animate different properties based on the value.
|
|
166
|
-
|
|
167
|
-
```jsx
|
|
168
|
-
import { useEffect } from 'react';
|
|
169
|
-
import { useLink } from '@infinityfx/lively/hooks';
|
|
170
|
-
import { Animatable } from '@infinityfx/lively';
|
|
171
|
-
|
|
172
|
-
export default function Page() {
|
|
173
|
-
|
|
174
|
-
const [link, setValue] = useLink(0 /* initial value */);
|
|
175
|
-
|
|
176
|
-
useEffect(() => {
|
|
177
|
-
setTimeout(() => setValue(1), 1000); // set the animation value to 1, 1 second after the component has mounted.
|
|
178
|
-
}, []);
|
|
179
|
-
|
|
180
|
-
return <Animatable animate={{
|
|
181
|
-
opacity: link
|
|
182
|
-
}}>...</Animatable>;
|
|
183
|
-
|
|
184
|
-
}
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
Additionally you can provide a link with a function to transform the value to a more usable format for certain animation properties.
|
|
188
|
-
|
|
189
|
-
```jsx
|
|
190
|
-
const [link, setValue] = useLink(0 /* initial value */);
|
|
191
|
-
|
|
192
|
-
...
|
|
193
|
-
|
|
194
|
-
<Animatable animate={{
|
|
195
|
-
translate: link(input => {
|
|
196
|
-
return `${input} ${input}`; // we return a string instead of a number for the translate property.
|
|
197
|
-
})
|
|
198
|
-
}}>...</Animatable>;
|
|
199
|
-
```
|
|
200
|
-
|
|
201
|
-
## `useScroll()`
|
|
202
|
-
|
|
203
|
-
The `useScroll` hook returns a reactive link that corresponds to the current scroll position of the window.
|
|
204
|
-
|
|
205
|
-
```jsx
|
|
206
|
-
const value = useScroll();
|
|
207
|
-
|
|
208
|
-
...
|
|
209
|
-
|
|
210
|
-
// gradually fade in element when scrolling the window
|
|
211
|
-
<Animatable animate={{
|
|
212
|
-
opacity: value(val => val / document.body.scrollHeight)
|
|
213
|
-
}}>...</Animatable>;
|
|
214
|
-
```
|
|
215
|
-
|
|
216
|
-
## `usePath()`
|
|
217
|
-
|
|
218
|
-
The `usePath` hook can be used to animate an element along an SVG path.
|
|
219
|
-
|
|
220
|
-
```jsx
|
|
221
|
-
const [link, ref] = usePath();
|
|
222
|
-
|
|
223
|
-
...
|
|
224
|
-
|
|
225
|
-
<>
|
|
226
|
-
<Animatable animate={{
|
|
227
|
-
translate: link(([x, y]) => `${x} ${y}`)
|
|
228
|
-
}}>...</Animatable>
|
|
229
|
-
|
|
230
|
-
<svg>
|
|
231
|
-
<path ref={ref} d="..." />
|
|
232
|
-
</svg>
|
|
233
|
-
</>;
|
|
234
|
-
```
|
|
235
|
-
|
|
236
|
-
## `useAudio()`
|
|
237
|
-
|
|
238
|
-
The `useAudio` hook can be used to create animations that react to the frequency response of playing audio.
|
|
239
|
-
|
|
240
|
-
```jsx
|
|
241
|
-
const [source, link] = useAudio({ bands: 8 });
|
|
242
|
-
|
|
243
|
-
...
|
|
244
|
-
|
|
245
|
-
<>
|
|
246
|
-
<Animatable animate={{
|
|
247
|
-
scale: link((values, i) => `1 ${values[i]}`)
|
|
248
|
-
}}>...</Animatable>
|
|
249
|
-
|
|
250
|
-
<audio ref={source} src="myaudio.mp3">
|
|
251
|
-
</>;
|
|
252
|
-
```
|
|
253
|
-
|
|
254
|
-
## `useReducedMotion()`
|
|
255
|
-
|
|
256
|
-
The `useReducedMotion` hook checks whether a user prefers the use of reduced motion on a page.
|
|
257
|
-
|
|
258
|
-
```jsx
|
|
259
|
-
const reduced = useReducedMotion();
|
|
260
|
-
|
|
261
|
-
...
|
|
262
|
-
|
|
263
|
-
// If the user prefers reduced motion, then pause the animation.
|
|
264
|
-
<Animatable animate={{ ... }} paused={reduced}>...</Animatable>;
|
|
265
|
-
```
|
|
266
|
-
|
|
267
|
-
# Animations
|
|
268
|
-
|
|
269
|
-
## Bundled
|
|
270
|
-
|
|
271
|
-
Lively exports a submodule called animations which contains various animation clips that can be used in tandem with the `<Animate />` and `<Animatable />` components. These animations can be used as is, or can be configured by calling `.unique()` on the respective animation.
|
|
272
|
-
|
|
273
|
-
```jsx
|
|
274
|
-
import { Move, Scale } from '@infinityfx/lively/animations';
|
|
275
|
-
import { Animate } from '@infinityfx/lively/auto';
|
|
276
|
-
import { Animatable } from '@infinityfx/lively';
|
|
277
|
-
|
|
278
|
-
...
|
|
279
|
-
|
|
280
|
-
const myClip = Move.unique({ duration: 2 }); // configure the animation
|
|
281
|
-
|
|
282
|
-
...
|
|
283
|
-
|
|
284
|
-
<>
|
|
285
|
-
<Animate animations={[myClip]}>...</Animate>
|
|
286
|
-
|
|
287
|
-
<Animatable animations={{
|
|
288
|
-
myAnimation: Scale,
|
|
289
|
-
myOtherAnimation: Scale.unique({ delay: 1 })
|
|
290
|
-
}}>...</Animatable>
|
|
291
|
-
</>
|
|
292
|
-
```
|
|
293
|
-
|
|
294
|
-
## Creating clips
|
|
295
|
-
|
|
296
|
-
If you whish to create your own animation clip to reuse later on, you can do so using `new Clip()`. This constructor takes 2 arguments, some animation properties and some optional initial values.
|
|
297
|
-
|
|
298
|
-
```js
|
|
299
|
-
import { Clip } from '@infinityfx/lively/animations';
|
|
300
|
-
|
|
301
|
-
const myCustomAnimation = new Clip(
|
|
302
|
-
{
|
|
303
|
-
opacity: 1, // value to animate to
|
|
304
|
-
duration: 2 // Clip will have a duration of 2 seconds
|
|
305
|
-
},
|
|
306
|
-
{
|
|
307
|
-
opacity: 0 // initial value
|
|
308
|
-
}
|
|
309
|
-
);
|
|
310
|
-
|
|
311
|
-
export default myCustomAnimation;
|
|
312
34
|
```
|
package/dist/core/action.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
class i{constructor(i,t,s,n={}){this.commit=!0,this.onfinish=null,this.composite=s.composite,s.composite="combine"===s.composite?"accumulate":"replace",this.animation=i.element.animate(t,s),this.dynamic=n,this.track=i,this.animation.onfinish=this.finish.bind(this)}finish(){var i;try{this.commit&&this.animation.commitStyles()}catch(i){}this.animation.cancel(),null===(i=this.onfinish)||void 0===i||i.call(this)}step(i){var t,s
|
|
1
|
+
class i{constructor(i,t,s,n={}){this.commit=!0,this.onfinish=null,this.composite=s.composite,s.composite="combine"===s.composite?"accumulate":"replace",this.animation=i.element.animate(t,s),this.dynamic=n,this.track=i,this.animation.onfinish=this.finish.bind(this)}finish(){var i;try{this.commit&&this.animation.commitStyles()}catch(i){}this.animation.cancel(),null===(i=this.onfinish)||void 0===i||i.call(this)}step(i){var t,s;const n=(null===(t=this.animation.effect)||void 0===t?void 0:t.getComputedTiming().progress)||0;for(const t in this.dynamic)this.track.apply(t,null===(s=this.dynamic[t])||void 0===s?void 0:s.call(this.track,n,i))}}export{i as default};
|
|
2
2
|
//# sourceMappingURL=action.js.map
|
package/dist/core/action.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"action.js","sources":["../../src/core/action.ts"],"sourcesContent":[null],"names":["Action","constructor","track","keyframes","config","dynamic","this","commit","onfinish","composite","animation","element","animate","finish","bind","commitStyles","ex","cancel","_a","call","step","index","progress","effect","getComputedTiming","prop","apply","_b"
|
|
1
|
+
{"version":3,"file":"action.js","sources":["../../src/core/action.ts"],"sourcesContent":[null],"names":["Action","constructor","track","keyframes","config","dynamic","this","commit","onfinish","composite","animation","element","animate","finish","bind","commitStyles","ex","cancel","_a","call","step","index","progress","effect","getComputedTiming","prop","apply","_b"],"mappings":"AAGc,MAAOA,EASjB,WAAAC,CAAYC,EAAcC,EAAkDC,EAAqFC,EAA6B,CAAA,GAN9LC,KAAMC,QAAY,EAIlBD,KAAQE,SAAwB,KAG5BF,KAAKG,UAAYL,EAAOK,UACvBL,EAAeK,UAAiC,YAArBL,EAAOK,UAA0B,aAAe,UAC5EH,KAAKI,UAAYR,EAAMS,QAAQC,QAAQT,EAAWC,GAClDE,KAAKD,QAAUA,EACfC,KAAKJ,MAAQA,EAEbI,KAAKI,UAAUF,SAAWF,KAAKO,OAAOC,KAAKR,KAC9C,CAED,MAAAO,SACI,IACQP,KAAKC,QAAQD,KAAKI,UAAUK,cACnC,CAAC,MAAOC,GAAM,CACfV,KAAKI,UAAUO,SAEF,QAAbC,EAAAZ,KAAKE,gBAAQ,IAAAU,GAAAA,EAAAC,KAAAb,KAChB,CAED,IAAAc,CAAKC,WACD,MAAMC,WAAWJ,EAAAZ,KAAKI,UAAUa,6BAAQC,oBAAoBF,WAAY,EAExE,IAAK,MAAMG,KAAQnB,KAAKD,QACpBC,KAAKJ,MAAMwB,MAAMD,EAAqD,QAA/CE,EAAArB,KAAKD,QAAQoB,UAAkC,IAAAE,OAAA,EAAAA,EAAAR,KAAKb,KAAKJ,MAAOoB,EAAUD,GAExG"}
|
package/dist/core/clip.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as t}from"tslib";import e from"./action.js";import{isLink as i}from"./link.js";import{normalizeAnimatableKeyframes as s,
|
|
1
|
+
import{__rest as t}from"tslib";import e from"./action.js";import{isLink as i}from"./link.js";import{normalizeAnimatableKeyframes as s,createDynamic as r,distributeAnimatableKeyframes as a,merge as n}from"./utils.js";class o{constructor(e,o){var{duration:h=1,delay:l=0,repeat:m=1,alternate:c=!1,easing:d="ease",reverse:y=!1,composite:p="none"}=e,f=t(e,["duration","delay","repeat","alternate","easing","reverse","composite"]);void 0===o&&(o={}),this.dynamic={};const u={};for(let t in f){let e=f[t],n=o[t];if(e instanceof Function){i(e)||(this.dynamic[t]=e);continue}const h=Array.isArray(e)?e:[e];h.length<2&&void 0!==n&&h.unshift(n),null===h[0]&&(void 0!==n?h[0]=n:h.splice(0,1)),s(h)&&("borderRadius"!==t?a(t,h,u):this.dynamic[t]=r(t,Object.values(a(t,h)),d))}this.keyframes=Object.values(u),this.initial=n({},o,this.keyframes.length?this.keyframes[0]:{}),delete this.initial.offset,this.isEmpty=!this.keyframes.length&&!Object.keys(this.dynamic).length,this.duration=this.isEmpty?0:h,this.delay=l,this.repeat=m,this.alternate=c,this.easing=d,this.reverse=y,this.composite=p}static from(t,e){return t instanceof o?t:new o(t||{},e)}unique(t){const e=new o({});for(const i in this)this.hasOwnProperty(i)&&(e[i]=i in t?t[i]:this[i]);return e}play(t,{composite:i=this.composite,reverse:s=this.reverse,commit:r=!0,delay:a=0}){if(this.isEmpty)return;const n=new e(t,this.keyframes,{duration:1e3*this.duration,delay:1e3*(a+this.delay),iterations:this.repeat,direction:this.alternate?s?"alternate-reverse":"alternate":s?"reverse":"normal",fill:"both",easing:this.easing,composite:i},this.dynamic);n.commit=r,t.push(n)}}export{o as default};
|
|
2
2
|
//# sourceMappingURL=clip.js.map
|
package/dist/core/clip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"clip.js","sources":["../../src/core/clip.ts"],"sourcesContent":[null],"names":["Clip","constructor","_a","initial","duration","delay","repeat","alternate","easing","reverse","composite","properties","__rest","this","dynamic","keyframes","prop","val","init","Function","isLink","arr","Array","isArray","length","undefined","unshift","splice","normalizeAnimatableKeyframes","distributeAnimatableKeyframes","Object","values","merge","offset","isEmpty","keys","from","data","unique","config","clip","key","hasOwnProperty","play","track","commit","action","Action","iterations","direction","fill","push"],"mappings":"
|
|
1
|
+
{"version":3,"file":"clip.js","sources":["../../src/core/clip.ts"],"sourcesContent":[null],"names":["Clip","constructor","_a","initial","duration","delay","repeat","alternate","easing","reverse","composite","properties","__rest","this","dynamic","keyframes","prop","val","init","Function","isLink","arr","Array","isArray","length","undefined","unshift","splice","normalizeAnimatableKeyframes","distributeAnimatableKeyframes","createDynamic","Object","values","merge","offset","isEmpty","keys","from","data","unique","config","clip","key","hasOwnProperty","play","track","commit","action","Action","iterations","direction","fill","push"],"mappings":"wNAoCc,MAAOA,EAcjB,WAAAC,CAAYC,EAAiJC,GAAjJ,IAAAC,SAAEA,EAAW,EAACC,MAAEA,EAAQ,EAACC,OAAEA,EAAS,EAACC,UAAEA,GAAY,EAAKC,OAAEA,EAAS,OAAMC,QAAEA,GAAU,EAAKC,UAAEA,EAAY,QAAuCR,EAA5BS,EAAUC,EAAAV,EAA7H,+EAAiJ,IAAAC,IAAAA,EAAgC,CAAA,GAV7LU,KAAOC,QAAsB,GAWzB,MAAMC,EAEF,CAAA,EAEJ,IAAK,IAAIC,KAAQL,EAAY,CACzB,IAAIM,EAAMN,EAAWK,GAAwBE,EAAOf,EAAQa,GAE5D,GAAIC,aAAeE,SAAU,CACpBC,EAAOH,KAAMJ,KAAKC,QAAQE,GAAyBC,GACxD,QACH,CAED,MAAMI,EAAMC,MAAMC,QAAQN,GAAOA,EAAM,CAACA,GAEpCI,EAAIG,OAAS,QAAcC,IAATP,GAAoBG,EAAIK,QAAQR,GACvC,OAAXG,EAAI,UAAsBI,IAATP,EAAqBG,EAAI,GAAKH,EAAOG,EAAIM,OAAO,EAAG,IAEnEC,EAA6BP,KAErB,iBAATL,EAKJa,EAA8Bb,EAAMK,EAAYN,GAJ5CF,KAAKC,QAAQE,GAAQc,EAAcd,EAAMe,OAAOC,OAAOH,EAA8Bb,EAAMK,IAAcb,GAKhH,CAEDK,KAAKE,UAAYgB,OAAOC,OAAOjB,GAC/BF,KAAKV,QAAU8B,EAAM,CAAE,EAAE9B,EAASU,KAAKE,UAAUS,OAAUX,KAAKE,UAAU,GAAa,CAAE,UAElFF,KAAKV,QAAQ+B,OACpBrB,KAAKsB,SAAWtB,KAAKE,UAAUS,SAAWO,OAAOK,KAAKvB,KAAKC,SAASU,OACpEX,KAAKT,SAAWS,KAAKsB,QAAU,EAAI/B,EACnCS,KAAKR,MAAQA,EACbQ,KAAKP,OAASA,EACdO,KAAKN,UAAYA,EACjBM,KAAKL,OAASA,EACdK,KAAKJ,QAAUA,EACfI,KAAKH,UAAYA,CACpB,CAED,WAAO2B,CAAKC,EAA8BnC,GACtC,OAAOmC,aAAgBtC,EAAOsC,EAAO,IAAItC,EAAKsC,GAAQ,CAAA,EAAInC,EAC7D,CAED,MAAAoC,CAAOC,GACH,MAAMC,EAAO,IAAIzC,EAAK,CAAA,GAEtB,IAAK,MAAM0C,KAAO7B,KACVA,KAAK8B,eAAeD,KACnBD,EAAaC,GAAOA,KAAOF,EAASA,EAAOE,GAAgB7B,KAAK6B,IAIzE,OAAOD,CACV,CAED,IAAAG,CAAKC,GAAcnC,UAAEA,EAAYG,KAAKH,UAASD,QAAEA,EAAUI,KAAKJ,QAAOqC,OAAEA,GAAS,EAAIzC,MAAEA,EAAQ,IAC5F,GAAIQ,KAAKsB,QAAS,OAElB,MAAMY,EAAS,IAAIC,EAAOH,EAAOhC,KAAKE,UAAW,CAC7CX,SAA0B,IAAhBS,KAAKT,SACfC,MAA8B,KAAtBA,EAAQQ,KAAKR,OACrB4C,WAAYpC,KAAKP,OACjB4C,UAAWrC,KAAKN,UACXE,EAAU,oBAAsB,YAChCA,EAAU,UAAY,SAC3B0C,KAAM,OACN3C,OAAQK,KAAKL,OACbE,aACDG,KAAKC,SAERiC,EAAOD,OAASA,EAEhBD,EAAMO,KAAKL,EACd"}
|
package/dist/core/timeline.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import t from"./clip.js";import{isLink as s}from"./link.js";import i from"./track.js";import{IndexedMap as e,merge as a}from"./utils.js";class r{constructor({stagger:t=.1,staggerLimit:s=10,deform:i=!0,cachable:a,mountClips:r}){this.index=0,this.paused=!1,this.tracks=new e,this.frame=0,this.linked=[],this.mounted=!1,this.stagger=t,this.staggerLimit=s-1,this.deform=i,this.cachable=a,this.mountClips=r}step(){cancelAnimationFrame(this.frame),this.paused||this.tracks.stack.forEach(((t,s)=>t.step(s))),this.frame=requestAnimationFrame(this.step.bind(this))}time(t){return this.tracks.size?t.duration+t.delay+this.stagger*Math.max(Math.min(this.staggerLimit,this.tracks.size-1),0):0}receiver(s,i,e){if(!this.paused)for(let r=0;r<this.tracks.size;r++){const c=this.tracks.stack[r],h=i(r);e.duration?(a(e,{composite:"override"}),new t(Object.assign(Object.assign({},e),{[s]:h})).play(c,{})):c.apply(s,h)}}link(i){if(this.step(),!(this.linked.length||!i||i instanceof t))for(let t in i){const e=i[t];if(s(e)){const s=this.receiver.bind(this,t,e);e.subscribe(s),this.linked.push((()=>e.unsubscribe(s))),s({})}}}unlink(){this.linked.forEach((t=>t())),this.linked=[]}transition(t,s={}){for(let i=0;i<this.tracks.size;i++)this.tracks.stack[i].transition(null==t?void 0:t.tracks.stack[i],s)}insert(t){if((t instanceof HTMLElement||t instanceof SVGElement)&&!this.tracks.has(t)){const s=new i(t,this.deform,this.cachable);this.tracks.set(t,s),this.mounted&&this.mountClips.forEach((t=>t.play(s,{})))}}add(t,{immediate:s=!1,composite:i,reverse:e,delay:a=0,commit:r}){let c,h=0;for(;c=this.tracks.stack[h];)c.element.isConnected?(s&&c.clear(),t.play(c,{delay:a+Math.min(h,this.staggerLimit)*(this.stagger<0?t.duration/this.tracks.size:1)*Math.abs(this.stagger),composite:i,reverse:e,commit:r}),h++):this.tracks.delete(c.element)}pause(t){for(const s of this.tracks.stack)s.pause(t);this.paused=t}cache(){for(const t of this.tracks.stack)t.cache.update()}}export{r as default};
|
|
1
|
+
import t from"./clip.js";import{isLink as s}from"./link.js";import i from"./track.js";import{IndexedMap as e,merge as a}from"./utils.js";class r{constructor({stagger:t=.1,staggerLimit:s=10,deform:i=!0,cachable:a,mountClips:r}){this.index=0,this.paused=!1,this.tracks=new e,this.frame=0,this.linked=[],this.mounted=!1,this.stagger=t,this.staggerLimit=s-1,this.deform=i,this.cachable=a,this.mountClips=r}step(){cancelAnimationFrame(this.frame),this.paused||this.tracks.stack.forEach(((t,s)=>t.step(s))),this.frame=requestAnimationFrame(this.step.bind(this))}time(t){return this.tracks.size?t.duration+t.delay+this.stagger*Math.max(Math.min(this.staggerLimit,this.tracks.size-1),0):0}receiver(s,i,e){if(!this.paused)for(let r=0;r<this.tracks.size;r++){const c=this.tracks.stack[r],h=i(r);e.duration?(a(e,{composite:"override"}),new t(Object.assign(Object.assign({},e),{[s]:h})).play(c,{})):(c.apply(s,h),c.correct())}}link(i){if(this.step(),!(this.linked.length||!i||i instanceof t))for(let t in i){const e=i[t];if(s(e)){const s=this.receiver.bind(this,t,e);e.subscribe(s),this.linked.push((()=>e.unsubscribe(s))),s({})}}}unlink(){this.linked.forEach((t=>t())),this.linked=[]}transition(t,s={}){for(let i=0;i<this.tracks.size;i++)this.tracks.stack[i].transition(null==t?void 0:t.tracks.stack[i],s)}insert(t){if((t instanceof HTMLElement||t instanceof SVGElement)&&!this.tracks.has(t)){const s=new i(t,this.deform,this.cachable);this.tracks.set(t,s),this.mounted&&this.mountClips.forEach((t=>t.play(s,{})))}}add(t,{immediate:s=!1,composite:i,reverse:e,delay:a=0,commit:r}){let c,h=0;for(;c=this.tracks.stack[h];)c.element.isConnected?(s&&c.clear(),t.play(c,{delay:a+Math.min(h,this.staggerLimit)*(this.stagger<0?t.duration/this.tracks.size:1)*Math.abs(this.stagger),composite:i,reverse:e,commit:r}),h++):this.tracks.delete(c.element)}pause(t){for(const s of this.tracks.stack)s.pause(t);this.paused=t}cache(){for(const t of this.tracks.stack)t.cache.update()}}export{r as default};
|
|
2
2
|
//# sourceMappingURL=timeline.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timeline.js","sources":["../../src/core/timeline.ts"],"sourcesContent":[null],"names":["Timeline","constructor","stagger","staggerLimit","deform","cachable","mountClips","this","index","paused","tracks","IndexedMap","frame","linked","mounted","step","cancelAnimationFrame","stack","forEach","track","i","requestAnimationFrame","bind","time","clip","size","duration","delay","Math","max","min","receiver","prop","link","config","value","merge","composite","Clip","Object","assign","play","apply","length","isLink","subscribe","push","unsubscribe","unlink","transition","from","options","insert","element","HTMLElement","SVGElement","has","Track","set","add","immediate","reverse","commit","isConnected","clear","abs","delete","pause","cache","update"],"mappings":"yIAQc,MAAOA,EAcjB,WAAAC,EAAYC,QAAEA,EAAU,GAAGC,aAAEA,EAAe,GAAEC,OAAEA,GAAS,EAAIC,SAAEA,EAAQC,WAAEA,IAZzEC,KAAKC,MAAW,EAKhBD,KAAME,QAAY,EAClBF,KAAAG,OAAqC,IAAIC,EACzCJ,KAAKK,MAAW,EAChBL,KAAMM,OAAmB,GACzBN,KAAOO,SAAY,EAIfP,KAAKL,QAAUA,EACfK,KAAKJ,aAAeA,EAAe,EACnCI,KAAKH,OAASA,EACdG,KAAKF,SAAWA,EAChBE,KAAKD,WAAaA,CACrB,CAED,IAAAS,GACIC,qBAAqBT,KAAKK,OAErBL,KAAKE,QAAQF,KAAKG,OAAOO,MAAMC,SAAQ,CAACC,EAAOC,IAAMD,EAAMJ,KAAKK,KAErEb,KAAKK,MAAQS,sBAAsBd,KAAKQ,KAAKO,KAAKf,MACrD,CAED,IAAAgB,CAAKC,GACD,OAAKjB,KAAKG,OAAOe,KAEVD,EAAKE,SAAWF,EAAKG,MAAQpB,KAAKL,QAAU0B,KAAKC,IAAID,KAAKE,IAAIvB,KAAKJ,aAAcI,KAAKG,OAAOe,KAAO,GAAI,GAFjF,CAGjC,CAEO,QAAAM,CAASC,EAAcC,EAAiBC,GAC5C,IAAI3B,KAAKE,OAET,IAAK,IAAIW,EAAI,EAAGA,EAAIb,KAAKG,OAAOe,KAAML,IAAK,CACvC,MAAMD,EAAQZ,KAAKG,OAAOO,MAAMG,GAC5Be,EAAQF,EAAKb,GAEbc,EAAOR,UACPU,EAAMF,EAAQ,CAAEG,UAAW,aAE3B,IAAIC,EAAUC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAAN,GAAQ,CAAAF,CAACA,GAAOG,KAASM,KAAKtB,EAAO,CAAA,
|
|
1
|
+
{"version":3,"file":"timeline.js","sources":["../../src/core/timeline.ts"],"sourcesContent":[null],"names":["Timeline","constructor","stagger","staggerLimit","deform","cachable","mountClips","this","index","paused","tracks","IndexedMap","frame","linked","mounted","step","cancelAnimationFrame","stack","forEach","track","i","requestAnimationFrame","bind","time","clip","size","duration","delay","Math","max","min","receiver","prop","link","config","value","merge","composite","Clip","Object","assign","play","apply","correct","length","isLink","subscribe","push","unsubscribe","unlink","transition","from","options","insert","element","HTMLElement","SVGElement","has","Track","set","add","immediate","reverse","commit","isConnected","clear","abs","delete","pause","cache","update"],"mappings":"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"}
|
package/dist/core/track.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{StyleCache as t}from"./cache.js";import{lengthToOffset as e}from"./utils.js";class s{constructor(e,s,i){this.playing=0,this.active=[],this.queue=[],this.scale=[1,1],this.
|
|
1
|
+
import{StyleCache as t}from"./cache.js";import{lengthToOffset as e}from"./utils.js";class s{constructor(e,s,i){this.playing=0,this.active=[],this.queue=[],this.paused=!1,this.scale=[1,1],this.correctedBorderRadius="",this.element=e,this.deform=s,this.cache=new t(e,i)}push(t){t.onfinish=this.next.bind(this),this.playing&&"none"===t.composite?(this.queue.push(t),t.animation.pause()):(this.active.push(t),"none"===t.composite&&this.playing++,this.paused&&t.animation.pause())}next(){this.cache.update(),--this.playing>0||(this.active=this.queue.length?this.queue.splice(0,1):[],this.playing=this.active.length,this.pause(!1))}clear(t){this.active.forEach((e=>{e.onfinish=null;try{t?e.commit||"combine"===e.composite||e.animation.cancel():e.animation.finish()}catch(t){e.animation.cancel()}})),t||(this.active=[],this.queue=[],this.playing=0)}pause(t){for(const e of this.active)e.animation[t?"pause":"play"]();this.paused=t}step(t){for(const e of this.active)e.step(t);this.active.length&&this.correct()}transition(t,e){this.clear(!0);const s=this.cache.difference(null==t?void 0:t.cache.data,e);this.cache.update(),null==t||t.clear(),null==t||t.cache.update(),s.forEach((t=>t.play(this,{commit:!1})))}apply(t,s){const i="strokeLength"===t;this.element.style[i?"strokeDashoffset":t]=i?e(s):s}decomposeScale(){const[t,e]=this.cache.computed.scale.split(" ");let s=Math.max(parseFloat(t)||1,1e-4);/%$/.test(t)&&(s/=100);let i=e?Math.max(parseFloat(e),1e-4):s;return/%$/.test(e)&&(i/=100),[s,i]}computeBorderRadius(){const t=this.cache.computed,e=t.borderRadius.split(/\s*\/\s*/);e.length<2&&(e[1]=e[0]);const s=t.borderRadius!==this.correctedBorderRadius?[1,1]:this.scale;this.scale=this.decomposeScale(),this.element.style.borderRadius=e.map(((t,e)=>t.split(" ").map((t=>{var i;return parseFloat(t)*s[e]/this.scale[e]+((null===(i=t.match(/[^\d\.]+$/))||void 0===i?void 0:i[0])||"px")})).join(" "))).join("/"),this.correctedBorderRadius=t.borderRadius}correct(){if(this.deform)return;this.computeBorderRadius();const[t,e]=this.decomposeScale();for(let s=0;s<this.element.children.length;s++){const i=this.element.children[s],a=i.offsetLeft,o=i.offsetTop,c=i.offsetWidth,h=i.offsetHeight,[n,r]=getComputedStyle(i).translate.split(" ").map(parseFloat);i.style.transform=`translate(${-n||0}px, ${-r||0}px) scale(${1/t}, ${1/e}) translate(${a*(1-t)+c/2*(1-t)+(n||0)}px, ${o*(1-e)+h/2*(1-e)+(r||0)}px)`}}}export{s as default};
|
|
2
2
|
//# sourceMappingURL=track.js.map
|
package/dist/core/track.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"track.js","sources":["../../src/core/track.ts"],"sourcesContent":[null],"names":["Track","constructor","element","deform","cachable","this","playing","active","queue","scale","
|
|
1
|
+
{"version":3,"file":"track.js","sources":["../../src/core/track.ts"],"sourcesContent":[null],"names":["Track","constructor","element","deform","cachable","this","playing","active","queue","paused","scale","correctedBorderRadius","cache","StyleCache","push","action","onfinish","next","bind","composite","animation","pause","update","length","splice","clear","partial","forEach","commit","cancel","finish","ex","value","step","index","correct","transition","previous","options","clips","difference","data","clip","play","apply","prop","val","isStroke","style","lengthToOffset","decomposeScale","xString","yString","computed","split","x","Math","max","parseFloat","test","y","computeBorderRadius","radii","borderRadius","previousScale","map","axis","i","radius","_a","match","join","children","child","l","offsetLeft","t","offsetTop","w","offsetWidth","h","offsetHeight","tx","ty","getComputedStyle","translate","transform"],"mappings":"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"}
|
package/dist/core/utils.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
function t(...t){for(let e=1;e<t.length;e++)for(const n in t[e])n in t[0]&&void 0!==t[0][n]||(t[0][n]=t[e][n]);return t[0]}function e(t,e){const n={};for(const o of e)n[o]=t[o];return n}function n(...t){return e=>{t.forEach((t=>{t&&"current"in t&&(t.current=e),t instanceof Function&&t(e)}))}}const o=t=>1-parseFloat(t.toString());class
|
|
1
|
+
function t(...t){for(let e=1;e<t.length;e++)for(const n in t[e])n in t[0]&&void 0!==t[0][n]||(t[0][n]=t[e][n]);return t[0]}function e(t,e){const n={};for(const o of e)n[o]=t[o];return n}function n(...t){return e=>{t.forEach((t=>{t&&"current"in t&&(t.current=e),t instanceof Function&&t(e)}))}}const o=t=>1-parseFloat(t.toString());class r extends Map{constructor(){super(...arguments),this.stack=[]}set(t,e){return this.stack.push(e),super.set(t,e)}delete(t){const e=this.stack.indexOf(this.get(t));return e>=0&&this.stack.splice(e,1),super.delete(t)}}function s(t,e,n={}){const r=(e,r)=>{const s=1e4*e,i="strokeLength"===t;s in n||(n[s]={offset:e}),n[s][i?"strokeDashoffset":t]=i?o(r):r};for(let t=0;t<e.length;t++){let{offset:n,value:o,after:s}=e[t];void 0!==o&&(void 0!==s&&1===n&&(n-=1e-4),r(n,o)),void 0!==s&&(n=Math.min(n+1e-4,1),r(n,s))}return n}function i(t){let e,n=0;for(let o=0;o<t.length;o++){let r=t[o],s=t.length<2?1:Math.round(o/(t.length-1)*1e4)/1e4;0===o&&(e=r),r&&"object"==typeof r?"offset"in r||(r.offset=s):(r===e&&n++,t[o]={offset:s,value:null!==r?r:void 0})}return n<2||n!==t.length}function c(t,e,n){return function(o){const r=this.element.animate(e,{duration:1e3,fill:"forwards",easing:n});r.currentTime=1e3*o;const s=getComputedStyle(this.element)[t];return r.cancel(),s}}export{r as IndexedMap,n as combineRefs,c as createDynamic,s as distributeAnimatableKeyframes,o as lengthToOffset,t as merge,i as normalizeAnimatableKeyframes,e as pick};
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|
package/dist/core/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sources":["../../src/core/utils.ts"],"sourcesContent":[null],"names":["merge","objects","i","length","key","undefined","pick","map","keys","picked","combineRefs","refs","el","forEach","ref","current","Function","lengthToOffset","val","parseFloat","toString","IndexedMap","Map","constructor","this","stack","set","value","push","super","indexOf","get","splice","delete","distributeAnimatableKeyframes","prop","keyframes","offset","isStroke","after","Math","min","normalizeAnimatableKeyframes","match","equal","keyframe","round"],"mappings":"
|
|
1
|
+
{"version":3,"file":"utils.js","sources":["../../src/core/utils.ts"],"sourcesContent":[null],"names":["merge","objects","i","length","key","undefined","pick","map","keys","picked","combineRefs","refs","el","forEach","ref","current","Function","lengthToOffset","val","parseFloat","toString","IndexedMap","Map","constructor","this","stack","set","value","push","super","indexOf","get","splice","delete","distributeAnimatableKeyframes","prop","keyframes","offset","isStroke","after","Math","min","normalizeAnimatableKeyframes","match","equal","keyframe","round","createDynamic","easing","t","animation","element","animate","duration","fill","currentTime","getComputedStyle","cancel"],"mappings":"AAWgB,SAAAA,KAA8CC,GAC1D,IAAK,IAAIC,EAAI,EAAGA,EAAID,EAAQE,OAAQD,IAChC,IAAK,MAAME,KAAOH,EAAQC,GAClBE,KAAOH,EAAQ,SAA0BI,IAApBJ,EAAQ,GAAGG,KAEpCH,EAAQ,GAAGG,GAAOH,EAAQC,GAAGE,IAIrC,OAAOH,EAAQ,EACnB,CAEgB,SAAAK,EAA2DC,EAAQC,GAC/E,MAAMC,EAAS,CAAA,EAEf,IAAK,MAAML,KAAOI,EAAMC,EAAOL,GAAOG,EAAIH,GAE1C,OAAOK,CACX,CAEgB,SAAAC,KAAeC,GAC3B,OAAQC,IACJD,EAAKE,SAAQC,IACLA,GAAO,YAAaA,IAAMA,EAA6BC,QAAUH,GACjEE,aAAeE,UAAUF,EAAIF,EAAG,GACtC,CAEV,CAEa,MAAAK,EAAkBC,GAAa,EAAIC,WAAWD,EAAIE,YAEzD,MAAOC,UAAyBC,IAAtC,WAAAC,uBAEIC,KAAKC,MAAQ,EAehB,CAbG,GAAAC,CAAItB,EAAQuB,GAGR,OAFAH,KAAKC,MAAMG,KAAKD,GAETE,MAAMH,IAAItB,EAAKuB,EACzB,CAED,OAAOvB,GACH,MAAMF,EAAIsB,KAAKC,MAAMK,QAAQN,KAAKO,IAAI3B,IAGtC,OAFIF,GAAK,GAAGsB,KAAKC,MAAMO,OAAO9B,EAAG,GAE1B2B,MAAMI,OAAO7B,EACvB,EAMC,SAAU8B,EAA8BC,EAAcC,EAAuC7B,EAAoC,CAAA,GACnI,MAAMmB,EAAM,CAACW,EAAgBV,KACzB,MAAMvB,EAAe,IAATiC,EACRC,EAAoB,iBAATH,EAET/B,KAAOG,IAAMA,EAAIH,GAAO,CAAEiC,WAEhC9B,EAAIH,GAAKkC,EAAW,mBAAqBH,GAAQG,EAAWrB,EAAeU,GAASA,CAAK,EAG7F,IAAK,IAAIzB,EAAI,EAAGA,EAAIkC,EAAUjC,OAAQD,IAAK,CACvC,IAAImC,OAAEA,EAAMV,MAAEA,EAAKY,MAAEA,GAAUH,EAAUlC,QAE3BG,IAAVsB,SACctB,IAAVkC,GAAkC,IAAXF,IAAcA,GAAkB,MAC3DX,EAAIW,EAAQV,SAEFtB,IAAVkC,IACAF,EAASG,KAAKC,IAAIJ,EAAS,KAAQ,GACnCX,EAAIW,EAAQE,GAEnB,CAED,OAAOhC,CACX,CAEM,SAAUmC,EAA6BN,GACzC,IAAeO,EAAXC,EAAQ,EAEZ,IAAK,IAAI1C,EAAI,EAAGA,EAAIkC,EAAUjC,OAAQD,IAAK,CACvC,IAAI2C,EAAWT,EAAUlC,GACrBmC,EAASD,EAAUjC,OAAS,EAAI,EAAIqC,KAAKM,MAAM5C,GAAKkC,EAAUjC,OAAS,GAAK,KAAS,IAC/E,IAAND,IAASyC,EAAQE,GAEjBA,GAAgC,iBAAbA,EACb,WAAYA,IAAWA,EAASR,OAASA,IAE3CQ,IAAaF,GAAOC,IACxBR,EAAUlC,GAAK,CAAEmC,SAAQV,MAAoB,OAAbkB,EAAoBA,OAAWxC,GAEtE,CAED,OAAOuC,EAAQ,GAAKA,IAAUR,EAAUjC,MAC5C,UAGgB4C,EAAcZ,EAAcC,EAAuBY,GAC/D,OAAO,SAAuBC,GAC1B,MAAMC,EAAY1B,KAAK2B,QAAQC,QAAQhB,EAAW,CAAEiB,SAAU,IAAMC,KAAM,WAAYN,WACtFE,EAAUK,YAAc,IAAON,EAE/B,MAAMtB,EAAQ6B,iBAAiBhC,KAAK2B,SAAShB,GAI7C,OAFAe,EAAUO,SAEH9B,CACX,CACJ"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{useRef as r,useEffect as e}from"react";import t from"./use-trigger.js";import n from"./use-viewport.js";function o({enter:o=1,exit:u=!1,threshold:c=.5}={}){const[s,i]=n(c),f=r(!1),l=t(),m=t();return e((()=>{function r(){const[r,e]=i(),t=r>0&&r<1&&e>0&&e<1;!f.current&&t&&l.called<(!0===o?1/0:+o)&&l(),f.current&&!t&&m.called<(!0===u?1/0:+u)&&m(),f.current=t}return r(),i.subscribe(r),()=>i.unsubscribe(r)}),[]),[s,l,m]}export{o as default};
|
|
2
|
+
import{useRef as r,useEffect as e}from"react";import t from"./use-trigger.js";import n from"./use-viewport.js";function o({enter:o=1,exit:u=!1,threshold:c=.5}={}){const[s,i]=n(c),f=r(!1),l=t(),m=t();return e((()=>{function r(){const[r,e]=i(),t=r>0&&r<1&&e>0&&e<1;!f.current&&t&&l.called<(!0===o?1/0:+o)&&l(),f.current&&!t&&m.called<(!0===u?1/0:+u)&&m(),f.current=t}return r(),i.subscribe(r),()=>i.unsubscribe(r)}),[l,m]),[s,l,m]}export{o as default};
|
|
3
3
|
//# sourceMappingURL=use-visible.js.map
|
package/dist/layout/morph.js
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as t}from"tslib";import{jsx as
|
|
2
|
+
import{__rest as t}from"tslib";import{jsx as e}from"react/jsx-runtime";import{use as r,useRef as o}from"react";import n,{AnimatableContext as i}from"../animatable.js";import{combineRefs as s}from"../core/utils.js";import u from"../hooks/use-mount-effect.js";const m={};function a(a){var{children:l,group:c,transition:d}=a,f=t(a,["children","group","transition"]);const p=r(i),g=(null==p?void 0:p.group)?`${p.group}.${c}`:c;g in m||(m[g]=new Map);const v=o(null);return u((()=>{var t,e;const r=null===(t=v.current)||void 0===t?void 0:t.timeline;if(!r)return;if(m[g].has(r)){m[g].get(r).state="mounted"}else m[g].set(r,{state:"mounted"});const o=Array.from(m[g].entries()).find((([t,e])=>"unmounted"===e.state));return o?(r.transition(o[0],d),o[1].state="collected"):r.mounted||(null===(e=v.current)||void 0===e||e.trigger("mount"),r.mounted=!0),()=>{const t=m[g].get(r);t&&(t.state="unmounted",setTimeout((()=>t.state="collected"),1))}}),[]),e(n,Object.assign({},f,{group:g,manual:!0,ref:s(v,f.ref),children:l}))}a.isLively=!0;export{a as default};
|
|
3
3
|
//# sourceMappingURL=morph.js.map
|
|
@@ -13,8 +13,9 @@ export default class Track {
|
|
|
13
13
|
active: Action[];
|
|
14
14
|
queue: Action[];
|
|
15
15
|
cache: StyleCache;
|
|
16
|
-
scale: [number, number];
|
|
17
16
|
paused: boolean;
|
|
17
|
+
scale: [number, number];
|
|
18
|
+
correctedBorderRadius: string;
|
|
18
19
|
constructor(element: HTMLElement | SVGElement, deform: boolean, cachable?: CachableKey[]);
|
|
19
20
|
push(action: Action): void;
|
|
20
21
|
next(): void;
|
|
@@ -24,6 +25,6 @@ export default class Track {
|
|
|
24
25
|
transition(previous: Track | undefined, options: TransitionOptions): void;
|
|
25
26
|
apply(prop: string, val: any): void;
|
|
26
27
|
decomposeScale(): [number, number];
|
|
27
|
-
computeBorderRadius(
|
|
28
|
+
computeBorderRadius(): void;
|
|
28
29
|
correct(): void;
|
|
29
30
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { AnimatableKeyframe } from "./clip";
|
|
3
|
+
import type Track from "./track";
|
|
3
4
|
type SharedKeys<T, P> = keyof Omit<T | P, keyof (Omit<T, keyof P> & Omit<P, keyof T>)>;
|
|
4
5
|
type MergedMaps<T, P> = T & P & {
|
|
5
6
|
[K in SharedKeys<T, P>]: MergedPair<T[K], P[K]>;
|
|
@@ -34,4 +35,5 @@ export declare function distributeAnimatableKeyframes(prop: string, keyframes: A
|
|
|
34
35
|
[key: number]: Keyframe;
|
|
35
36
|
};
|
|
36
37
|
export declare function normalizeAnimatableKeyframes(keyframes: (AnimatableKeyframe | undefined)[]): boolean;
|
|
38
|
+
export declare function createDynamic(prop: string, keyframes: Keyframe[], easing: string): (this: Track, t: number) => string;
|
|
37
39
|
export {};
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { AnimatableProps } from "../animatable";
|
|
2
2
|
import { TransitionOptions } from "../core/track";
|
|
3
|
-
|
|
3
|
+
declare function Morph({ children, group, transition, ...props }: {
|
|
4
4
|
group: string;
|
|
5
5
|
transition?: Omit<TransitionOptions, 'reverse'>;
|
|
6
|
-
|
|
7
|
-
} & AnimatableProps;
|
|
8
|
-
declare function Morph({ children, transition, // should be able to be inherited
|
|
9
|
-
show, group, ...props }: MorphProps): import("react/jsx-runtime").JSX.Element | null;
|
|
6
|
+
} & AnimatableProps): import("react/jsx-runtime").JSX.Element;
|
|
10
7
|
declare namespace Morph {
|
|
11
8
|
var isLively: boolean;
|
|
12
9
|
}
|
package/package.json
CHANGED
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infinityfx/lively",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.6",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Feature complete, lightweight react animation library.",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/index.js",
|
|
8
8
|
"types": "dist/types/index.d.ts",
|
|
9
9
|
"exports": {
|
|
10
|
-
".":
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/types/index.d.ts",
|
|
12
|
+
"default": "./dist/index.js"
|
|
13
|
+
},
|
|
14
|
+
"./hooks": {
|
|
15
|
+
"types": "./dist/types/hooks.d.ts",
|
|
16
|
+
"default": "./dist/hooks.js"
|
|
17
|
+
},
|
|
18
|
+
"./layout": {
|
|
19
|
+
"types": "./dist/types/layout.d.ts",
|
|
20
|
+
"default": "./dist/layout.js"
|
|
21
|
+
}
|
|
13
22
|
},
|
|
14
23
|
"typesVersions": {
|
|
15
24
|
"*": {
|
|
@@ -64,4 +73,4 @@
|
|
|
64
73
|
"typescript": "^5.4.5"
|
|
65
74
|
},
|
|
66
75
|
"sideEffects": false
|
|
67
|
-
}
|
|
76
|
+
}
|