taggedjs-animate-css 0.0.13 → 0.0.15

package/bundle.js

@@ -1,6 +1,6 @@
-var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.d(e,{_z:()=>c,mi:()=>l,qG:()=>r,Ce:()=>u,Xn:()=>d,MV:()=>f});var n={};function o({fxIn:t,fxOut:e,staggerBy:n=300,outPositionAbsolute:o=!0}){return{in:e=>i({fxName:t,staggerBy:n,...e}),out:t=>a({fxName:e,staggerBy:n,outPositionAbsolute:o,...t})}}t.r(n),t.d(n,{_z:()=>c,mi:()=>l,qG:()=>r,Ce:()=>u,Xn:()=>d,MV:()=>f});const i=async({target:t,stagger:e,staggerBy:n,fxName:o="fadeInDown"})=>{t.style.opacity="0",e&&await s(e*n),t.style.opacity="1",t.classList.add("animate__animated","animate__"+o)},a=async({target:t,stagger:e,outPositionAbsolute:n=!0,fxName:o="fadeOutUp",staggerBy:i})=>(n&&function(t){t.style.zIndex=t.style.zIndex||1;const e=t.offsetTop+"px",n=t.offsetLeft+"px",o=t.clientWidth+(t.offsetWidth-t.clientWidth)+1+"px",i=t.clientHeight+(t.offsetHeight-t.clientHeight)+1+"px";setTimeout((()=>{t.style.top=e,t.style.left=n,t.style.width=o,t.style.height=i,t.style.position="absolute"}),0)}(t),e&&await s(e*i),new Promise((function(e){t.classList.add("animate__animated","animate__"+o),t.addEventListener("animationend",(function n(i){i.target===t&&(t.classList.remove("animate__animated","animate__"+o),t.removeEventListener("animationend",n),e(void 0))}))})));function s(t){return new Promise((e=>{setTimeout(e,t)}))}const{in:u,out:f}=o({fxIn:"fadeInDown",fxOut:"fadeOutUp"}),{in:r,out:d}=o({fxIn:"fadeIn",fxOut:"fadeOut"});function l({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!1}={duration:".2s",outPositionAbsolute:!1}){if(!t||!e){const n=o({fxIn:"fadeInDown",fxOut:"fadeOutUp",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
+var t={d:(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.d(e,{_z:()=>O,mi:()=>I,qG:()=>c,Ce:()=>d,tE:()=>f,Xn:()=>x,rf:()=>r,MV:()=>l,fx:()=>p,WT:()=>m});var n={};function o({fxIn:t,fxOut:e,outPositionAbsolute:n=!0}){return{in:(e,n)=>i({fxName:t,...e},n),out:(t,o)=>a({fxName:e,outPositionAbsolute:n,...t},o)}}t.r(n),t.d(n,{_z:()=>O,mi:()=>I,qG:()=>c,Ce:()=>d,tE:()=>f,Xn:()=>x,rf:()=>r,MV:()=>l,fx:()=>p,WT:()=>m});const i=async({target:t,fxName:e="fadeInUp"},n)=>(t.style.opacity="0",n&&await u(n),t.style.opacity="1",s(e,t)),a=async({target:t,outPositionAbsolute:e=!0,fxName:n="fadeOutUp"},o)=>(e&&function(t){t.style.zIndex=t.style.zIndex||1;const e=t.offsetTop+"px",n=t.offsetLeft+"px",o=t.clientWidth+(t.offsetWidth-t.clientWidth)+1+"px",i=t.clientHeight+(t.offsetHeight-t.clientHeight)+1+"px";setTimeout((()=>{t.style.top=e,t.style.left=n,t.style.width=o,t.style.height=i,t.style.position="absolute"}),0)}(t),o&&await u(o),s(n,t));function s(t,e){let n;const o=new Promise((function(t){n=t}));return e.classList.add("animate__animated","animate__"+t),e.addEventListener("animationend",(function o(i){i.target===e&&(e.classList.remove("animate__animated","animate__"+t),e.removeEventListener("animationend",o),n(void 0))})),o}function u(t){return new Promise((e=>{setTimeout(e,t)}))}const{in:f,out:r}=o({fxIn:"fadeInUp",fxOut:"fadeOutDown"}),{in:d,out:l}=o({fxIn:"fadeInDown",fxOut:"fadeOutUp"}),{in:c,out:x}=o({fxIn:"fadeIn",fxOut:"fadeOut"}),m=({stagger:t=100,fxIn:e,fxOut:o,duration:i="2s",inName:a="fadeInUp",outName:s="fadeOutDown",outPositionAbsolute:u=!1}={})=>{let f=0;const r=y((function(e){e.style.setProperty("--animate-duration",i);const n=t*f++;return r.fxIn({target:e},n).then((()=>{--f}))}),(function(e){e.style.setProperty("--animate-duration",i);const o=t*f++,a=r.fxOut({target:e},o).then((()=>{--f}));return(0,n.addPaintRemoveAwait)(a),a}),e,o,a,s,u);return r.host},p=({fxIn:t,fxOut:e,stagger:o,inName:i="fadeInUp",outName:a="fadeOutDown",duration:s=".2s",outPositionAbsolute:u=!1}={})=>{const f=y((t=>(t.style.setProperty("--animate-duration",s),f.fxIn({target:t},o))),(t=>{t.style.setProperty("--animate-duration",s);const e=f.fxOut({target:t},o);return(0,n.addPaintRemoveAwait)(e),e}),t,e,i,a,u);return f.host};function y(t,e,i,a,s,u,f){if(!i||!a){const t=o({fxIn:s,fxOut:u,outPositionAbsolute:f});i||(i=t.in),a||(a=t.out)}return{fxIn:i,fxOut:a,host:(0,n.host)((()=>{}),{onInit:t,onDestroy:e})}}function I({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!1}={duration:".2s",outPositionAbsolute:!1}){if(!t||!e){const n=o({fxIn:"fadeInUp",fxOut:"fadeOutDown",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
     <div oninit=${t} ondestroy=${e} style.--animate-duration=${i}>${s}</div>
-  `.acceptInnerHTML(s)}function c({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!0}={duration:".2s",outPositionAbsolute:!0}){if(!t||!e){const n=o({fxIn:"fadeInDown",fxOut:"fadeOutUp",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
+  `.acceptInnerHTML(s)}function O({fxIn:t,fxOut:e,duration:i=".2s",outPositionAbsolute:a=!0}={duration:".2s",outPositionAbsolute:!0}){if(!t||!e){const n=o({fxIn:"fadeInUp",fxOut:"fadeOutDown",outPositionAbsolute:a});t||(t=n.in),e||(e=n.out)}const s=(0,n.getInnerHTML)();return n.html`
     <div oninit=${t} ondestroy=${e} style.--animate-duration=${i}>${s}</div>
-  `.acceptInnerHTML(s)}var m=e._z,y=e.mi,g=e.qG,p=e.Ce,x=e.Xn,I=e.MV;export{m as animateLoop,y as animateWrap,g as fadeIn,p as fadeInDown,x as fadeOut,I as fadeOutUp};
+  `.acceptInnerHTML(s)}var P=e._z,g=e.mi,b=e.qG,h=e.Ce,v=e.tE,w=e.Xn,A=e.rf,_=e.MV,T=e.fx,L=e.WT;export{P as animateLoop,g as animateWrap,b as fadeIn,h as fadeInDown,v as fadeInUp,w as fadeOut,A as fadeOutDown,_ as fadeOutUp,T as fx,L as fxGroup};
 //# sourceMappingURL=bundle.js.map

package/bundle.js.map

@@ -1 +1 @@
-{"version":3,"file":"bundle.js","mappings":"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","sources":["webpack://taggedjs-animate-css/webpack/bootstrap","webpack://taggedjs-animate-css/webpack/runtime/define property getters","webpack://taggedjs-animate-css/webpack/runtime/hasOwnProperty shorthand","webpack://taggedjs-animate-css/webpack/runtime/make namespace object","webpack://taggedjs-animate-css/./ts/createFx.function.ts","webpack://taggedjs-animate-css/./ts/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export function createFx({ fxIn, fxOut, staggerBy = 300, outPositionAbsolute = true, }) {\n    return {\n        in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),\n        out: (input) => animateDestroy({ fxName: fxOut, staggerBy, outPositionAbsolute, ...input }),\n    };\n}\nconst animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {\n    target.style.opacity = '0';\n    if (stagger) {\n        await wait(stagger * staggerBy);\n    }\n    target.style.opacity = '1';\n    target.classList.add('animate__animated', 'animate__' + fxName);\n};\nconst animateDestroy = async ({ target, stagger, outPositionAbsolute = true, fxName = 'fadeOutUp', staggerBy }) => {\n    if (outPositionAbsolute) {\n        captureElementPosition(target);\n    }\n    if (stagger) {\n        await wait(stagger * staggerBy);\n    }\n    return new Promise(function (res) {\n        // Create a one-time event listener\n        function handleAnimationEnd(event) {\n            // Optional: make sure the event is from the target element\n            if (event.target !== target)\n                return;\n            // Clean up\n            target.classList.remove('animate__animated', 'animate__' + fxName);\n            target.removeEventListener('animationend', handleAnimationEnd);\n            res(undefined);\n        }\n        target.classList.add('animate__animated', 'animate__' + fxName);\n        target.addEventListener('animationend', handleAnimationEnd);\n    });\n};\n// absolute\nexport function captureElementPosition(element) {\n    element.style.zIndex = element.style.zIndex || 1;\n    const toTop = element.offsetTop + 'px';\n    const toLeft = element.offsetLeft + 'px';\n    const toWidth = (element.clientWidth + (element.offsetWidth - element.clientWidth) + 1) + 'px';\n    const toHeight = (element.clientHeight + (element.offsetHeight - element.clientHeight) + 1) + 'px';\n    const fix = () => {\n        element.style.top = toTop;\n        element.style.left = toLeft;\n        element.style.width = toWidth;\n        element.style.height = toHeight;\n        element.style.position = 'absolute';\n    };\n    // element.style.position = 'fixed'\n    // allow other elements that are being removed to have a moment to figure out where they currently sit\n    setTimeout(fix, 0);\n}\nfunction wait(time) {\n    return new Promise((res) => {\n        setTimeout(res, time);\n    });\n}\n","import { createFx } from \"./createFx.function.js\";\nimport { getInnerHTML, html } from \"taggedjs\";\nexport const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });\nexport const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });\n/** Use on html elements to have them animated in and out */\nexport function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {\n    duration: '.2s',\n    outPositionAbsolute: false,\n}) {\n    if (!fxIn || !fxOut) {\n        const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });\n        if (!fxIn) {\n            fxIn = created.in;\n        }\n        if (!fxOut) {\n            fxOut = created.out;\n        }\n    }\n    const innerHTML = getInnerHTML();\n    return html `\n    <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n  `.acceptInnerHTML(innerHTML);\n}\n/** Use on html elements, within a loop, to have them animated in and out */\nexport function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = true, } = {\n    duration: '.2s',\n    outPositionAbsolute: true,\n}) {\n    if (!fxIn || !fxOut) {\n        const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });\n        if (!fxIn) {\n            fxIn = created.in;\n        }\n        if (!fxOut) {\n            fxOut = created.out;\n        }\n    }\n    const innerHTML = getInnerHTML();\n    return html `\n    <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n  `.acceptInnerHTML(innerHTML);\n}\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","createFx","fxIn","fxOut","staggerBy","outPositionAbsolute","in","input","animateInit","fxName","out","animateDestroy","async","target","stagger","style","opacity","wait","classList","add","element","zIndex","toTop","offsetTop","toLeft","offsetLeft","toWidth","clientWidth","offsetWidth","toHeight","clientHeight","offsetHeight","setTimeout","top","left","width","height","position","captureElementPosition","Promise","res","addEventListener","handleAnimationEnd","event","remove","removeEventListener","undefined","time","fadeInDown","fadeOutUp","fadeIn","fadeOut","animateWrap","duration","created","innerHTML","getInnerHTML","html","acceptInnerHTML","animateLoop"],"sourceRoot":""}
+{"version":3,"file":"bundle.js","mappings":"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","sources":["webpack://taggedjs-animate-css/webpack/bootstrap","webpack://taggedjs-animate-css/webpack/runtime/define property getters","webpack://taggedjs-animate-css/webpack/runtime/hasOwnProperty shorthand","webpack://taggedjs-animate-css/webpack/runtime/make namespace object","webpack://taggedjs-animate-css/./ts/createFx.function.ts","webpack://taggedjs-animate-css/./ts/index.ts"],"sourcesContent":["// The require scope\nvar __webpack_require__ = {};\n\n","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","export function createFx({ fxIn, fxOut, \n// staggerBy = 300,\noutPositionAbsolute = true, }) {\n    return {\n        in: (input, stagger) => animateInit({\n            fxName: fxIn,\n            ...input,\n        }, stagger),\n        out: (input, stagger) => animateDestroy({\n            fxName: fxOut,\n            outPositionAbsolute,\n            ...input,\n        }, stagger),\n    };\n}\nconst animateInit = async ({ target, fxName = 'fadeInUp' }, stagger) => {\n    target.style.opacity = '0';\n    if (stagger) {\n        await wait(stagger);\n    }\n    target.style.opacity = '1';\n    return addClassesTo(fxName, target);\n};\nconst animateDestroy = async ({ target, outPositionAbsolute = true, fxName = 'fadeOutUp', }, stagger) => {\n    if (outPositionAbsolute) {\n        captureElementPosition(target);\n    }\n    if (stagger) {\n        await wait(stagger);\n    }\n    return addClassesTo(fxName, target);\n};\nfunction addClassesTo(fxName, target) {\n    let res;\n    const promise = new Promise(function resinate(resolve) {\n        res = resolve;\n    });\n    function handleAnimationEnd(event) {\n        // Optional: make sure the event is from the target element\n        if (event.target !== target)\n            return;\n        // Clean up\n        target.classList.remove('animate__animated', 'animate__' + fxName);\n        target.removeEventListener('animationend', handleAnimationEnd);\n        res(undefined);\n    }\n    target.classList.add('animate__animated', 'animate__' + fxName);\n    target.addEventListener('animationend', handleAnimationEnd);\n    return promise;\n}\n// absolute\nexport function captureElementPosition(element) {\n    element.style.zIndex = element.style.zIndex || 1;\n    const toTop = element.offsetTop + 'px';\n    const toLeft = element.offsetLeft + 'px';\n    const toWidth = (element.clientWidth + (element.offsetWidth - element.clientWidth) + 1) + 'px';\n    const toHeight = (element.clientHeight + (element.offsetHeight - element.clientHeight) + 1) + 'px';\n    const fix = () => {\n        element.style.top = toTop;\n        element.style.left = toLeft;\n        element.style.width = toWidth;\n        element.style.height = toHeight;\n        element.style.position = 'absolute';\n    };\n    // element.style.position = 'fixed'\n    // allow other elements that are being removed to have a moment to figure out where they currently sit\n    setTimeout(fix, 0);\n}\nfunction wait(time) {\n    return new Promise((res) => {\n        setTimeout(res, time);\n    });\n}\n","import { createFx } from \"./createFx.function.js\";\nimport { addPaintRemoveAwait, getInnerHTML, host, html } from \"taggedjs\";\n/** preferred */\nexport const { in: fadeInUp, out: fadeOutDown } = createFx({\n    fxIn: 'fadeInUp',\n    fxOut: 'fadeOutDown'\n});\nexport const { in: fadeInDown, out: fadeOutUp } = createFx({\n    fxIn: 'fadeInDown',\n    fxOut: 'fadeOutUp'\n});\nexport const { in: fadeIn, out: fadeOut } = createFx({\n    fxIn: 'fadeIn',\n    fxOut: 'fadeOut',\n});\n/** Group created animations together with staggering */\nexport const fxGroup = ({ stagger = 100, fxIn, fxOut, duration = '2s', inName = 'fadeInUp', outName = 'fadeOutDown', outPositionAbsolute = false, } = {}) => {\n    let staggerTime = 0;\n    const setup = setupFx(function onInit(element) {\n        element.style.setProperty('--animate-duration', duration);\n        const totalStagger = stagger * (staggerTime++);\n        return setup.fxIn({ target: element }, totalStagger).then(() => {\n            --staggerTime;\n        });\n    }, function onDestroy(element) {\n        element.style.setProperty('--animate-duration', duration);\n        const totalStagger = stagger * (staggerTime++);\n        const destroyPromise = setup.fxOut({ target: element }, totalStagger).then(() => {\n            --staggerTime;\n        });\n        addPaintRemoveAwait(destroyPromise);\n        return destroyPromise;\n    }, fxIn, fxOut, inName, outName, \n    // stagger,\n    outPositionAbsolute);\n    return setup.host;\n};\n/** Used as a host on element. <div ${fx()}> */\nexport const fx = ({ fxIn, fxOut, stagger, inName = 'fadeInUp', outName = 'fadeOutDown', duration = '.2s', outPositionAbsolute = false, } = {}) => {\n    const setup = setupFx((element) => {\n        element.style.setProperty('--animate-duration', duration);\n        return setup.fxIn({ target: element }, stagger);\n    }, (element) => {\n        element.style.setProperty('--animate-duration', duration);\n        const destroyPromise = setup.fxOut({ target: element }, stagger);\n        addPaintRemoveAwait(destroyPromise);\n        return destroyPromise;\n    }, fxIn, fxOut, inName, outName, \n    // stagger,\n    outPositionAbsolute);\n    return setup.host;\n};\nfunction setupFx(onInit, onDestroy, fxIn, fxOut, inName, outName, \n// stagger: number | undefined,\noutPositionAbsolute) {\n    if (!fxIn || !fxOut) {\n        const created = createFx({\n            fxIn: inName,\n            fxOut: outName,\n            // staggerBy: stagger,\n            outPositionAbsolute,\n        });\n        if (!fxIn) {\n            fxIn = created.in;\n        }\n        if (!fxOut) {\n            fxOut = created.out;\n        }\n    }\n    return {\n        fxIn, fxOut,\n        host: host(() => undefined, {\n            onInit,\n            onDestroy,\n        })\n    };\n}\n/** @deprecated - Instead use <div ${fx()}> ... Use on html elements to have them animated in and out */\nexport function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {\n    duration: '.2s',\n    outPositionAbsolute: false,\n}) {\n    if (!fxIn || !fxOut) {\n        const created = createFx({\n            fxIn: 'fadeInUp',\n            fxOut: 'fadeOutDown',\n            outPositionAbsolute,\n        });\n        if (!fxIn) {\n            fxIn = created.in;\n        }\n        if (!fxOut) {\n            fxOut = created.out;\n        }\n    }\n    const innerHTML = getInnerHTML();\n    return html `\n    <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n  `.acceptInnerHTML(innerHTML);\n}\n/** Use on html elements, within a loop, to have them animated in and out */\nexport function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = true, } = {\n    duration: '.2s',\n    outPositionAbsolute: true,\n}) {\n    if (!fxIn || !fxOut) {\n        const created = createFx({\n            fxIn: 'fadeInUp',\n            fxOut: 'fadeOutDown',\n            outPositionAbsolute\n        });\n        if (!fxIn) {\n            fxIn = created.in;\n        }\n        if (!fxOut) {\n            fxOut = created.out;\n        }\n    }\n    const innerHTML = getInnerHTML();\n    return html `\n    <div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>\n  `.acceptInnerHTML(innerHTML);\n}\n"],"names":["__webpack_require__","exports","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","Symbol","toStringTag","value","createFx","fxIn","fxOut","outPositionAbsolute","in","input","stagger","animateInit","fxName","out","animateDestroy","async","target","style","opacity","wait","addClassesTo","element","zIndex","toTop","offsetTop","toLeft","offsetLeft","toWidth","clientWidth","offsetWidth","toHeight","clientHeight","offsetHeight","setTimeout","top","left","width","height","position","captureElementPosition","res","promise","Promise","resolve","classList","add","addEventListener","handleAnimationEnd","event","remove","removeEventListener","undefined","time","fadeInUp","fadeOutDown","fadeInDown","fadeOutUp","fadeIn","fadeOut","fxGroup","duration","inName","outName","staggerTime","setup","setupFx","setProperty","totalStagger","then","destroyPromise","addPaintRemoveAwait","host","fx","onInit","onDestroy","created","animateWrap","innerHTML","getInnerHTML","html","acceptInnerHTML","animateLoop"],"sourceRoot":""}

package/js/AnimateWrapOptions.type.d.ts

@@ -0,0 +1,16 @@
+import { ElementEvent } from "./createFx.function.js";
+export type fxNames = 'fadeInDown' | 'fadeInUp' | 'fadeOutUp' | 'fadeOutDown' | 'fade';
+export type fxCallback = (input: ElementEvent, stagger?: number) => Promise<void>;
+export type AnimateWrapOptions = {
+    inName?: fxNames;
+    outName?: fxNames;
+    /** fadeInDown or fadeIn */
+    fxIn?: fxCallback;
+    /** fadeOutUp or fadeOut */
+    fxOut?: (input: ElementEvent, stagger?: number) => Promise<void>;
+    /** Ex: .1s */
+    duration?: string;
+    stagger?: number;
+    /** only used when fxIn or fxOut is not provided */
+    outPositionAbsolute?: boolean;
+};

package/js/AnimateWrapOptions.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=AnimateWrapOptions.type.js.map

package/js/AnimateWrapOptions.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimateWrapOptions.type.js","sourceRoot":"","sources":["../ts/AnimateWrapOptions.type.ts"],"names":[],"mappings":""}

package/js/createFx.function.d.ts

@@ -1,14 +1,12 @@
 export type ElementEvent = {
     target: HTMLElement;
-    stagger: number;
 };
-export declare function createFx({ fxIn, fxOut, staggerBy, outPositionAbsolute, }: {
+export declare function createFx({ fxIn, fxOut, outPositionAbsolute, }: {
     fxIn: string;
     fxOut: string;
-    staggerBy?: number;
     outPositionAbsolute?: boolean;
 }): {
-    in: (input: ElementEvent) => Promise<void>;
-    out: (input: ElementEvent) => Promise<void>;
+    in: (input: ElementEvent, stagger?: number) => Promise<void>;
+    out: (input: ElementEvent, stagger?: number) => Promise<void>;
 };
 export declare function captureElementPosition(element: any): void;

package/js/createFx.function.js

@@ -1,39 +1,53 @@
-export function createFx({ fxIn, fxOut, staggerBy = 300, outPositionAbsolute = true, }) {
+export function createFx({ fxIn, fxOut, 
+// staggerBy = 300,
+outPositionAbsolute = true, }) {
     return {
-        in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),
-        out: (input) => animateDestroy({ fxName: fxOut, staggerBy, outPositionAbsolute, ...input }),
+        in: (input, stagger) => animateInit({
+            fxName: fxIn,
+            ...input,
+        }, stagger),
+        out: (input, stagger) => animateDestroy({
+            fxName: fxOut,
+            outPositionAbsolute,
+            ...input,
+        }, stagger),
     };
 }
-const animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {
+const animateInit = async ({ target, fxName = 'fadeInUp' }, stagger) => {
     target.style.opacity = '0';
     if (stagger) {
-        await wait(stagger * staggerBy);
+        await wait(stagger);
     }
     target.style.opacity = '1';
-    target.classList.add('animate__animated', 'animate__' + fxName);
+    return addClassesTo(fxName, target);
 };
-const animateDestroy = async ({ target, stagger, outPositionAbsolute = true, fxName = 'fadeOutUp', staggerBy }) => {
+const animateDestroy = async ({ target, outPositionAbsolute = true, fxName = 'fadeOutUp', }, stagger) => {
     if (outPositionAbsolute) {
         captureElementPosition(target);
     }
     if (stagger) {
-        await wait(stagger * staggerBy);
+        await wait(stagger);
     }
-    return new Promise(function (res) {
-        // Create a one-time event listener
-        function handleAnimationEnd(event) {
-            // Optional: make sure the event is from the target element
-            if (event.target !== target)
-                return;
-            // Clean up
-            target.classList.remove('animate__animated', 'animate__' + fxName);
-            target.removeEventListener('animationend', handleAnimationEnd);
-            res(undefined);
-        }
-        target.classList.add('animate__animated', 'animate__' + fxName);
-        target.addEventListener('animationend', handleAnimationEnd);
-    });
+    return addClassesTo(fxName, target);
 };
+function addClassesTo(fxName, target) {
+    let res;
+    const promise = new Promise(function resinate(resolve) {
+        res = resolve;
+    });
+    function handleAnimationEnd(event) {
+        // Optional: make sure the event is from the target element
+        if (event.target !== target)
+            return;
+        // Clean up
+        target.classList.remove('animate__animated', 'animate__' + fxName);
+        target.removeEventListener('animationend', handleAnimationEnd);
+        res(undefined);
+    }
+    target.classList.add('animate__animated', 'animate__' + fxName);
+    target.addEventListener('animationend', handleAnimationEnd);
+    return promise;
+}
 // absolute
 export function captureElementPosition(element) {
     element.style.zIndex = element.style.zIndex || 1;

package/js/createFx.function.js.map

@@ -1 +1 @@
-{"version":3,"file":"createFx.function.js","sourceRoot":"","sources":["../ts/createFx.function.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"createFx.function.js","sourceRoot":"","sources":["../ts/createFx.function.ts"],"names":[],"mappings":"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"}

package/js/index.d.ts

@@ -1,17 +1,16 @@
+import { AnimateWrapOptions } from "./AnimateWrapOptions.type.js";
 import { ElementEvent } from "./createFx.function.js";
-export declare const fadeInDown: (input: ElementEvent) => Promise<void>, fadeOutUp: (input: ElementEvent) => Promise<void>;
-export declare const fadeIn: (input: ElementEvent) => Promise<void>, fadeOut: (input: ElementEvent) => Promise<void>;
-export type AnimateWrapOptions = {
-    /** fadeInDown or fadeIn */
-    fxIn?: (input: ElementEvent) => Promise<void>;
-    /** fadeOutUp or fadeOut */
-    fxOut?: (input: ElementEvent) => Promise<void>;
-    /** Ex: .1s */
-    duration: string;
-    /** only used when fxIn or fxOut is not provided */
-    outPositionAbsolute?: boolean;
-};
-/** Use on html elements to have them animated in and out */
+import { HostValue } from "taggedjs";
+export { fxNames } from './AnimateWrapOptions.type.js';
+/** preferred */
+export declare const fadeInUp: (input: ElementEvent, stagger?: number | undefined) => Promise<void>, fadeOutDown: (input: ElementEvent, stagger?: number | undefined) => Promise<void>;
+export declare const fadeInDown: (input: ElementEvent, stagger?: number | undefined) => Promise<void>, fadeOutUp: (input: ElementEvent, stagger?: number | undefined) => Promise<void>;
+export declare const fadeIn: (input: ElementEvent, stagger?: number | undefined) => Promise<void>, fadeOut: (input: ElementEvent, stagger?: number | undefined) => Promise<void>;
+/** Group created animations together with staggering */
+export declare const fxGroup: ({ stagger, fxIn, fxOut, duration, inName, outName, outPositionAbsolute, }?: AnimateWrapOptions) => HostValue;
+/** Used as a host on element. <div ${fx()}> */
+export declare const fx: ({ fxIn, fxOut, stagger, inName, outName, duration, outPositionAbsolute, }?: AnimateWrapOptions) => HostValue;
+/** @deprecated - Instead use <div ${fx()}> ... Use on html elements to have them animated in and out */
 export declare function animateWrap({ fxIn, fxOut, duration, outPositionAbsolute, }?: AnimateWrapOptions): import("taggedjs").Tag;
 /** Use on html elements, within a loop, to have them animated in and out */
 export declare function animateLoop({ fxIn, fxOut, duration, outPositionAbsolute, }?: AnimateWrapOptions): import("taggedjs").Tag;

package/js/index.js

@@ -1,14 +1,91 @@
 import { createFx } from "./createFx.function.js";
-import { getInnerHTML, html } from "taggedjs";
-export const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });
-export const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });
-/** Use on html elements to have them animated in and out */
+import { addPaintRemoveAwait, getInnerHTML, host, html } from "taggedjs";
+/** preferred */
+export const { in: fadeInUp, out: fadeOutDown } = createFx({
+    fxIn: 'fadeInUp',
+    fxOut: 'fadeOutDown'
+});
+export const { in: fadeInDown, out: fadeOutUp } = createFx({
+    fxIn: 'fadeInDown',
+    fxOut: 'fadeOutUp'
+});
+export const { in: fadeIn, out: fadeOut } = createFx({
+    fxIn: 'fadeIn',
+    fxOut: 'fadeOut',
+});
+/** Group created animations together with staggering */
+export const fxGroup = ({ stagger = 100, fxIn, fxOut, duration = '2s', inName = 'fadeInUp', outName = 'fadeOutDown', outPositionAbsolute = false, } = {}) => {
+    let staggerTime = 0;
+    const setup = setupFx(function onInit(element) {
+        element.style.setProperty('--animate-duration', duration);
+        const totalStagger = stagger * (staggerTime++);
+        return setup.fxIn({ target: element }, totalStagger).then(() => {
+            --staggerTime;
+        });
+    }, function onDestroy(element) {
+        element.style.setProperty('--animate-duration', duration);
+        const totalStagger = stagger * (staggerTime++);
+        const destroyPromise = setup.fxOut({ target: element }, totalStagger).then(() => {
+            --staggerTime;
+        });
+        addPaintRemoveAwait(destroyPromise);
+        return destroyPromise;
+    }, fxIn, fxOut, inName, outName, 
+    // stagger,
+    outPositionAbsolute);
+    return setup.host;
+};
+/** Used as a host on element. <div ${fx()}> */
+export const fx = ({ fxIn, fxOut, stagger, inName = 'fadeInUp', outName = 'fadeOutDown', duration = '.2s', outPositionAbsolute = false, } = {}) => {
+    const setup = setupFx((element) => {
+        element.style.setProperty('--animate-duration', duration);
+        return setup.fxIn({ target: element }, stagger);
+    }, (element) => {
+        element.style.setProperty('--animate-duration', duration);
+        const destroyPromise = setup.fxOut({ target: element }, stagger);
+        addPaintRemoveAwait(destroyPromise);
+        return destroyPromise;
+    }, fxIn, fxOut, inName, outName, 
+    // stagger,
+    outPositionAbsolute);
+    return setup.host;
+};
+function setupFx(onInit, onDestroy, fxIn, fxOut, inName, outName, 
+// stagger: number | undefined,
+outPositionAbsolute) {
+    if (!fxIn || !fxOut) {
+        const created = createFx({
+            fxIn: inName,
+            fxOut: outName,
+            // staggerBy: stagger,
+            outPositionAbsolute,
+        });
+        if (!fxIn) {
+            fxIn = created.in;
+        }
+        if (!fxOut) {
+            fxOut = created.out;
+        }
+    }
+    return {
+        fxIn, fxOut,
+        host: host(() => undefined, {
+            onInit,
+            onDestroy,
+        })
+    };
+}
+/** @deprecated - Instead use <div ${fx()}> ... Use on html elements to have them animated in and out */
 export function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {
     duration: '.2s',
     outPositionAbsolute: false,
 }) {
     if (!fxIn || !fxOut) {
-        const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });
+        const created = createFx({
+            fxIn: 'fadeInUp',
+            fxOut: 'fadeOutDown',
+            outPositionAbsolute,
+        });
         if (!fxIn) {
             fxIn = created.in;
         }
@@ -27,7 +104,11 @@ export function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute
     outPositionAbsolute: true,
 }) {
     if (!fxIn || !fxOut) {
-        const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });
+        const created = createFx({
+            fxIn: 'fadeInUp',
+            fxOut: 'fadeOutDown',
+            outPositionAbsolute
+        });
         if (!fxIn) {
             fxIn = created.in;
         }

package/js/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAgB,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE7C,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,UAAU,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAC,CAAC,CAAA;AAClG,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,OAAO,EAAE,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,QAAQ,EAAE,KAAK,EAAC,SAAS,EAAC,CAAC,CAAA;AAgBtF,4DAA4D;AAC5D,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,mBAAmB,GAAG,KAAK,MACL;IACtB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,KAAK;CAC3B;IACC,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAE,mBAAmB,EAAC,CAAC,CAAA;QAErF,IAAG,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,GAAG,OAAO,CAAC,EAAE,CAAA;QACnB,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,CAAC;YACV,KAAK,GAAG,OAAO,CAAC,GAAG,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,6BAA6B,QAAQ,IAAI,SAAS;GACxF,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;AAC9B,CAAC;AAED,4EAA4E;AAC5E,MAAM,UAAU,WAAW,CAAC,EAC1B,IAAI,EACJ,KAAK,EACL,QAAQ,GAAG,KAAK,EAChB,mBAAmB,GAAG,IAAI,MACJ;IACtB,QAAQ,EAAE,KAAK;IACf,mBAAmB,EAAE,IAAI;CAC1B;IACC,IAAG,CAAC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;QACnB,MAAM,OAAO,GAAG,QAAQ,CAAC,EAAC,IAAI,EAAC,YAAY,EAAE,KAAK,EAAC,WAAW,EAAE,mBAAmB,EAAC,CAAC,CAAA;QAErF,IAAG,CAAC,IAAI,EAAE,CAAC;YACT,IAAI,GAAG,OAAO,CAAC,EAAE,CAAA;QACnB,CAAC;QAED,IAAG,CAAC,KAAK,EAAE,CAAC;YACV,KAAK,GAAG,OAAO,CAAC,GAAG,CAAA;QACrB,CAAC;IACH,CAAC;IAED,MAAM,SAAS,GAAG,YAAY,EAAE,CAAA;IAChC,OAAO,IAAI,CAAA;kBACK,IAAI,cAAc,KAAK,6BAA6B,QAAQ,IAAI,SAAS;GACxF,CAAC,eAAe,CAAC,SAAS,CAAC,CAAA;AAC9B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../ts/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "taggedjs-animate-css",
   "type": "module",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "HTML and CSS animations for TaggedJs brought to us by animate-css",
   "main": "js/index.js",
   "keywords": [
@@ -19,6 +19,6 @@
   "author": "Acker Dawn Apple",
   "license": "MIT",
   "peerDependencies": {
-    "taggedjs": ">= 2.8.36"
+    "taggedjs": "^2.8.38"
   }
 }