taggedjs-animate-css 0.0.11 → 0.0.13
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/bundle.js +5 -3
- package/bundle.js.gz +0 -0
- package/bundle.js.map +1 -1
- package/bundle.js.map.gz +0 -0
- package/js/createFx.function.d.ts +2 -1
- package/js/createFx.function.js +4 -4
- package/js/createFx.function.js.map +1 -1
- package/js/index.d.ts +6 -1
- package/js/index.js +33 -5
- package/js/index.js.map +1 -1
- package/package.json +5 -2
package/bundle.js
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
var t={d:(e,n)=>{for(var
|
|
2
|
-
<div oninit=${t} ondestroy=${e} style.--animate-duration=${
|
|
3
|
-
`.acceptInnerHTML(
|
|
1
|
+
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`
|
|
2
|
+
<div oninit=${t} ondestroy=${e} style.--animate-duration=${i}>${s}</div>
|
|
3
|
+
`.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`
|
|
4
|
+
<div oninit=${t} ondestroy=${e} style.--animate-duration=${i}>${s}</div>
|
|
5
|
+
`.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};
|
|
4
6
|
//# sourceMappingURL=bundle.js.map
|
package/bundle.js.gz
CHANGED
|
Binary file
|
package/bundle.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"bundle.js","mappings":"AACA,IAAIA,EAAsB,CCA1BA,EAAwB,CAACC,EAASC,KACjC,IAAI,IAAIC,KAAOD,EACXF,EAAoBI,EAAEF,EAAYC,KAASH,EAAoBI,EAAEH,EAASE,IAC5EE,OAAOC,eAAeL,EAASE,EAAK,CAAEI,YAAY,EAAMC,IAAKN,EAAWC,IAE1E,ECNDH,EAAwB,CAACS,EAAKC,IAAUL,OAAOM,UAAUC,eAAeC,KAAKJ,EAAKC,GCClFV,EAAyBC,IACH,oBAAXa,QAA0BA,OAAOC,aAC1CV,OAAOC,eAAeL,EAASa,OAAOC,YAAa,CAAEC,MAAO,WAE7DX,OAAOC,eAAeL,EAAS,aAAc,CAAEe,OAAO,GAAO,G,
|
|
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":""}
|
package/bundle.js.map.gz
CHANGED
|
Binary file
|
|
@@ -2,10 +2,11 @@ export type ElementEvent = {
|
|
|
2
2
|
target: HTMLElement;
|
|
3
3
|
stagger: number;
|
|
4
4
|
};
|
|
5
|
-
export declare function createFx({ fxIn, fxOut, staggerBy, }: {
|
|
5
|
+
export declare function createFx({ fxIn, fxOut, staggerBy, outPositionAbsolute, }: {
|
|
6
6
|
fxIn: string;
|
|
7
7
|
fxOut: string;
|
|
8
8
|
staggerBy?: number;
|
|
9
|
+
outPositionAbsolute?: boolean;
|
|
9
10
|
}): {
|
|
10
11
|
in: (input: ElementEvent) => Promise<void>;
|
|
11
12
|
out: (input: ElementEvent) => Promise<void>;
|
package/js/createFx.function.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
export function createFx({ fxIn, fxOut, staggerBy = 300, }) {
|
|
1
|
+
export function createFx({ fxIn, fxOut, staggerBy = 300, outPositionAbsolute = true, }) {
|
|
2
2
|
return {
|
|
3
3
|
in: (input) => animateInit({ fxName: fxIn, staggerBy, ...input }),
|
|
4
|
-
out: (input) => animateDestroy({ fxName: fxOut, staggerBy,
|
|
4
|
+
out: (input) => animateDestroy({ fxName: fxOut, staggerBy, outPositionAbsolute, ...input }),
|
|
5
5
|
};
|
|
6
6
|
}
|
|
7
7
|
const animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }) => {
|
|
@@ -12,8 +12,8 @@ const animateInit = async ({ target, stagger, staggerBy, fxName = 'fadeInDown' }
|
|
|
12
12
|
target.style.opacity = '1';
|
|
13
13
|
target.classList.add('animate__animated', 'animate__' + fxName);
|
|
14
14
|
};
|
|
15
|
-
const animateDestroy = async ({ target, stagger,
|
|
16
|
-
if (
|
|
15
|
+
const animateDestroy = async ({ target, stagger, outPositionAbsolute = true, fxName = 'fadeOutUp', staggerBy }) => {
|
|
16
|
+
if (outPositionAbsolute) {
|
|
17
17
|
captureElementPosition(target);
|
|
18
18
|
}
|
|
19
19
|
if (stagger) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"createFx.function.js","sourceRoot":"","sources":["../ts/createFx.function.ts"],"names":[],"mappings":"AAcA,MAAM,UAAU,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,SAAS,GAAG,GAAG,
|
|
1
|
+
{"version":3,"file":"createFx.function.js","sourceRoot":"","sources":["../ts/createFx.function.ts"],"names":[],"mappings":"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"}
|
package/js/index.d.ts
CHANGED
|
@@ -8,5 +8,10 @@ export type AnimateWrapOptions = {
|
|
|
8
8
|
fxOut?: (input: ElementEvent) => Promise<void>;
|
|
9
9
|
/** Ex: .1s */
|
|
10
10
|
duration: string;
|
|
11
|
+
/** only used when fxIn or fxOut is not provided */
|
|
12
|
+
outPositionAbsolute?: boolean;
|
|
11
13
|
};
|
|
12
|
-
|
|
14
|
+
/** Use on html elements to have them animated in and out */
|
|
15
|
+
export declare function animateWrap({ fxIn, fxOut, duration, outPositionAbsolute, }?: AnimateWrapOptions): import("taggedjs").Tag;
|
|
16
|
+
/** Use on html elements, within a loop, to have them animated in and out */
|
|
17
|
+
export declare function animateLoop({ fxIn, fxOut, duration, outPositionAbsolute, }?: AnimateWrapOptions): import("taggedjs").Tag;
|
package/js/index.js
CHANGED
|
@@ -2,14 +2,42 @@ import { createFx } from "./createFx.function.js";
|
|
|
2
2
|
import { getInnerHTML, html } from "taggedjs";
|
|
3
3
|
export const { in: fadeInDown, out: fadeOutUp } = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp' });
|
|
4
4
|
export const { in: fadeIn, out: fadeOut } = createFx({ fxIn: 'fadeIn', fxOut: 'fadeOut' });
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
fxOut: fadeOutUp,
|
|
5
|
+
/** Use on html elements to have them animated in and out */
|
|
6
|
+
export function animateWrap({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = false, } = {
|
|
8
7
|
duration: '.2s',
|
|
9
|
-
|
|
8
|
+
outPositionAbsolute: false,
|
|
9
|
+
}) {
|
|
10
|
+
if (!fxIn || !fxOut) {
|
|
11
|
+
const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });
|
|
12
|
+
if (!fxIn) {
|
|
13
|
+
fxIn = created.in;
|
|
14
|
+
}
|
|
15
|
+
if (!fxOut) {
|
|
16
|
+
fxOut = created.out;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
10
19
|
const innerHTML = getInnerHTML();
|
|
11
20
|
return html `
|
|
12
21
|
<div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>
|
|
13
22
|
`.acceptInnerHTML(innerHTML);
|
|
14
|
-
}
|
|
23
|
+
}
|
|
24
|
+
/** Use on html elements, within a loop, to have them animated in and out */
|
|
25
|
+
export function animateLoop({ fxIn, fxOut, duration = '.2s', outPositionAbsolute = true, } = {
|
|
26
|
+
duration: '.2s',
|
|
27
|
+
outPositionAbsolute: true,
|
|
28
|
+
}) {
|
|
29
|
+
if (!fxIn || !fxOut) {
|
|
30
|
+
const created = createFx({ fxIn: 'fadeInDown', fxOut: 'fadeOutUp', outPositionAbsolute });
|
|
31
|
+
if (!fxIn) {
|
|
32
|
+
fxIn = created.in;
|
|
33
|
+
}
|
|
34
|
+
if (!fxOut) {
|
|
35
|
+
fxOut = created.out;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
const innerHTML = getInnerHTML();
|
|
39
|
+
return html `
|
|
40
|
+
<div oninit=${fxIn} ondestroy=${fxOut} style.--animate-duration=${duration}>${innerHTML}</div>
|
|
41
|
+
`.acceptInnerHTML(innerHTML);
|
|
42
|
+
}
|
|
15
43
|
//# sourceMappingURL=index.js.map
|
package/js/index.js.map
CHANGED
|
@@ -1 +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;
|
|
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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "taggedjs-animate-css",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.13",
|
|
5
5
|
"description": "HTML and CSS animations for TaggedJs brought to us by animate-css",
|
|
6
6
|
"main": "js/index.js",
|
|
7
7
|
"keywords": [
|
|
@@ -17,5 +17,8 @@
|
|
|
17
17
|
"browser"
|
|
18
18
|
],
|
|
19
19
|
"author": "Acker Dawn Apple",
|
|
20
|
-
"license": "MIT"
|
|
20
|
+
"license": "MIT",
|
|
21
|
+
"peerDependencies": {
|
|
22
|
+
"taggedjs": ">= 2.8.36"
|
|
23
|
+
}
|
|
21
24
|
}
|