@framesquared/fx 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +4 -16
- package/dist/index.js.map +1 -1
- package/package.json +7 -2
package/dist/index.js
CHANGED
|
@@ -133,10 +133,7 @@ var Anim = {
|
|
|
133
133
|
const color = opts.color ?? "yellow";
|
|
134
134
|
return new Animation({
|
|
135
135
|
target: el,
|
|
136
|
-
keyframes: [
|
|
137
|
-
{ backgroundColor: color },
|
|
138
|
-
{ backgroundColor: "transparent" }
|
|
139
|
-
],
|
|
136
|
+
keyframes: [{ backgroundColor: color }, { backgroundColor: "transparent" }],
|
|
140
137
|
duration: opts.duration ?? 1e3,
|
|
141
138
|
easing: opts.easing ?? "ease-in-out",
|
|
142
139
|
fill: opts.fill ?? "both"
|
|
@@ -150,10 +147,7 @@ var Anim = {
|
|
|
150
147
|
const to = opts.to ?? 1.5;
|
|
151
148
|
return new Animation({
|
|
152
149
|
target: el,
|
|
153
|
-
keyframes: [
|
|
154
|
-
{ transform: `scale(${from})` },
|
|
155
|
-
{ transform: `scale(${to})` }
|
|
156
|
-
],
|
|
150
|
+
keyframes: [{ transform: `scale(${from})` }, { transform: `scale(${to})` }],
|
|
157
151
|
duration: opts.duration ?? 300,
|
|
158
152
|
easing: opts.easing ?? "ease",
|
|
159
153
|
fill: opts.fill ?? "both"
|
|
@@ -166,10 +160,7 @@ var Anim = {
|
|
|
166
160
|
const degrees = opts.degrees ?? 360;
|
|
167
161
|
return new Animation({
|
|
168
162
|
target: el,
|
|
169
|
-
keyframes: [
|
|
170
|
-
{ transform: "rotate(0deg)" },
|
|
171
|
-
{ transform: `rotate(${degrees}deg)` }
|
|
172
|
-
],
|
|
163
|
+
keyframes: [{ transform: "rotate(0deg)" }, { transform: `rotate(${degrees}deg)` }],
|
|
173
164
|
duration: opts.duration ?? 500,
|
|
174
165
|
easing: opts.easing ?? "ease",
|
|
175
166
|
fill: opts.fill ?? "both"
|
|
@@ -215,10 +206,7 @@ var Anim = {
|
|
|
215
206
|
flip(el, opts = {}) {
|
|
216
207
|
return new Animation({
|
|
217
208
|
target: el,
|
|
218
|
-
keyframes: [
|
|
219
|
-
{ transform: "rotateY(0deg)" },
|
|
220
|
-
{ transform: "rotateY(180deg)" }
|
|
221
|
-
],
|
|
209
|
+
keyframes: [{ transform: "rotateY(0deg)" }, { transform: "rotateY(180deg)" }],
|
|
222
210
|
duration: opts.duration ?? 600,
|
|
223
211
|
easing: opts.easing ?? "ease-in-out",
|
|
224
212
|
fill: opts.fill ?? "both"
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/Animation.ts","../src/Anim.ts","../src/Easing.ts","../src/Transition.ts"],"sourcesContent":["/**\n * @framesquared/fx – Animation\n *\n * Wraps the Web Animations API (Element.animate()). Provides a\n * config-driven interface with play/pause/cancel/finish/reverse\n * controls and a finished promise.\n */\n\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport interface AnimationConfig {\n target: Element;\n keyframes: Keyframe[];\n duration?: number;\n easing?: string;\n delay?: number;\n iterations?: number;\n direction?: PlaybackDirection;\n fill?: FillMode;\n}\n\nexport class Animation {\n private target: Element;\n private keyframes: Keyframe[];\n private options: KeyframeAnimationOptions;\n private waAnimation: globalThis.Animation | null = null;\n\n /** Resolves when the animation completes. */\n finished: Promise<void>;\n private _resolveFinished!: () => void;\n\n constructor(config: AnimationConfig) {\n this.target = config.target;\n this.keyframes = config.keyframes;\n this.options = {\n duration: config.duration ?? 300,\n easing: config.easing ?? 'ease',\n delay: config.delay ?? 0,\n iterations: config.iterations ?? 1,\n direction: config.direction ?? 'normal',\n fill: config.fill ?? 'none',\n };\n this.finished = new Promise<void>((resolve) => {\n this._resolveFinished = resolve;\n });\n }\n\n play(): this {\n this.waAnimation = this.target.animate(this.keyframes, this.options);\n // Wire the finished promise\n this.waAnimation.finished\n .then(() => this._resolveFinished())\n .catch(() => { /* cancelled */ });\n return this;\n }\n\n pause(): this {\n this.waAnimation?.pause();\n return this;\n }\n\n cancel(): this {\n this.waAnimation?.cancel();\n return this;\n }\n\n finish(): this {\n this.waAnimation?.finish();\n return this;\n }\n\n reverse(): this {\n this.waAnimation?.reverse();\n return this;\n }\n\n getPlayState(): string {\n return this.waAnimation?.playState ?? 'idle';\n }\n\n get currentTime(): number | null {\n return this.waAnimation?.currentTime as number | null ?? null;\n }\n\n get playbackRate(): number {\n return this.waAnimation?.playbackRate ?? 1;\n }\n\n set playbackRate(rate: number) {\n if (this.waAnimation) this.waAnimation.playbackRate = rate;\n }\n\n /** Get the underlying WAAPI Animation object. */\n getNative(): globalThis.Animation | null {\n return this.waAnimation;\n }\n}\n","/**\n * @framesquared/fx – Anim\n *\n * Convenience factory for predefined animations. Each method\n * returns an Animation instance. Also provides queue() for\n * sequential and parallel() for simultaneous execution.\n */\n\nimport { Animation } from './Animation.js';\n\nexport interface AnimOptions {\n duration?: number;\n easing?: string;\n delay?: number;\n fill?: FillMode;\n}\n\ninterface SlideOptions extends AnimOptions {}\ninterface HighlightOptions extends AnimOptions { color?: string; }\ninterface ScaleOptions extends AnimOptions { from?: number; to?: number; }\ninterface RotateOptions extends AnimOptions { degrees?: number; }\n\nexport const Anim = {\n // -----------------------------------------------------------------------\n // Fade\n // -----------------------------------------------------------------------\n\n fadeIn(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [{ opacity: '0' }, { opacity: '1' }],\n duration: opts.duration ?? 300,\n easing: opts.easing ?? 'ease',\n delay: opts.delay ?? 0,\n fill: opts.fill ?? 'both',\n });\n },\n\n fadeOut(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [{ opacity: '1' }, { opacity: '0' }],\n duration: opts.duration ?? 300,\n easing: opts.easing ?? 'ease',\n delay: opts.delay ?? 0,\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Slide\n // -----------------------------------------------------------------------\n\n slideIn(el: Element, direction: 'left' | 'right' | 'top' | 'bottom' = 'left', opts: SlideOptions = {}): Animation {\n const transforms: Record<string, string> = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n top: 'translateY(-100%)',\n bottom: 'translateY(100%)',\n };\n return new Animation({\n target: el,\n keyframes: [\n { transform: transforms[direction], opacity: '0' },\n { transform: 'translateX(0) translateY(0)', opacity: '1' },\n ],\n duration: opts.duration ?? 400,\n easing: opts.easing ?? 'ease-out',\n fill: opts.fill ?? 'both',\n });\n },\n\n slideOut(el: Element, direction: 'left' | 'right' | 'top' | 'bottom' = 'right', opts: SlideOptions = {}): Animation {\n const transforms: Record<string, string> = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n top: 'translateY(-100%)',\n bottom: 'translateY(100%)',\n };\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'translateX(0) translateY(0)', opacity: '1' },\n { transform: transforms[direction], opacity: '0' },\n ],\n duration: opts.duration ?? 400,\n easing: opts.easing ?? 'ease-in',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Highlight\n // -----------------------------------------------------------------------\n\n highlight(el: Element, opts: HighlightOptions = {}): Animation {\n const color = opts.color ?? 'yellow';\n return new Animation({\n target: el,\n keyframes: [\n { backgroundColor: color },\n { backgroundColor: 'transparent' },\n ],\n duration: opts.duration ?? 1000,\n easing: opts.easing ?? 'ease-in-out',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Scale\n // -----------------------------------------------------------------------\n\n scale(el: Element, opts: ScaleOptions = {}): Animation {\n const from = opts.from ?? 1;\n const to = opts.to ?? 1.5;\n return new Animation({\n target: el,\n keyframes: [\n { transform: `scale(${from})` },\n { transform: `scale(${to})` },\n ],\n duration: opts.duration ?? 300,\n easing: opts.easing ?? 'ease',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Rotate\n // -----------------------------------------------------------------------\n\n rotate(el: Element, opts: RotateOptions = {}): Animation {\n const degrees = opts.degrees ?? 360;\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'rotate(0deg)' },\n { transform: `rotate(${degrees}deg)` },\n ],\n duration: opts.duration ?? 500,\n easing: opts.easing ?? 'ease',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Shake\n // -----------------------------------------------------------------------\n\n shake(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'translateX(0)' },\n { transform: 'translateX(-10px)' },\n { transform: 'translateX(10px)' },\n { transform: 'translateX(-6px)' },\n { transform: 'translateX(6px)' },\n { transform: 'translateX(-2px)' },\n { transform: 'translateX(0)' },\n ],\n duration: opts.duration ?? 500,\n easing: opts.easing ?? 'ease-in-out',\n });\n },\n\n // -----------------------------------------------------------------------\n // Pulse\n // -----------------------------------------------------------------------\n\n pulse(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'scale(1)' },\n { transform: 'scale(1.1)' },\n { transform: 'scale(1)' },\n ],\n duration: opts.duration ?? 600,\n easing: opts.easing ?? 'ease-in-out',\n });\n },\n\n // -----------------------------------------------------------------------\n // Flip\n // -----------------------------------------------------------------------\n\n flip(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'rotateY(0deg)' },\n { transform: 'rotateY(180deg)' },\n ],\n duration: opts.duration ?? 600,\n easing: opts.easing ?? 'ease-in-out',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Queue — run animations sequentially\n // -----------------------------------------------------------------------\n\n async queue(animations: Animation[]): Promise<void> {\n for (const anim of animations) {\n anim.play();\n await anim.finished;\n }\n },\n\n // -----------------------------------------------------------------------\n // Parallel — run animations simultaneously\n // -----------------------------------------------------------------------\n\n async parallel(animations: Animation[]): Promise<void> {\n for (const anim of animations) {\n anim.play();\n }\n await Promise.all(animations.map(a => a.finished));\n },\n};\n","/**\n * @framesquared/fx – Easing\n *\n * Named CSS easing strings. Standard names map to CSS keywords;\n * extended names map to cubic-bezier() values. Bounce easings\n * use linear() approximation since cubic-bezier can't represent them.\n */\n\nexport const Easing = {\n // CSS keywords\n linear: 'linear',\n ease: 'ease',\n easeIn: 'ease-in',\n easeOut: 'ease-out',\n easeInOut: 'ease-in-out',\n\n // Quadratic\n easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',\n easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',\n\n // Cubic\n easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n\n // Back (overshoot)\n easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n\n // Bounce (approximated — true bounce can't be expressed as cubic-bezier)\n easeInBounce: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',\n easeOutBounce: 'cubic-bezier(0.015, 0.66, 0.39, 0.995)',\n easeInOutBounce: 'cubic-bezier(0.83, 0.04, 0.17, 1)',\n} as const;\n\nexport type EasingName = keyof typeof Easing;\n","/**\n * @framesquared/fx – Transition\n *\n * CSS transition management: set/clear transitions on elements,\n * and register transitionend callbacks with cleanup.\n */\n\nexport const Transition = {\n /**\n * Set a CSS transition on an element.\n * @param el Target element\n * @param property CSS property name(s), comma-separated\n * @param duration Duration in ms\n * @param easing CSS easing string\n */\n set(el: HTMLElement, property: string, duration: number, easing = 'ease'): void {\n const props = property.split(',').map(p => p.trim());\n el.style.transition = props\n .map(p => `${p} ${duration}ms ${easing}`)\n .join(', ');\n },\n\n /** Remove all transitions from an element. */\n clear(el: HTMLElement): void {\n el.style.transition = '';\n },\n\n /**\n * Register a callback for transitionend. Returns a cleanup\n * function that removes the listener.\n */\n onEnd(el: HTMLElement, callback: (e: Event) => void): () => void {\n el.addEventListener('transitionend', callback);\n return () => el.removeEventListener('transitionend', callback);\n },\n};\n"],"mappings":";AAqBO,IAAM,YAAN,MAAgB;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAA2C;AAAA;AAAA,EAGnD;AAAA,EACQ;AAAA,EAER,YAAY,QAAyB;AACnC,SAAK,SAAS,OAAO;AACrB,SAAK,YAAY,OAAO;AACxB,SAAK,UAAU;AAAA,MACb,UAAU,OAAO,YAAY;AAAA,MAC7B,QAAQ,OAAO,UAAU;AAAA,MACzB,OAAO,OAAO,SAAS;AAAA,MACvB,YAAY,OAAO,cAAc;AAAA,MACjC,WAAW,OAAO,aAAa;AAAA,MAC/B,MAAM,OAAO,QAAQ;AAAA,IACvB;AACA,SAAK,WAAW,IAAI,QAAc,CAAC,YAAY;AAC7C,WAAK,mBAAmB;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAEA,OAAa;AACX,SAAK,cAAc,KAAK,OAAO,QAAQ,KAAK,WAAW,KAAK,OAAO;AAEnE,SAAK,YAAY,SACd,KAAK,MAAM,KAAK,iBAAiB,CAAC,EAClC,MAAM,MAAM;AAAA,IAAkB,CAAC;AAClC,WAAO;AAAA,EACT;AAAA,EAEA,QAAc;AACZ,SAAK,aAAa,MAAM;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,SAAe;AACb,SAAK,aAAa,OAAO;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,SAAe;AACb,SAAK,aAAa,OAAO;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,UAAgB;AACd,SAAK,aAAa,QAAQ;AAC1B,WAAO;AAAA,EACT;AAAA,EAEA,eAAuB;AACrB,WAAO,KAAK,aAAa,aAAa;AAAA,EACxC;AAAA,EAEA,IAAI,cAA6B;AAC/B,WAAO,KAAK,aAAa,eAAgC;AAAA,EAC3D;AAAA,EAEA,IAAI,eAAuB;AACzB,WAAO,KAAK,aAAa,gBAAgB;AAAA,EAC3C;AAAA,EAEA,IAAI,aAAa,MAAc;AAC7B,QAAI,KAAK,YAAa,MAAK,YAAY,eAAe;AAAA,EACxD;AAAA;AAAA,EAGA,YAAyC;AACvC,WAAO,KAAK;AAAA,EACd;AACF;;;AC1EO,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA,EAKlB,OAAO,IAAa,OAAoB,CAAC,GAAc;AACrD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,SAAS,IAAI,GAAG,EAAE,SAAS,IAAI,CAAC;AAAA,MAC9C,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,OAAO,KAAK,SAAS;AAAA,MACrB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,QAAQ,IAAa,OAAoB,CAAC,GAAc;AACtD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,SAAS,IAAI,GAAG,EAAE,SAAS,IAAI,CAAC;AAAA,MAC9C,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,OAAO,KAAK,SAAS;AAAA,MACrB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,QAAQ,IAAa,YAAiD,QAAQ,OAAqB,CAAC,GAAc;AAChH,UAAM,aAAqC;AAAA,MACzC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,WAAW,SAAS,GAAG,SAAS,IAAI;AAAA,QACjD,EAAE,WAAW,+BAA+B,SAAS,IAAI;AAAA,MAC3D;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,SAAS,IAAa,YAAiD,SAAS,OAAqB,CAAC,GAAc;AAClH,UAAM,aAAqC;AAAA,MACzC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,+BAA+B,SAAS,IAAI;AAAA,QACzD,EAAE,WAAW,WAAW,SAAS,GAAG,SAAS,IAAI;AAAA,MACnD;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,IAAa,OAAyB,CAAC,GAAc;AAC7D,UAAM,QAAQ,KAAK,SAAS;AAC5B,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,iBAAiB,MAAM;AAAA,QACzB,EAAE,iBAAiB,cAAc;AAAA,MACnC;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAqB,CAAC,GAAc;AACrD,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,KAAK,KAAK,MAAM;AACtB,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,SAAS,IAAI,IAAI;AAAA,QAC9B,EAAE,WAAW,SAAS,EAAE,IAAI;AAAA,MAC9B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,IAAa,OAAsB,CAAC,GAAc;AACvD,UAAM,UAAU,KAAK,WAAW;AAChC,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,eAAe;AAAA,QAC5B,EAAE,WAAW,UAAU,OAAO,OAAO;AAAA,MACvC;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAoB,CAAC,GAAc;AACpD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,gBAAgB;AAAA,QAC7B,EAAE,WAAW,oBAAoB;AAAA,QACjC,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,kBAAkB;AAAA,QAC/B,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,gBAAgB;AAAA,MAC/B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAoB,CAAC,GAAc;AACpD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,WAAW;AAAA,QACxB,EAAE,WAAW,aAAa;AAAA,QAC1B,EAAE,WAAW,WAAW;AAAA,MAC1B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,KAAK,IAAa,OAAoB,CAAC,GAAc;AACnD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,gBAAgB;AAAA,QAC7B,EAAE,WAAW,kBAAkB;AAAA,MACjC;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,MAAM,YAAwC;AAClD,eAAW,QAAQ,YAAY;AAC7B,WAAK,KAAK;AACV,YAAM,KAAK;AAAA,IACb;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,SAAS,YAAwC;AACrD,eAAW,QAAQ,YAAY;AAC7B,WAAK,KAAK;AAAA,IACZ;AACA,UAAM,QAAQ,IAAI,WAAW,IAAI,OAAK,EAAE,QAAQ,CAAC;AAAA,EACnD;AACF;;;ACtNO,IAAM,SAAS;AAAA;AAAA,EAEpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA;AAAA,EAGX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA;AAAA,EAGf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA;AAAA,EAGhB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA;AAAA,EAGf,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AACnB;;;AC5BO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxB,IAAI,IAAiB,UAAkB,UAAkB,SAAS,QAAc;AAC9E,UAAM,QAAQ,SAAS,MAAM,GAAG,EAAE,IAAI,OAAK,EAAE,KAAK,CAAC;AACnD,OAAG,MAAM,aAAa,MACnB,IAAI,OAAK,GAAG,CAAC,IAAI,QAAQ,MAAM,MAAM,EAAE,EACvC,KAAK,IAAI;AAAA,EACd;AAAA;AAAA,EAGA,MAAM,IAAuB;AAC3B,OAAG,MAAM,aAAa;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAiB,UAA0C;AAC/D,OAAG,iBAAiB,iBAAiB,QAAQ;AAC7C,WAAO,MAAM,GAAG,oBAAoB,iBAAiB,QAAQ;AAAA,EAC/D;AACF;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../src/Animation.ts","../src/Anim.ts","../src/Easing.ts","../src/Transition.ts"],"sourcesContent":["/**\n * @framesquared/fx – Animation\n *\n * Wraps the Web Animations API (Element.animate()). Provides a\n * config-driven interface with play/pause/cancel/finish/reverse\n * controls and a finished promise.\n */\n\nexport interface AnimationConfig {\n target: Element;\n keyframes: Keyframe[];\n duration?: number;\n easing?: string;\n delay?: number;\n iterations?: number;\n direction?: PlaybackDirection;\n fill?: FillMode;\n}\n\nexport class Animation {\n private target: Element;\n private keyframes: Keyframe[];\n private options: KeyframeAnimationOptions;\n private waAnimation: globalThis.Animation | null = null;\n\n /** Resolves when the animation completes. */\n finished: Promise<void>;\n private _resolveFinished!: () => void;\n\n constructor(config: AnimationConfig) {\n this.target = config.target;\n this.keyframes = config.keyframes;\n this.options = {\n duration: config.duration ?? 300,\n easing: config.easing ?? 'ease',\n delay: config.delay ?? 0,\n iterations: config.iterations ?? 1,\n direction: config.direction ?? 'normal',\n fill: config.fill ?? 'none',\n };\n this.finished = new Promise<void>((resolve) => {\n this._resolveFinished = resolve;\n });\n }\n\n play(): this {\n this.waAnimation = this.target.animate(this.keyframes, this.options);\n // Wire the finished promise\n this.waAnimation.finished\n .then(() => this._resolveFinished())\n .catch(() => {\n /* cancelled */\n });\n return this;\n }\n\n pause(): this {\n this.waAnimation?.pause();\n return this;\n }\n\n cancel(): this {\n this.waAnimation?.cancel();\n return this;\n }\n\n finish(): this {\n this.waAnimation?.finish();\n return this;\n }\n\n reverse(): this {\n this.waAnimation?.reverse();\n return this;\n }\n\n getPlayState(): string {\n return this.waAnimation?.playState ?? 'idle';\n }\n\n get currentTime(): number | null {\n return (this.waAnimation?.currentTime as number | null) ?? null;\n }\n\n get playbackRate(): number {\n return this.waAnimation?.playbackRate ?? 1;\n }\n\n set playbackRate(rate: number) {\n if (this.waAnimation) this.waAnimation.playbackRate = rate;\n }\n\n /** Get the underlying WAAPI Animation object. */\n getNative(): globalThis.Animation | null {\n return this.waAnimation;\n }\n}\n","/**\n * @framesquared/fx – Anim\n *\n * Convenience factory for predefined animations. Each method\n * returns an Animation instance. Also provides queue() for\n * sequential and parallel() for simultaneous execution.\n */\n\nimport { Animation } from './Animation.js';\n\nexport interface AnimOptions {\n duration?: number;\n easing?: string;\n delay?: number;\n fill?: FillMode;\n}\n\n// eslint-disable-next-line @typescript-eslint/no-empty-object-type\ninterface SlideOptions extends AnimOptions {}\ninterface HighlightOptions extends AnimOptions {\n color?: string;\n}\ninterface ScaleOptions extends AnimOptions {\n from?: number;\n to?: number;\n}\ninterface RotateOptions extends AnimOptions {\n degrees?: number;\n}\n\nexport const Anim = {\n // -----------------------------------------------------------------------\n // Fade\n // -----------------------------------------------------------------------\n\n fadeIn(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [{ opacity: '0' }, { opacity: '1' }],\n duration: opts.duration ?? 300,\n easing: opts.easing ?? 'ease',\n delay: opts.delay ?? 0,\n fill: opts.fill ?? 'both',\n });\n },\n\n fadeOut(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [{ opacity: '1' }, { opacity: '0' }],\n duration: opts.duration ?? 300,\n easing: opts.easing ?? 'ease',\n delay: opts.delay ?? 0,\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Slide\n // -----------------------------------------------------------------------\n\n slideIn(\n el: Element,\n direction: 'left' | 'right' | 'top' | 'bottom' = 'left',\n opts: SlideOptions = {},\n ): Animation {\n const transforms: Record<string, string> = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n top: 'translateY(-100%)',\n bottom: 'translateY(100%)',\n };\n return new Animation({\n target: el,\n keyframes: [\n { transform: transforms[direction], opacity: '0' },\n { transform: 'translateX(0) translateY(0)', opacity: '1' },\n ],\n duration: opts.duration ?? 400,\n easing: opts.easing ?? 'ease-out',\n fill: opts.fill ?? 'both',\n });\n },\n\n slideOut(\n el: Element,\n direction: 'left' | 'right' | 'top' | 'bottom' = 'right',\n opts: SlideOptions = {},\n ): Animation {\n const transforms: Record<string, string> = {\n left: 'translateX(-100%)',\n right: 'translateX(100%)',\n top: 'translateY(-100%)',\n bottom: 'translateY(100%)',\n };\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'translateX(0) translateY(0)', opacity: '1' },\n { transform: transforms[direction], opacity: '0' },\n ],\n duration: opts.duration ?? 400,\n easing: opts.easing ?? 'ease-in',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Highlight\n // -----------------------------------------------------------------------\n\n highlight(el: Element, opts: HighlightOptions = {}): Animation {\n const color = opts.color ?? 'yellow';\n return new Animation({\n target: el,\n keyframes: [{ backgroundColor: color }, { backgroundColor: 'transparent' }],\n duration: opts.duration ?? 1000,\n easing: opts.easing ?? 'ease-in-out',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Scale\n // -----------------------------------------------------------------------\n\n scale(el: Element, opts: ScaleOptions = {}): Animation {\n const from = opts.from ?? 1;\n const to = opts.to ?? 1.5;\n return new Animation({\n target: el,\n keyframes: [{ transform: `scale(${from})` }, { transform: `scale(${to})` }],\n duration: opts.duration ?? 300,\n easing: opts.easing ?? 'ease',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Rotate\n // -----------------------------------------------------------------------\n\n rotate(el: Element, opts: RotateOptions = {}): Animation {\n const degrees = opts.degrees ?? 360;\n return new Animation({\n target: el,\n keyframes: [{ transform: 'rotate(0deg)' }, { transform: `rotate(${degrees}deg)` }],\n duration: opts.duration ?? 500,\n easing: opts.easing ?? 'ease',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Shake\n // -----------------------------------------------------------------------\n\n shake(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'translateX(0)' },\n { transform: 'translateX(-10px)' },\n { transform: 'translateX(10px)' },\n { transform: 'translateX(-6px)' },\n { transform: 'translateX(6px)' },\n { transform: 'translateX(-2px)' },\n { transform: 'translateX(0)' },\n ],\n duration: opts.duration ?? 500,\n easing: opts.easing ?? 'ease-in-out',\n });\n },\n\n // -----------------------------------------------------------------------\n // Pulse\n // -----------------------------------------------------------------------\n\n pulse(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [\n { transform: 'scale(1)' },\n { transform: 'scale(1.1)' },\n { transform: 'scale(1)' },\n ],\n duration: opts.duration ?? 600,\n easing: opts.easing ?? 'ease-in-out',\n });\n },\n\n // -----------------------------------------------------------------------\n // Flip\n // -----------------------------------------------------------------------\n\n flip(el: Element, opts: AnimOptions = {}): Animation {\n return new Animation({\n target: el,\n keyframes: [{ transform: 'rotateY(0deg)' }, { transform: 'rotateY(180deg)' }],\n duration: opts.duration ?? 600,\n easing: opts.easing ?? 'ease-in-out',\n fill: opts.fill ?? 'both',\n });\n },\n\n // -----------------------------------------------------------------------\n // Queue — run animations sequentially\n // -----------------------------------------------------------------------\n\n async queue(animations: Animation[]): Promise<void> {\n for (const anim of animations) {\n anim.play();\n await anim.finished;\n }\n },\n\n // -----------------------------------------------------------------------\n // Parallel — run animations simultaneously\n // -----------------------------------------------------------------------\n\n async parallel(animations: Animation[]): Promise<void> {\n for (const anim of animations) {\n anim.play();\n }\n await Promise.all(animations.map((a) => a.finished));\n },\n};\n","/**\n * @framesquared/fx – Easing\n *\n * Named CSS easing strings. Standard names map to CSS keywords;\n * extended names map to cubic-bezier() values. Bounce easings\n * use linear() approximation since cubic-bezier can't represent them.\n */\n\nexport const Easing = {\n // CSS keywords\n linear: 'linear',\n ease: 'ease',\n easeIn: 'ease-in',\n easeOut: 'ease-out',\n easeInOut: 'ease-in-out',\n\n // Quadratic\n easeInQuad: 'cubic-bezier(0.55, 0.085, 0.68, 0.53)',\n easeOutQuad: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',\n easeInOutQuad: 'cubic-bezier(0.455, 0.03, 0.515, 0.955)',\n\n // Cubic\n easeInCubic: 'cubic-bezier(0.55, 0.055, 0.675, 0.19)',\n easeOutCubic: 'cubic-bezier(0.215, 0.61, 0.355, 1)',\n easeInOutCubic: 'cubic-bezier(0.645, 0.045, 0.355, 1)',\n\n // Back (overshoot)\n easeInBack: 'cubic-bezier(0.6, -0.28, 0.735, 0.045)',\n easeOutBack: 'cubic-bezier(0.175, 0.885, 0.32, 1.275)',\n easeInOutBack: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',\n\n // Bounce (approximated — true bounce can't be expressed as cubic-bezier)\n easeInBounce: 'cubic-bezier(0.6, 0.04, 0.98, 0.335)',\n easeOutBounce: 'cubic-bezier(0.015, 0.66, 0.39, 0.995)',\n easeInOutBounce: 'cubic-bezier(0.83, 0.04, 0.17, 1)',\n} as const;\n\nexport type EasingName = keyof typeof Easing;\n","/**\n * @framesquared/fx – Transition\n *\n * CSS transition management: set/clear transitions on elements,\n * and register transitionend callbacks with cleanup.\n */\n\nexport const Transition = {\n /**\n * Set a CSS transition on an element.\n * @param el Target element\n * @param property CSS property name(s), comma-separated\n * @param duration Duration in ms\n * @param easing CSS easing string\n */\n set(el: HTMLElement, property: string, duration: number, easing = 'ease'): void {\n const props = property.split(',').map((p) => p.trim());\n el.style.transition = props.map((p) => `${p} ${duration}ms ${easing}`).join(', ');\n },\n\n /** Remove all transitions from an element. */\n clear(el: HTMLElement): void {\n el.style.transition = '';\n },\n\n /**\n * Register a callback for transitionend. Returns a cleanup\n * function that removes the listener.\n */\n onEnd(el: HTMLElement, callback: (e: Event) => void): () => void {\n el.addEventListener('transitionend', callback);\n return () => el.removeEventListener('transitionend', callback);\n },\n};\n"],"mappings":";AAmBO,IAAM,YAAN,MAAgB;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAA2C;AAAA;AAAA,EAGnD;AAAA,EACQ;AAAA,EAER,YAAY,QAAyB;AACnC,SAAK,SAAS,OAAO;AACrB,SAAK,YAAY,OAAO;AACxB,SAAK,UAAU;AAAA,MACb,UAAU,OAAO,YAAY;AAAA,MAC7B,QAAQ,OAAO,UAAU;AAAA,MACzB,OAAO,OAAO,SAAS;AAAA,MACvB,YAAY,OAAO,cAAc;AAAA,MACjC,WAAW,OAAO,aAAa;AAAA,MAC/B,MAAM,OAAO,QAAQ;AAAA,IACvB;AACA,SAAK,WAAW,IAAI,QAAc,CAAC,YAAY;AAC7C,WAAK,mBAAmB;AAAA,IAC1B,CAAC;AAAA,EACH;AAAA,EAEA,OAAa;AACX,SAAK,cAAc,KAAK,OAAO,QAAQ,KAAK,WAAW,KAAK,OAAO;AAEnE,SAAK,YAAY,SACd,KAAK,MAAM,KAAK,iBAAiB,CAAC,EAClC,MAAM,MAAM;AAAA,IAEb,CAAC;AACH,WAAO;AAAA,EACT;AAAA,EAEA,QAAc;AACZ,SAAK,aAAa,MAAM;AACxB,WAAO;AAAA,EACT;AAAA,EAEA,SAAe;AACb,SAAK,aAAa,OAAO;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,SAAe;AACb,SAAK,aAAa,OAAO;AACzB,WAAO;AAAA,EACT;AAAA,EAEA,UAAgB;AACd,SAAK,aAAa,QAAQ;AAC1B,WAAO;AAAA,EACT;AAAA,EAEA,eAAuB;AACrB,WAAO,KAAK,aAAa,aAAa;AAAA,EACxC;AAAA,EAEA,IAAI,cAA6B;AAC/B,WAAQ,KAAK,aAAa,eAAiC;AAAA,EAC7D;AAAA,EAEA,IAAI,eAAuB;AACzB,WAAO,KAAK,aAAa,gBAAgB;AAAA,EAC3C;AAAA,EAEA,IAAI,aAAa,MAAc;AAC7B,QAAI,KAAK,YAAa,MAAK,YAAY,eAAe;AAAA,EACxD;AAAA;AAAA,EAGA,YAAyC;AACvC,WAAO,KAAK;AAAA,EACd;AACF;;;AClEO,IAAM,OAAO;AAAA;AAAA;AAAA;AAAA,EAKlB,OAAO,IAAa,OAAoB,CAAC,GAAc;AACrD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,SAAS,IAAI,GAAG,EAAE,SAAS,IAAI,CAAC;AAAA,MAC9C,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,OAAO,KAAK,SAAS;AAAA,MACrB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,QAAQ,IAAa,OAAoB,CAAC,GAAc;AACtD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,SAAS,IAAI,GAAG,EAAE,SAAS,IAAI,CAAC;AAAA,MAC9C,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,OAAO,KAAK,SAAS;AAAA,MACrB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,QACE,IACA,YAAiD,QACjD,OAAqB,CAAC,GACX;AACX,UAAM,aAAqC;AAAA,MACzC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,WAAW,SAAS,GAAG,SAAS,IAAI;AAAA,QACjD,EAAE,WAAW,+BAA+B,SAAS,IAAI;AAAA,MAC3D;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA,EAEA,SACE,IACA,YAAiD,SACjD,OAAqB,CAAC,GACX;AACX,UAAM,aAAqC;AAAA,MACzC,MAAM;AAAA,MACN,OAAO;AAAA,MACP,KAAK;AAAA,MACL,QAAQ;AAAA,IACV;AACA,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,+BAA+B,SAAS,IAAI;AAAA,QACzD,EAAE,WAAW,WAAW,SAAS,GAAG,SAAS,IAAI;AAAA,MACnD;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,UAAU,IAAa,OAAyB,CAAC,GAAc;AAC7D,UAAM,QAAQ,KAAK,SAAS;AAC5B,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,iBAAiB,MAAM,GAAG,EAAE,iBAAiB,cAAc,CAAC;AAAA,MAC1E,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAqB,CAAC,GAAc;AACrD,UAAM,OAAO,KAAK,QAAQ;AAC1B,UAAM,KAAK,KAAK,MAAM;AACtB,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,WAAW,SAAS,IAAI,IAAI,GAAG,EAAE,WAAW,SAAS,EAAE,IAAI,CAAC;AAAA,MAC1E,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,OAAO,IAAa,OAAsB,CAAC,GAAc;AACvD,UAAM,UAAU,KAAK,WAAW;AAChC,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,WAAW,eAAe,GAAG,EAAE,WAAW,UAAU,OAAO,OAAO,CAAC;AAAA,MACjF,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAoB,CAAC,GAAc;AACpD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,gBAAgB;AAAA,QAC7B,EAAE,WAAW,oBAAoB;AAAA,QACjC,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,kBAAkB;AAAA,QAC/B,EAAE,WAAW,mBAAmB;AAAA,QAChC,EAAE,WAAW,gBAAgB;AAAA,MAC/B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAa,OAAoB,CAAC,GAAc;AACpD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW;AAAA,QACT,EAAE,WAAW,WAAW;AAAA,QACxB,EAAE,WAAW,aAAa;AAAA,QAC1B,EAAE,WAAW,WAAW;AAAA,MAC1B;AAAA,MACA,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,IACzB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,KAAK,IAAa,OAAoB,CAAC,GAAc;AACnD,WAAO,IAAI,UAAU;AAAA,MACnB,QAAQ;AAAA,MACR,WAAW,CAAC,EAAE,WAAW,gBAAgB,GAAG,EAAE,WAAW,kBAAkB,CAAC;AAAA,MAC5E,UAAU,KAAK,YAAY;AAAA,MAC3B,QAAQ,KAAK,UAAU;AAAA,MACvB,MAAM,KAAK,QAAQ;AAAA,IACrB,CAAC;AAAA,EACH;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,MAAM,YAAwC;AAClD,eAAW,QAAQ,YAAY;AAC7B,WAAK,KAAK;AACV,YAAM,KAAK;AAAA,IACb;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,SAAS,YAAwC;AACrD,eAAW,QAAQ,YAAY;AAC7B,WAAK,KAAK;AAAA,IACZ;AACA,UAAM,QAAQ,IAAI,WAAW,IAAI,CAAC,MAAM,EAAE,QAAQ,CAAC;AAAA,EACrD;AACF;;;AC1NO,IAAM,SAAS;AAAA;AAAA,EAEpB,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,WAAW;AAAA;AAAA,EAGX,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA;AAAA,EAGf,aAAa;AAAA,EACb,cAAc;AAAA,EACd,gBAAgB;AAAA;AAAA,EAGhB,YAAY;AAAA,EACZ,aAAa;AAAA,EACb,eAAe;AAAA;AAAA,EAGf,cAAc;AAAA,EACd,eAAe;AAAA,EACf,iBAAiB;AACnB;;;AC5BO,IAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAQxB,IAAI,IAAiB,UAAkB,UAAkB,SAAS,QAAc;AAC9E,UAAM,QAAQ,SAAS,MAAM,GAAG,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC;AACrD,OAAG,MAAM,aAAa,MAAM,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,QAAQ,MAAM,MAAM,EAAE,EAAE,KAAK,IAAI;AAAA,EAClF;AAAA;AAAA,EAGA,MAAM,IAAuB;AAC3B,OAAG,MAAM,aAAa;AAAA,EACxB;AAAA;AAAA;AAAA;AAAA;AAAA,EAMA,MAAM,IAAiB,UAA0C;AAC/D,OAAG,iBAAiB,iBAAiB,QAAQ;AAC7C,WAAO,MAAM,GAAG,oBAAoB,iBAAiB,QAAQ;AAAA,EAC/D;AACF;","names":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@framesquared/fx",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"description": "Animations and effects",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -15,7 +15,12 @@
|
|
|
15
15
|
"dist"
|
|
16
16
|
],
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@framesquared/core": "0.
|
|
18
|
+
"@framesquared/core": "0.2.0"
|
|
19
|
+
},
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"publishConfig": {
|
|
22
|
+
"access": "public",
|
|
23
|
+
"registry": "https://registry.npmjs.org"
|
|
19
24
|
},
|
|
20
25
|
"scripts": {
|
|
21
26
|
"build": "tsup",
|