@infinityfx/lively 4.0.0-beta.14 → 4.0.0-beta.16
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/dist/core/track.js +1 -1
- package/dist/core/track.js.map +1 -1
- package/dist/layout/layout-group.js +1 -1
- package/dist/types/animatable.d.ts +51 -0
- package/dist/types/animate.d.ts +8 -0
- package/dist/types/layout/layout-group.d.ts +10 -0
- package/dist/types/layout/morph.d.ts +8 -0
- package/dist/types/layout/typable.d.ts +5 -0
- package/package.json +3 -3
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.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),this.deform||(this.element.style.borderRadius="",this.correctedBorderRadius=this.cache.data.borderRadius=this.cache.computed.borderRadius,this.scale=[1,1])}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)
|
|
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),this.deform||(this.element.style.borderRadius="",this.correctedBorderRadius=this.cache.data.borderRadius=this.cache.computed.borderRadius,this.scale=[1,1])}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.paused&&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-5);/%$/.test(t)&&(s/=100);let i=e?Math.max(parseFloat(e)||1,1e-5):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,c=i.offsetTop,o=i.offsetWidth,h=i.offsetHeight,[r,n]=getComputedStyle(i).translate.split(" ").map(parseFloat);i.style.transform=`translate(${-r||0}px, ${-n||0}px) scale(${1/t}, ${1/e}) translate(${a*(1-t)+o/2*(1-t)+(r||0)}px, ${c*(1-e)+h/2*(1-e)+(n||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","paused","scale","correctedBorderRadius","cache","StyleCache","push","action","onfinish","next","bind","composite","animation","pause","update","length","splice","clear","partial","forEach","commit","cancel","finish","ex","style","borderRadius","data","computed","value","step","index","correct","transition","previous","options","clips","difference","clip","play","apply","prop","val","isStroke","lengthToOffset","decomposeScale","xString","yString","split","x","Math","max","parseFloat","test","y","computeBorderRadius","radii","previousScale","map","axis","i","radius","_a","match","join","children","child","l","offsetLeft","t","offsetTop","w","offsetWidth","h","offsetHeight","tx","ty","getComputedStyle","translate","transform"],"mappings":"oFAOc,MAAOA,EAYjB,WAAAC,CAAYC,EAAmCC,EAAiBC,GARhEC,KAAOC,QAAW,EAClBD,KAAME,OAAa,GACnBF,KAAKG,MAAa,GAElBH,KAAMI,QAAY,EAClBJ,KAAAK,MAA0B,CAAC,EAAG,GAC9BL,KAAqBM,sBAAW,GAG5BN,KAAKH,QAAUA,EACfG,KAAKF,OAASA,EACdE,KAAKO,MAAQ,IAAIC,EAAWX,EAASE,EACxC,CAED,IAAAU,CAAKC,GACDA,EAAOC,SAAWX,KAAKY,KAAKC,KAAKb,MAE7BA,KAAKC,SAAgC,SAArBS,EAAOI,WACvBd,KAAKG,MAAMM,KAAKC,GAChBA,EAAOK,UAAUC,UAEjBhB,KAAKE,OAAOO,KAAKC,GACQ,SAArBA,EAAOI,WAAsBd,KAAKC,UAClCD,KAAKI,QAAQM,EAAOK,UAAUC,QAEzC,CAED,IAAAJ,GACIZ,KAAKO,MAAMU,WAELjB,KAAKC,QAAU,IAErBD,KAAKE,OAASF,KAAKG,MAAMe,OAASlB,KAAKG,MAAMgB,OAAO,EAAG,GAAK,GAC5DnB,KAAKC,QAAUD,KAAKE,OAAOgB,OAC3BlB,KAAKgB,OAAM,GACd,CAED,KAAAI,CAAMC,GACFrB,KAAKE,OAAOoB,SAAQZ,IAChBA,EAAOC,SAAW,KAElB,IACSU,EAGIX,EAAOa,QAA+B,YAArBb,EAAOI,WACzBJ,EAAOK,UAAUS,SAHrBd,EAAOK,UAAUU,QAKxB,CAAC,MAAOC,GACLhB,EAAOK,UAAUS,QACpB,KAGAH,IACDrB,KAAKE,OAAS,GACdF,KAAKG,MAAQ,GACbH,KAAKC,QAAU,GAGdD,KAAKF,SACNE,KAAKH,QAAQ8B,MAAMC,aAAe,GAClC5B,KAAKM,sBAAwBN,KAAKO,MAAMsB,KAAKD,aAAe5B,KAAKO,MAAMuB,SAASF,aAChF5B,KAAKK,MAAQ,CAAC,EAAG,GAExB,CAED,KAAAW,CAAMe,GACF,IAAK,MAAMrB,KAAUV,KAAKE,OAAQQ,EAAOK,UAAUgB,EAAQ,QAAU,UAErE/B,KAAKI,OAAS2B,CACjB,CAED,IAAAC,CAAKC,GACD,IAAK,MAAMvB,KAAUV,KAAKE,OAAQQ,EAAOsB,KAAKC,
|
|
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","style","borderRadius","data","computed","value","step","index","correct","transition","previous","options","clips","difference","clip","play","apply","prop","val","isStroke","lengthToOffset","decomposeScale","xString","yString","split","x","Math","max","parseFloat","test","y","computeBorderRadius","radii","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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"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{jsx as e}from"react/jsx-runtime";import{useRef as
|
|
2
|
+
import{jsx as e}from"react/jsx-runtime";import{useRef as r,useState as n,useLayoutEffect as t,Children as o,isValidElement as i,cloneElement as c}from"react";import u from"../animatable.js";import{Groups as s}from"./morph.js";function d(e,r,n=[]){const t="nodes"in e?e.nodes:e;for(let e=0;e<t.length;e++){const o=[...n,e];let i=r(t[e],o);if(i||(i=d(t[e].nodes,r,o)),i)return i}}function l(e,r){return d(e,((e,n)=>{if(e.key===r)return n}))||null}function a(e,r){let n=e[r[0]];for(let e=1;e<r.length&&n;e++)n=n.nodes[r[e]];return n}function m(e,r,n,t){var o;const i=r[r.length-1],c=r.length>1?null===(o=a(e,r.slice(0,-1)))||void 0===o?void 0:o.nodes:e;c&&(t?c.splice(i,n,t):c.splice(i,n))}function f({tree:e,nodes:r,mounting:n,partialIndex:t=[],keys:u=new Set}){return o.forEach(r,((r,o)=>{const s=i(r),d=s&&(Array.isArray(r.props.children)||i(r.props.children)),m=s&&r.type.isLively&&"id"in r.props,p=[...t,o],h=d&&!m?c(r,void 0,[]):r,g=m?r.props.id:"$l."+p.join("");if(m){const r=l(e,g);if(null===r)n.set(g,{node:h,index:p});else{const n=a(e,r);n&&(n.node=h)}}else{const r=a(e,p);r&&r.key.startsWith("$l.")?r.node=h:n.set(g,{node:h,index:p})}d&&f({tree:e,nodes:r.props.children,mounting:n,partialIndex:p,keys:u}),u.add(g)})),u}function p(e){const r=e.map((e=>i(e.node)?e.nodes.length?c(e.node,{key:e.key},p(e.nodes)):c(e.node,{key:e.key}):e.node));return r.length>1?r:r[0]}function h({children:o,transition:i,initialMount:c=!0}){var a;const h=r(!c),g=r(null),[y,v]=n({}),k=r([]),x=r(new Map),w=r(void 0),j=r(0),E=r(new Set),z=f({tree:k.current,nodes:o,mounting:x.current});if(x.current.forEach(((e,r)=>{z.has(r)||x.current.delete(r)})),d(k.current,(e=>{z.has(e.key)||E.current.add(e.key)})),E.current.size&&g.current){for(const e of g.current.children){const r=null===(a=e.current)||void 0===a?void 0:a.id,n=E.current.has(r);if(e.current)if(n&&z.has(r))E.current.delete(r),e.current.trigger("mount",{immediate:!0}),e.current.timeline.mounted=!0;else if(n&&e.current.timeline.mounted){const r=Date.now()+1e3*e.current.trigger("unmount",{immediate:!0});if(j.current=Math.max(j.current,r),e.current.group){const r=s[e.current.group].get(e.current.timeline);r&&(r.state="unmounted")}e.current.timeline.mounted=!1}}const e=j.current-Date.now();clearTimeout(w.current);const r=(e=!0)=>{E.current.forEach((e=>{const r=l(k.current,e);r&&m(k.current,r,1)})),E.current.clear(),e&&v({})};e>0?w.current=setTimeout(r,e):r(!1)}return!E.current.size&&x.current.size&&(x.current.forEach((({node:e,index:r},n)=>{m(k.current,r,0,{key:n,node:e,nodes:[]})})),x.current.clear()),t((()=>{var e;if(!g.current)return;let r,n=g.current.children.slice();for(;r=n.pop();)h.current&&r.current&&(r.current.timeline.mounted=!0),(null===(e=r.current)||void 0===e?void 0:e.id)&&r.current.timeline.mounted&&r.current.adaptive&&null!==l(k.current,r.current.id)&&(r.current.timeline.transition(void 0,i),n.push(...r.current.children));h.current=!1})),e(u,{ref:g,passthrough:!0,cachable:[],children:p(k.current)})}export{h as default};
|
|
3
3
|
//# sourceMappingURL=layout-group.js.map
|
|
@@ -24,8 +24,23 @@ type SharedProps<T extends string = any> = {
|
|
|
24
24
|
} & PlayOptions)[];
|
|
25
25
|
animate?: ClipProperties | Clip;
|
|
26
26
|
initial?: AnimatableInitials;
|
|
27
|
+
/**
|
|
28
|
+
* How much to stagger child elements' animations by in seconds.
|
|
29
|
+
*
|
|
30
|
+
* @default 0.1
|
|
31
|
+
*/
|
|
27
32
|
stagger?: number;
|
|
33
|
+
/**
|
|
34
|
+
* Integer number, after which child elements no longer stagger their animation, but play all at once.
|
|
35
|
+
*
|
|
36
|
+
* @default 10
|
|
37
|
+
*/
|
|
28
38
|
staggerLimit?: number;
|
|
39
|
+
/**
|
|
40
|
+
* Whether scale animations will cause artifacting to `border-radius` and/or child elements.
|
|
41
|
+
*
|
|
42
|
+
* @default true
|
|
43
|
+
*/
|
|
29
44
|
deform?: boolean;
|
|
30
45
|
disabled?: boolean;
|
|
31
46
|
paused?: boolean;
|
|
@@ -33,12 +48,43 @@ type SharedProps<T extends string = any> = {
|
|
|
33
48
|
export type AnimatableProps<T extends string = any> = {
|
|
34
49
|
ref?: React.Ref<AnimatableType>;
|
|
35
50
|
children: React.ReactNode;
|
|
51
|
+
/**
|
|
52
|
+
* A unique identifier within a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group) parent.
|
|
53
|
+
*/
|
|
36
54
|
id?: string;
|
|
55
|
+
/**
|
|
56
|
+
* Where in the order of a cascade animation this component should play it's animations.
|
|
57
|
+
*/
|
|
37
58
|
order?: number;
|
|
59
|
+
/**
|
|
60
|
+
* Whether to participate in cascade animations and inherit animation properties from a parent.
|
|
61
|
+
*
|
|
62
|
+
* @default false
|
|
63
|
+
*/
|
|
38
64
|
inherit?: boolean;
|
|
65
|
+
/**
|
|
66
|
+
* Whether to **not** participate in cascading animations.
|
|
67
|
+
*
|
|
68
|
+
* @default false
|
|
69
|
+
*/
|
|
39
70
|
passthrough?: boolean;
|
|
71
|
+
/**
|
|
72
|
+
* Whether to animate layout changes when this component is a child of a [`LayoutGroup`](https://lively.infinityfx.dev/docs/components/layout-group).
|
|
73
|
+
*
|
|
74
|
+
* @default false
|
|
75
|
+
*/
|
|
40
76
|
adaptive?: boolean;
|
|
77
|
+
/**
|
|
78
|
+
* Which properties to keep track of for layout change animations.
|
|
79
|
+
*
|
|
80
|
+
* @default ['x', 'y', 'sx', 'sy', 'rotate', 'color', 'backgroundColor', 'borderRadius', 'opacity']
|
|
81
|
+
*/
|
|
41
82
|
cachable?: CachableKey[];
|
|
83
|
+
/**
|
|
84
|
+
* Whether to disable automatic mount/unmount triggering.
|
|
85
|
+
*
|
|
86
|
+
* @default false
|
|
87
|
+
*/
|
|
42
88
|
manual?: boolean;
|
|
43
89
|
onAnimationEnd?: (animation: T | 'animate') => void;
|
|
44
90
|
} & SharedProps<T>;
|
|
@@ -48,6 +94,11 @@ type AnimatableContext = {
|
|
|
48
94
|
remove: (child: React.RefObject<AnimatableType | null>) => void;
|
|
49
95
|
} & SharedProps;
|
|
50
96
|
export declare const AnimatableContext: import("react").Context<AnimatableContext | null>;
|
|
97
|
+
/**
|
|
98
|
+
* Wrap around a react component to animate it.
|
|
99
|
+
*
|
|
100
|
+
* @see {@link https://lively.infinityfx.dev/docs/components/animatable}
|
|
101
|
+
*/
|
|
51
102
|
declare function Animatable<T extends string>(props: AnimatableProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
52
103
|
declare namespace Animatable {
|
|
53
104
|
var isLively: boolean;
|
package/dist/types/animate.d.ts
CHANGED
|
@@ -2,8 +2,16 @@ import { AnimatableProps } from "./animatable";
|
|
|
2
2
|
import Clip, { ClipProperties } from "./core/clip";
|
|
3
3
|
type AnimateProps = {
|
|
4
4
|
animations?: (ClipProperties | Clip)[];
|
|
5
|
+
/**
|
|
6
|
+
* The number of levels to cascade down animations.
|
|
7
|
+
*/
|
|
5
8
|
levels?: number;
|
|
6
9
|
} & Omit<AnimatableProps, 'animations' | 'animate' | 'order'>;
|
|
10
|
+
/**
|
|
11
|
+
* Automated cascade animations.
|
|
12
|
+
*
|
|
13
|
+
* @see {@link https://lively.infinityfx.dev/docs/components/animate}
|
|
14
|
+
*/
|
|
7
15
|
declare function Animate({ children, animations, levels, ...props }: AnimateProps): import("react/jsx-runtime").JSX.Element;
|
|
8
16
|
declare namespace Animate {
|
|
9
17
|
var isLively: boolean;
|
|
@@ -1,6 +1,16 @@
|
|
|
1
1
|
import type { TransitionOptions } from "../core/track";
|
|
2
|
+
/**
|
|
3
|
+
* Animate layout changes or unmounts.
|
|
4
|
+
*
|
|
5
|
+
* @see {@link https://lively.infinityfx.dev/docs/components/layout-group}
|
|
6
|
+
*/
|
|
2
7
|
export default function LayoutGroup({ children, transition, initialMount }: {
|
|
3
8
|
children: React.ReactNode;
|
|
4
9
|
transition?: Omit<TransitionOptions, 'reverse'>;
|
|
10
|
+
/**
|
|
11
|
+
* Whether to play mount mount animations on first render
|
|
12
|
+
*
|
|
13
|
+
* @default true
|
|
14
|
+
*/
|
|
5
15
|
initialMount?: boolean;
|
|
6
16
|
}): import("react/jsx-runtime").JSX.Element;
|
|
@@ -6,7 +6,15 @@ export declare const Groups: {
|
|
|
6
6
|
state: 'mounted' | 'unmounted' | 'collected';
|
|
7
7
|
}>;
|
|
8
8
|
};
|
|
9
|
+
/**
|
|
10
|
+
* Peform layout morphs between components when one mounts and unmount.
|
|
11
|
+
*
|
|
12
|
+
* @see {@link https://lively.infinityfx.dev/docs/components/morph}
|
|
13
|
+
*/
|
|
9
14
|
declare function Morph({ children, group, transition, ...props }: {
|
|
15
|
+
/**
|
|
16
|
+
* Global identifier, components with the same group will morph between eachother.
|
|
17
|
+
*/
|
|
10
18
|
group: string;
|
|
11
19
|
transition?: Omit<TransitionOptions, 'reverse'>;
|
|
12
20
|
} & AnimatableProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,4 +1,9 @@
|
|
|
1
1
|
import { AnimatableProps } from "../animatable";
|
|
2
|
+
/**
|
|
3
|
+
* Wrap around text to animate it.
|
|
4
|
+
*
|
|
5
|
+
* @see {@link https://lively.infinityfx.dev/docs/components/typable}
|
|
6
|
+
*/
|
|
2
7
|
declare function Typable({ children, stagger, staggerLimit, ...props }: AnimatableProps): import("react/jsx-runtime").JSX.Element;
|
|
3
8
|
declare namespace Typable {
|
|
4
9
|
var isLively: boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infinityfx/lively",
|
|
3
|
-
"version": "4.0.0-beta.
|
|
3
|
+
"version": "4.0.0-beta.16",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "Feature complete, lightweight react animation library.",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -65,8 +65,8 @@
|
|
|
65
65
|
"@rollup/plugin-typescript": "^11.1.6",
|
|
66
66
|
"@types/react": "npm:types-react@^19.0.0-rc.1",
|
|
67
67
|
"@types/react-dom": "npm:types-react-dom@^19.0.0-rc.1",
|
|
68
|
-
"react": "^19.0.0-rc-
|
|
69
|
-
"react-dom": "^19.0.0-rc-
|
|
68
|
+
"react": "^19.0.0-rc-1631855f-20241023",
|
|
69
|
+
"react-dom": "^19.0.0-rc-1631855f-20241023",
|
|
70
70
|
"rollup": "^4.18.0",
|
|
71
71
|
"rollup-plugin-delete": "^2.0.0",
|
|
72
72
|
"rollup-plugin-preserve-directives": "^0.4.0",
|