flip-animation 1.0.0

package/README.md

@@ -0,0 +1,147 @@
+# FLIP Animation Library
+
+A lightweight JavaScript library for creating smooth FLIP animations with ease.
+
+## What is FLIP Animation?
+
+FLIP is an acronym for First, Last, Invert, Play:
+- **First**: Record the initial state of the element
+- **Last**: Record the final state of the element
+- **Invert**: Calculate the difference and apply an inverse transform
+- **Play**: Animate from the inverted state to the final state
+
+This technique allows for smooth animations even when elements change position, size, or other properties.
+
+## Installation
+
+### Direct Download
+
+Download the `FLIPAnimation.js` file from the repository and include it in your project:
+
+```html
+<script src="FLIPAnimation.js"></script>
+```
+
+### Using ES Modules
+
+For modern JavaScript projects, you can import the library as an ES module:
+
+```javascript
+import { FLIPAnimation, easingFunctions } from './FLIPAnimation.js';
+```
+
+## API Reference
+
+### FLIPAnimation Class
+
+#### Constructor
+
+```javascript
+const flipAnimation = new FLIPAnimation(element, options);
+```
+
+- **element**: The DOM element to animate
+- **options**: Configuration options (optional)
+
+#### Options
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| duration | number | 300 | Animation duration in milliseconds |
+| easing | string or function | 'ease-out' | Easing function or CSS easing string |
+| properties | array | ['transform', 'opacity'] | CSS properties to animate |
+| fill | string | 'forwards' | Animation fill mode |
+
+#### Methods
+
+- **start()**: Records the initial state of the element
+- **end()**: Calculates the animation and returns the Animation object
+
+### Easing Functions
+
+The library includes a variety of built-in easing functions:
+
+- linear
+- easeInQuad, easeOutQuad, easeInOutQuad
+- easeInCubic, easeOutCubic, easeInOutCubic
+- easeInQuart, easeOutQuart, easeInOutQuart
+- easeInQuint, easeOutQuint, easeInOutQuint
+- easeInSine, easeOutSine, easeInOutSine
+- easeInExpo, easeOutExpo, easeInOutExpo
+- easeInCirc, easeOutCirc, easeInOutCirc
+- easeInElastic, easeOutElastic, easeInOutElastic
+- easeInBack, easeOutBack, easeInOutBack
+- easeInBounce, easeOutBounce, easeInOutBounce
+
+## Usage Examples
+
+### Basic Example
+
+```javascript
+const element = document.getElementById('myElement');
+
+// Create FLIP animation instance
+const flipAnimation = new FLIPAnimation(element, {
+  duration: 500,
+  easing: 'ease-out',
+  properties: ['transform', 'opacity']
+});
+
+// Record initial state
+flipAnimation.start();
+
+// Change the element's state
+element.classList.toggle('active');
+
+// Execute the animation
+const animation = flipAnimation.end();
+
+// Listen for animation events
+animation.addEventListener('finish', () => {
+  console.log('Animation finished!');
+});
+```
+
+## Live Examples
+
+### 1. Basic Size and Position Change
+
+[View Example](example.html)
+
+Demonstrates a simple box that changes size and position with FLIP animation.
+
+### 2. List Sorting Animation
+
+[View Example](example-list.html)
+
+Shows how to animate list items when sorting them.
+
+### 3. Card Flip Animation
+
+[View Example](example-card.html)
+
+Demonstrates a 3D card flip effect using FLIP animation.
+
+## Browser Support
+
+- Chrome
+- Firefox
+- Safari
+- Edge
+
+The library uses the Web Animations API, which is supported in all modern browsers. For older browsers, you may need to include a polyfill.
+
+## Performance Tips
+
+- Use `transform` and `opacity` for best performance, as they don't trigger layout
+- Avoid animating properties that cause layout shifts (e.g., width, height, margin)
+- For complex animations, consider using `requestAnimationFrame` for better control
+- When animating multiple elements, use `Promise.all` to wait for all animations to complete
+
+## License
+
+MIT License
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/FLIPAnimation.d.ts

@@ -0,0 +1,50 @@
+type EasingFunction = (t: number) => number;
+export declare const easingFunctions: {
+    linear: (t: number) => number;
+    easeInQuad: (t: number) => number;
+    easeOutQuad: (t: number) => number;
+    easeInOutQuad: (t: number) => number;
+    easeInCubic: (t: number) => number;
+    easeOutCubic: (t: number) => number;
+    easeInOutCubic: (t: number) => number;
+    easeInQuart: (t: number) => number;
+    easeOutQuart: (t: number) => number;
+    easeInOutQuart: (t: number) => number;
+    easeInQuint: (t: number) => number;
+    easeOutQuint: (t: number) => number;
+    easeInOutQuint: (t: number) => number;
+    easeInSine: (t: number) => number;
+    easeOutSine: (t: number) => number;
+    easeInOutSine: (t: number) => number;
+    easeInExpo: (t: number) => number;
+    easeOutExpo: (t: number) => number;
+    easeInOutExpo: (t: number) => number;
+    easeInCirc: (t: number) => number;
+    easeOutCirc: (t: number) => number;
+    easeInOutCirc: (t: number) => number;
+    easeInElastic: (t: number) => number;
+    easeOutElastic: (t: number) => number;
+    easeInOutElastic: (t: number) => number;
+    easeInBack: (t: number) => number;
+    easeOutBack: (t: number) => number;
+    easeInOutBack: (t: number) => number;
+    easeInBounce: (t: number) => number;
+    easeOutBounce: (t: number) => number;
+    easeInOutBounce: (t: number) => number;
+};
+export interface FLIPAnimationOptions {
+    duration?: number;
+    easing?: string | EasingFunction;
+    properties?: string[];
+    fill?: FillMode;
+}
+type FillMode = 'none' | 'forwards' | 'backwards' | 'both' | 'auto';
+declare class FLIPAnimation {
+    private element;
+    private options;
+    private initialState;
+    constructor(element: HTMLElement, options?: FLIPAnimationOptions);
+    start(): void;
+    end(): Animation;
+}
+export default FLIPAnimation;

package/dist/flip-animation.es.js

@@ -0,0 +1,194 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+const easingFunctions = {
+  // 线性
+  linear: (t) => t,
+  // 二次方
+  easeInQuad: (t) => t * t,
+  easeOutQuad: (t) => t * (2 - t),
+  easeInOutQuad: (t) => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
+  // 三次方
+  easeInCubic: (t) => t * t * t,
+  easeOutCubic: (t) => --t * t * t + 1,
+  easeInOutCubic: (t) => t < 0.5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,
+  // 四次方
+  easeInQuart: (t) => t * t * t * t,
+  easeOutQuart: (t) => 1 - --t * t * t * t,
+  easeInOutQuart: (t) => t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t,
+  // 五次方
+  easeInQuint: (t) => t * t * t * t * t,
+  easeOutQuint: (t) => 1 + --t * t * t * t * t,
+  easeInOutQuint: (t) => t < 0.5 ? 16 * t * t * t * t * t : 1 + 16 * --t * t * t * t * t,
+  // 正弦
+  easeInSine: (t) => 1 - Math.cos(t * Math.PI / 2),
+  easeOutSine: (t) => Math.sin(t * Math.PI / 2),
+  easeInOutSine: (t) => -(Math.cos(Math.PI * t) - 1) / 2,
+  // 指数
+  easeInExpo: (t) => t === 0 ? 0 : Math.pow(2, 10 * (t - 1)),
+  easeOutExpo: (t) => t === 1 ? 1 : 1 - Math.pow(2, -10 * t),
+  easeInOutExpo: (t) => {
+    if (t === 0)
+      return 0;
+    if (t === 1)
+      return 1;
+    if (t < 0.5)
+      return Math.pow(2, 20 * t - 10) / 2;
+    return (2 - Math.pow(2, -20 * t + 10)) / 2;
+  },
+  // 圆形
+  easeInCirc: (t) => 1 - Math.sqrt(1 - t * t),
+  easeOutCirc: (t) => Math.sqrt(1 - (t - 1) * (t - 1)),
+  easeInOutCirc: (t) => {
+    if (t < 0.5)
+      return (1 - Math.sqrt(1 - 4 * t * t)) / 2;
+    return (Math.sqrt(1 - (-2 * t + 2) * (-2 * t + 2)) + 1) / 2;
+  },
+  // 弹性
+  easeInElastic: (t) => {
+    const c4 = 2 * Math.PI / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : -Math.pow(2, 10 * t - 10) * Math.sin((t * 10 - 10.75) * c4);
+  },
+  easeOutElastic: (t) => {
+    const c4 = 2 * Math.PI / 3;
+    return t === 0 ? 0 : t === 1 ? 1 : Math.pow(2, -10 * t) * Math.sin((t * 10 - 0.75) * c4) + 1;
+  },
+  easeInOutElastic: (t) => {
+    const c5 = 2 * Math.PI / 4.5;
+    if (t === 0)
+      return 0;
+    if (t === 1)
+      return 1;
+    if (t < 0.5)
+      return -(Math.pow(2, 20 * t - 10) * Math.sin((20 * t - 11.125) * c5)) / 2;
+    return Math.pow(2, -20 * t + 10) * Math.sin((20 * t - 11.125) * c5) / 2 + 1;
+  },
+  // 回退
+  easeInBack: (t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return c3 * t * t * t - c1 * t * t;
+  },
+  easeOutBack: (t) => {
+    const c1 = 1.70158;
+    const c3 = c1 + 1;
+    return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2);
+  },
+  easeInOutBack: (t) => {
+    const c1 = 1.70158;
+    const c2 = c1 * 1.525;
+    if (t < 0.5)
+      return Math.pow(2 * t, 2) * ((c2 + 1) * 2 * t - c2) / 2;
+    return (Math.pow(2 * t - 2, 2) * ((c2 + 1) * (t * 2 - 2) + c2) + 2) / 2;
+  },
+  // 弹跳
+  easeInBounce: (t) => 1 - easingFunctions.easeOutBounce(1 - t),
+  easeOutBounce: (t) => {
+    const n1 = 7.5625;
+    const d1 = 2.75;
+    if (t < 1 / d1) {
+      return n1 * t * t;
+    } else if (t < 2 / d1) {
+      return n1 * (t -= 1.5 / d1) * t + 0.75;
+    } else if (t < 2.5 / d1) {
+      return n1 * (t -= 2.25 / d1) * t + 0.9375;
+    } else {
+      return n1 * (t -= 2.625 / d1) * t + 0.984375;
+    }
+  },
+  easeInOutBounce: (t) => {
+    if (t < 0.5)
+      return (1 - easingFunctions.easeOutBounce(1 - 2 * t)) / 2;
+    return (1 + easingFunctions.easeOutBounce(2 * t - 1)) / 2;
+  }
+};
+class FLIPAnimation {
+  constructor(element, options = {}) {
+    __publicField(this, "element");
+    __publicField(this, "options");
+    __publicField(this, "initialState");
+    this.element = element;
+    this.options = {
+      duration: 300,
+      easing: "ease-out",
+      properties: ["transform", "opacity"],
+      fill: "forwards",
+      ...options
+    };
+    this.initialState = null;
+  }
+  start() {
+    this.initialState = {
+      rect: this.element.getBoundingClientRect(),
+      styles: {}
+    };
+    const computed = window.getComputedStyle(this.element);
+    this.options.properties.forEach((prop) => {
+      this.initialState.styles[prop] = computed[prop];
+    });
+  }
+  end() {
+    if (!this.initialState) {
+      throw new Error("FLIPAnimation: start() must be called before end()");
+    }
+    const finalRect = this.element.getBoundingClientRect();
+    const finalStyles = {};
+    const computed = window.getComputedStyle(this.element);
+    this.options.properties.forEach((prop) => {
+      finalStyles[prop] = computed[prop];
+    });
+    const invertedStyles = {};
+    const needsTransform = this.options.properties.includes("transform");
+    if (needsTransform) {
+      const deltaX = this.initialState.rect.left - finalRect.left;
+      const deltaY = this.initialState.rect.top - finalRect.top;
+      const deltaWidth = this.initialState.rect.width / finalRect.width;
+      const deltaHeight = this.initialState.rect.height / finalRect.height;
+      const invertTransform = `translate(${deltaX}px, ${deltaY}px) scale(${deltaWidth}, ${deltaHeight})`;
+      invertedStyles.transform = invertTransform;
+    }
+    this.options.properties.forEach((prop) => {
+      if (prop !== "transform") {
+        invertedStyles[prop] = this.initialState.styles[prop];
+      }
+    });
+    Object.assign(this.element.style, invertedStyles);
+    this.element.offsetWidth;
+    const keyframes = [
+      { ...invertedStyles },
+      {
+        ...needsTransform ? { transform: "none" } : {},
+        ...finalStyles
+      }
+    ];
+    const animation = this.element.animate(keyframes, {
+      duration: this.options.duration,
+      easing: this.options.easing,
+      fill: this.options.fill
+    });
+    return animation;
+  }
+}
+(function(root, factory) {
+  if (typeof root.define === "function" && root.define.amd) {
+    root.define([], factory);
+  } else if (typeof root.module === "object" && root.module.exports) {
+    const moduleExports = factory();
+    root.module.exports = moduleExports;
+    root.module.exports.default = moduleExports.FLIPAnimation;
+  } else if (root) {
+    root.FLIPAnimation = factory().FLIPAnimation;
+  }
+})(typeof self !== "undefined" ? self : void 0, function() {
+  return {
+    FLIPAnimation,
+    easingFunctions
+  };
+});
+export {
+  FLIPAnimation,
+  easingFunctions
+};

package/dist/flip-animation.js

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty,e=(e,n,i)=>(((e,n,i)=>{n in e?t(e,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):e[n]=i})(e,"symbol"!=typeof n?n+"":n,i),i);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n={linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>t*(2-t),easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,easeInCubic:t=>t*t*t,easeOutCubic:t=>--t*t*t+1,easeInOutCubic:t=>t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1,easeInQuart:t=>t*t*t*t,easeOutQuart:t=>1- --t*t*t*t,easeInOutQuart:t=>t<.5?8*t*t*t*t:1-8*--t*t*t*t,easeInQuint:t=>t*t*t*t*t,easeOutQuint:t=>1+--t*t*t*t*t,easeInOutQuint:t=>t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t,easeInSine:t=>1-Math.cos(t*Math.PI/2),easeOutSine:t=>Math.sin(t*Math.PI/2),easeInOutSine:t=>-(Math.cos(Math.PI*t)-1)/2,easeInExpo:t=>0===t?0:Math.pow(2,10*(t-1)),easeOutExpo:t=>1===t?1:1-Math.pow(2,-10*t),easeInOutExpo:t=>0===t?0:1===t?1:t<.5?Math.pow(2,20*t-10)/2:(2-Math.pow(2,-20*t+10))/2,easeInCirc:t=>1-Math.sqrt(1-t*t),easeOutCirc:t=>Math.sqrt(1-(t-1)*(t-1)),easeInOutCirc:t=>t<.5?(1-Math.sqrt(1-4*t*t))/2:(Math.sqrt(1-(-2*t+2)*(-2*t+2))+1)/2,easeInElastic:t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:-Math.pow(2,10*t-10)*Math.sin((10*t-10.75)*e)},easeOutElastic:t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:Math.pow(2,-10*t)*Math.sin((10*t-.75)*e)+1},easeInOutElastic:t=>{const e=2*Math.PI/4.5;return 0===t?0:1===t?1:t<.5?-Math.pow(2,20*t-10)*Math.sin((20*t-11.125)*e)/2:Math.pow(2,-20*t+10)*Math.sin((20*t-11.125)*e)/2+1},easeInBack:t=>{const e=1.70158;return 2.70158*t*t*t-e*t*t},easeOutBack:t=>{const e=1.70158;return 1+2.70158*Math.pow(t-1,3)+e*Math.pow(t-1,2)},easeInOutBack:t=>{const e=2.5949095;return t<.5?Math.pow(2*t,2)*(7.189819*t-e)/2:(Math.pow(2*t-2,2)*((e+1)*(2*t-2)+e)+2)/2},easeInBounce:t=>1-n.easeOutBounce(1-t),easeOutBounce:t=>{const e=7.5625,n=2.75;return t<1/n?e*t*t:t<2/n?e*(t-=1.5/n)*t+.75:t<2.5/n?e*(t-=2.25/n)*t+.9375:e*(t-=2.625/n)*t+.984375},easeInOutBounce:t=>t<.5?(1-n.easeOutBounce(1-2*t))/2:(1+n.easeOutBounce(2*t-1))/2};class i{constructor(t,n={}){e(this,"element"),e(this,"options"),e(this,"initialState"),this.element=t,this.options={duration:300,easing:"ease-out",properties:["transform","opacity"],fill:"forwards",...n},this.initialState=null}start(){this.initialState={rect:this.element.getBoundingClientRect(),styles:{}};const t=window.getComputedStyle(this.element);this.options.properties.forEach(e=>{this.initialState.styles[e]=t[e]})}end(){if(!this.initialState)throw new Error("FLIPAnimation: start() must be called before end()");const t=this.element.getBoundingClientRect(),e={},n=window.getComputedStyle(this.element);this.options.properties.forEach(t=>{e[t]=n[t]});const i={},s=this.options.properties.includes("transform");if(s){const e=`translate(${this.initialState.rect.left-t.left}px, ${this.initialState.rect.top-t.top}px) scale(${this.initialState.rect.width/t.width}, ${this.initialState.rect.height/t.height})`;i.transform=e}this.options.properties.forEach(t=>{"transform"!==t&&(i[t]=this.initialState.styles[t])}),Object.assign(this.element.style,i),this.element.offsetWidth;const a=[{...i},{...s?{transform:"none"}:{},...e}];return this.element.animate(a,{duration:this.options.duration,easing:this.options.easing,fill:this.options.fill})}}!function(t,e){if("function"==typeof t.define&&t.define.amd)t.define([],e);else if("object"==typeof t.module&&t.module.exports){const n=e();t.module.exports=n,t.module.exports.default=n.FLIPAnimation}else t&&(t.FLIPAnimation=e().FLIPAnimation)}("undefined"!=typeof self?self:void 0,function(){return{FLIPAnimation:i,easingFunctions:n}}),exports.FLIPAnimation=i,exports.easingFunctions=n;

package/dist/flip-animation.umd.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).FLIPAnimation={})}(this,function(t){"use strict";var e=Object.defineProperty,n=(t,n,i)=>(((t,n,i)=>{n in t?e(t,n,{enumerable:!0,configurable:!0,writable:!0,value:i}):t[n]=i})(t,"symbol"!=typeof n?n+"":n,i),i);const i={linear:t=>t,easeInQuad:t=>t*t,easeOutQuad:t=>t*(2-t),easeInOutQuad:t=>t<.5?2*t*t:(4-2*t)*t-1,easeInCubic:t=>t*t*t,easeOutCubic:t=>--t*t*t+1,easeInOutCubic:t=>t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1,easeInQuart:t=>t*t*t*t,easeOutQuart:t=>1- --t*t*t*t,easeInOutQuart:t=>t<.5?8*t*t*t*t:1-8*--t*t*t*t,easeInQuint:t=>t*t*t*t*t,easeOutQuint:t=>1+--t*t*t*t*t,easeInOutQuint:t=>t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t,easeInSine:t=>1-Math.cos(t*Math.PI/2),easeOutSine:t=>Math.sin(t*Math.PI/2),easeInOutSine:t=>-(Math.cos(Math.PI*t)-1)/2,easeInExpo:t=>0===t?0:Math.pow(2,10*(t-1)),easeOutExpo:t=>1===t?1:1-Math.pow(2,-10*t),easeInOutExpo:t=>0===t?0:1===t?1:t<.5?Math.pow(2,20*t-10)/2:(2-Math.pow(2,-20*t+10))/2,easeInCirc:t=>1-Math.sqrt(1-t*t),easeOutCirc:t=>Math.sqrt(1-(t-1)*(t-1)),easeInOutCirc:t=>t<.5?(1-Math.sqrt(1-4*t*t))/2:(Math.sqrt(1-(-2*t+2)*(-2*t+2))+1)/2,easeInElastic:t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:-Math.pow(2,10*t-10)*Math.sin((10*t-10.75)*e)},easeOutElastic:t=>{const e=2*Math.PI/3;return 0===t?0:1===t?1:Math.pow(2,-10*t)*Math.sin((10*t-.75)*e)+1},easeInOutElastic:t=>{const e=2*Math.PI/4.5;return 0===t?0:1===t?1:t<.5?-Math.pow(2,20*t-10)*Math.sin((20*t-11.125)*e)/2:Math.pow(2,-20*t+10)*Math.sin((20*t-11.125)*e)/2+1},easeInBack:t=>{const e=1.70158;return 2.70158*t*t*t-e*t*t},easeOutBack:t=>{const e=1.70158;return 1+2.70158*Math.pow(t-1,3)+e*Math.pow(t-1,2)},easeInOutBack:t=>{const e=2.5949095;return t<.5?Math.pow(2*t,2)*(7.189819*t-e)/2:(Math.pow(2*t-2,2)*((e+1)*(2*t-2)+e)+2)/2},easeInBounce:t=>1-i.easeOutBounce(1-t),easeOutBounce:t=>{const e=7.5625,n=2.75;return t<1/n?e*t*t:t<2/n?e*(t-=1.5/n)*t+.75:t<2.5/n?e*(t-=2.25/n)*t+.9375:e*(t-=2.625/n)*t+.984375},easeInOutBounce:t=>t<.5?(1-i.easeOutBounce(1-2*t))/2:(1+i.easeOutBounce(2*t-1))/2};class s{constructor(t,e={}){n(this,"element"),n(this,"options"),n(this,"initialState"),this.element=t,this.options={duration:300,easing:"ease-out",properties:["transform","opacity"],fill:"forwards",...e},this.initialState=null}start(){this.initialState={rect:this.element.getBoundingClientRect(),styles:{}};const t=window.getComputedStyle(this.element);this.options.properties.forEach(e=>{this.initialState.styles[e]=t[e]})}end(){if(!this.initialState)throw new Error("FLIPAnimation: start() must be called before end()");const t=this.element.getBoundingClientRect(),e={},n=window.getComputedStyle(this.element);this.options.properties.forEach(t=>{e[t]=n[t]});const i={},s=this.options.properties.includes("transform");if(s){const e=`translate(${this.initialState.rect.left-t.left}px, ${this.initialState.rect.top-t.top}px) scale(${this.initialState.rect.width/t.width}, ${this.initialState.rect.height/t.height})`;i.transform=e}this.options.properties.forEach(t=>{"transform"!==t&&(i[t]=this.initialState.styles[t])}),Object.assign(this.element.style,i),this.element.offsetWidth;const a=[{...i},{...s?{transform:"none"}:{},...e}];return this.element.animate(a,{duration:this.options.duration,easing:this.options.easing,fill:this.options.fill})}}!function(t,e){if("function"==typeof t.define&&t.define.amd)t.define([],e);else if("object"==typeof t.module&&t.module.exports){const n=e();t.module.exports=n,t.module.exports.default=n.FLIPAnimation}else t&&(t.FLIPAnimation=e().FLIPAnimation)}("undefined"!=typeof self?self:void 0,function(){return{FLIPAnimation:s,easingFunctions:i}}),t.FLIPAnimation=s,t.easingFunctions=i,Object.defineProperty(t,Symbol.toStringTag,{value:"Module"})});

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FLIPAnimation, easingFunctions } from './FLIPAnimation';
+export type { FLIPAnimationOptions } from './FLIPAnimation';

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "flip-animation",
+  "version": "1.0.0",
+  "description": "A lightweight FLIP animation library for smooth transitions",
+  "type": "module",
+  "main": "./dist/flip-animation.js",
+  "module": "./dist/flip-animation.es.js",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "test": "vitest"
+  },
+  "keywords": [
+    "animation",
+    "flip",
+    "transition",
+    "javascript",
+    "typescript"
+  ],
+  "author": "",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": ""
+  },
+  "homepage": "",
+  "dependencies": {},
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^6.0.0",
+    "@typescript-eslint/parser": "^6.0.0",
+    "eslint": "^8.45.0",
+    "jsdom": "^28.1.0",
+    "terser": "^5.46.0",
+    "typescript": "^5.0.2",
+    "vite": "^4.4.5",
+    "vitest": "^4.1.0"
+  }
+}