@wix/motion 1.599.0 → 1.601.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/cjs/motion.js +11 -0
- package/dist/cjs/motion.js.map +1 -1
- package/dist/esm/motion.js +11 -1
- package/dist/esm/motion.js.map +1 -1
- package/dist/types/motion.d.ts +5 -2
- package/dist/types/motion.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/cjs/motion.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
exports.__esModule = true;
|
|
4
|
+
exports.getAnimation = getAnimation;
|
|
4
5
|
exports.getElementAnimation = getElementAnimation;
|
|
5
6
|
exports.getElementCSSAnimation = getElementCSSAnimation;
|
|
6
7
|
exports.getScrubScene = getScrubScene;
|
|
@@ -127,4 +128,14 @@ function getScrubScene(target, animationOptions, trigger, sceneOptions = {}) {
|
|
|
127
128
|
}
|
|
128
129
|
};
|
|
129
130
|
}
|
|
131
|
+
function getAnimation(target, animationOptions, trigger) {
|
|
132
|
+
const animation = getElementCSSAnimation(target, animationOptions);
|
|
133
|
+
if (animation) {
|
|
134
|
+
animation.ready = new Promise(resolve => {
|
|
135
|
+
(0, _prepare.prepareAnimation)(target, animationOptions, resolve);
|
|
136
|
+
});
|
|
137
|
+
return animation;
|
|
138
|
+
}
|
|
139
|
+
return (0, _webAnimations.getWebAnimation)(target, animationOptions, trigger);
|
|
140
|
+
}
|
|
130
141
|
//# sourceMappingURL=motion.js.map
|
package/dist/cjs/motion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["_AnimationGroup","require","_utils","exports","getEasing","_webAnimations","getWebAnimation","_cssAnimations","getCSSAnimation","_prepare","prepareAnimation","_common","getElementCSSAnimation","target","animationOptions","namedEffect","getNamedEffect","style","effectId","getElementAnimation","effectNames","getNames","element","getElement","animations","getAnimations","animationNames","map","anim","animationName","filteredAnimations","forEach","name","includes","push","find","length","AnimationGroup","filter","id","startsWith","getScrubScene","trigger","sceneOptions","disabled","allowActiveEvent","rest","animation","typeSpecificOptions","window","ViewTimeline","viewSource","componentId","ready","partialAnimation","start","end","getProgress","effect","__","p","activeDuration","getComputedTiming","delay","getTiming","currentTime","destroy","cancel","centeredToTarget","transitionDuration","transitionEasing","customEffect","getJsEasing","v","active","progress"],"sources":["../../src/motion.ts"],"sourcesContent":["import type {\n AnimationOptions,\n ScrubAnimationOptions,\n TriggerVariant,\n MouseAnimationInstance,\n AnimationEffectAPI,\n CustomMouseAnimationInstance,\n ScrubScrollScene,\n ScrubPointerScene,\n} from './types';\nimport { AnimationGroup } from './AnimationGroup';\nimport { getEasing, getJsEasing } from './utils';\nimport { getWebAnimation } from './api/webAnimations';\nimport { getCSSAnimation } from './api/cssAnimations';\nimport { prepareAnimation } from './api/prepare';\nimport { getElement, getNamedEffect } from './api/common';\n\nfunction getElementCSSAnimation(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n): AnimationGroup | null {\n const namedEffect = getNamedEffect(\n animationOptions,\n ) as AnimationEffectAPI<any> | null;\n\n if (!namedEffect) {\n return null;\n }\n\n if (!namedEffect.style) {\n // if this named effect does not have a style method, attempt to get group of Web Animations\n if (animationOptions.effectId && target) {\n return getElementAnimation(target, animationOptions.effectId);\n }\n\n return null;\n }\n\n const effectNames = namedEffect.getNames(animationOptions);\n const element = typeof target === 'string' ? getElement(target) : target;\n const animations = element?.getAnimations();\n const animationNames =\n animations?.map((anim) => (anim as CSSAnimation).animationName) ||\n ([] as string[]);\n const filteredAnimations: CSSAnimation[] = [];\n\n effectNames.forEach((name) => {\n if (animationNames.includes(name)) {\n filteredAnimations.push(\n animations?.find(\n (anim) => (anim as CSSAnimation).animationName === name,\n ) as CSSAnimation,\n );\n }\n });\n\n return filteredAnimations?.length\n ? new AnimationGroup(filteredAnimations)\n : null;\n}\n\nfunction getElementAnimation(\n target: HTMLElement | string,\n effectId: string,\n): AnimationGroup | null {\n const element = typeof target === 'string' ? getElement(target) : target;\n // somehow get the right animations\n const animations = element\n ?.getAnimations()\n .filter((anim: Animation | CSSAnimation) => {\n const id = anim.id || (anim as CSSAnimation).animationName;\n // if no id/name just return all animations\n return id ? id.startsWith(effectId) : true;\n });\n\n return animations?.length ? new AnimationGroup(animations) : null;\n}\n\nfunction getScrubScene(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n trigger: Partial<TriggerVariant> & { element?: HTMLElement },\n sceneOptions: Record<string, any> = {},\n): ScrubScrollScene[] | ScrubPointerScene {\n const { disabled, allowActiveEvent, ...rest } = sceneOptions;\n const animation = getWebAnimation(target, animationOptions, trigger, rest);\n\n let typeSpecificOptions = {} as Record<string, any>;\n\n if (trigger.trigger === 'view-progress' && !window.ViewTimeline) {\n // TODO(ameerf): consider doing this only for bgscrub to not affect the other scroll effects\n const viewSource = trigger.element || getElement(trigger.componentId!);\n const { ready } = animation as AnimationGroup;\n\n return (animation as AnimationGroup).animations.map((partialAnimation) => {\n return {\n /* we use getters for start and end in order to access the animation's start and end\n only when initializing the scrub scene rather than immediately */\n get start() {\n return partialAnimation.start;\n },\n get end() {\n return partialAnimation.end;\n },\n viewSource,\n ready,\n getProgress() {\n return (animation as AnimationGroup).getProgress();\n },\n effect(__: any, p: number) {\n const { activeDuration } =\n partialAnimation.effect!.getComputedTiming();\n const { delay } = partialAnimation.effect!.getTiming();\n\n partialAnimation.currentTime =\n ((delay || 0) + ((activeDuration as number) || 0)) * p;\n },\n disabled,\n destroy() {\n partialAnimation.cancel();\n },\n } as ScrubScrollScene;\n });\n } else if (trigger.trigger === 'pointer-move') {\n const { centeredToTarget, transitionDuration, transitionEasing } =\n animationOptions as ScrubAnimationOptions;\n\n typeSpecificOptions = {\n target: (animation as MouseAnimationInstance).target,\n centeredToTarget,\n allowActiveEvent,\n };\n\n if (animationOptions.customEffect && transitionDuration) {\n typeSpecificOptions.transitionDuration = transitionDuration;\n typeSpecificOptions.transitionEasing = getJsEasing(transitionEasing);\n }\n }\n\n return {\n ...typeSpecificOptions,\n getProgress() {\n return (\n animation as AnimationGroup | CustomMouseAnimationInstance\n ).getProgress();\n },\n effect(\n __: any,\n p: number | { x: number; y: number },\n v?: { x: number; y: number },\n active?: boolean,\n ) {\n animation.progress(\n v\n ? {\n // @ts-expect-error spread error on p\n ...p,\n v,\n active,\n }\n : p,\n );\n },\n disabled,\n destroy() {\n animation.cancel();\n },\n } as ScrubPointerScene;\n}\n\nexport {\n getCSSAnimation,\n getWebAnimation,\n getElementCSSAnimation,\n getElementAnimation,\n getScrubScene,\n prepareAnimation,\n getEasing,\n};\n\nexport type { AnimationGroup };\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["_AnimationGroup","require","_utils","exports","getEasing","_webAnimations","getWebAnimation","_cssAnimations","getCSSAnimation","_prepare","prepareAnimation","_common","getElementCSSAnimation","target","animationOptions","namedEffect","getNamedEffect","style","effectId","getElementAnimation","effectNames","getNames","element","getElement","animations","getAnimations","animationNames","map","anim","animationName","filteredAnimations","forEach","name","includes","push","find","length","AnimationGroup","filter","id","startsWith","getScrubScene","trigger","sceneOptions","disabled","allowActiveEvent","rest","animation","typeSpecificOptions","window","ViewTimeline","viewSource","componentId","ready","partialAnimation","start","end","getProgress","effect","__","p","activeDuration","getComputedTiming","delay","getTiming","currentTime","destroy","cancel","centeredToTarget","transitionDuration","transitionEasing","customEffect","getJsEasing","v","active","progress","getAnimation","Promise","resolve"],"sources":["../../src/motion.ts"],"sourcesContent":["import type {\n AnimationOptions,\n ScrubAnimationOptions,\n TriggerVariant,\n MouseAnimationInstance,\n AnimationEffectAPI,\n CustomMouseAnimationInstance,\n ScrubScrollScene,\n ScrubPointerScene,\n} from './types';\nimport { AnimationGroup } from './AnimationGroup';\nimport { getEasing, getJsEasing } from './utils';\nimport { getWebAnimation } from './api/webAnimations';\nimport { getCSSAnimation } from './api/cssAnimations';\nimport { prepareAnimation } from './api/prepare';\nimport { getElement, getNamedEffect } from './api/common';\n\nfunction getElementCSSAnimation(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n): AnimationGroup | null {\n const namedEffect = getNamedEffect(\n animationOptions,\n ) as AnimationEffectAPI<any> | null;\n\n if (!namedEffect) {\n return null;\n }\n\n if (!namedEffect.style) {\n // if this named effect does not have a style method, attempt to get group of Web Animations\n if (animationOptions.effectId && target) {\n return getElementAnimation(target, animationOptions.effectId);\n }\n\n return null;\n }\n\n const effectNames = namedEffect.getNames(animationOptions);\n const element = typeof target === 'string' ? getElement(target) : target;\n const animations = element?.getAnimations();\n const animationNames =\n animations?.map((anim) => (anim as CSSAnimation).animationName) ||\n ([] as string[]);\n const filteredAnimations: CSSAnimation[] = [];\n\n effectNames.forEach((name) => {\n if (animationNames.includes(name)) {\n filteredAnimations.push(\n animations?.find(\n (anim) => (anim as CSSAnimation).animationName === name,\n ) as CSSAnimation,\n );\n }\n });\n\n return filteredAnimations?.length\n ? new AnimationGroup(filteredAnimations)\n : null;\n}\n\nfunction getElementAnimation(\n target: HTMLElement | string,\n effectId: string,\n): AnimationGroup | null {\n const element = typeof target === 'string' ? getElement(target) : target;\n // somehow get the right animations\n const animations = element\n ?.getAnimations()\n .filter((anim: Animation | CSSAnimation) => {\n const id = anim.id || (anim as CSSAnimation).animationName;\n // if no id/name just return all animations\n return id ? id.startsWith(effectId) : true;\n });\n\n return animations?.length ? new AnimationGroup(animations) : null;\n}\n\nfunction getScrubScene(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n trigger: Partial<TriggerVariant> & { element?: HTMLElement },\n sceneOptions: Record<string, any> = {},\n): ScrubScrollScene[] | ScrubPointerScene {\n const { disabled, allowActiveEvent, ...rest } = sceneOptions;\n const animation = getWebAnimation(target, animationOptions, trigger, rest);\n\n let typeSpecificOptions = {} as Record<string, any>;\n\n if (trigger.trigger === 'view-progress' && !window.ViewTimeline) {\n // TODO(ameerf): consider doing this only for bgscrub to not affect the other scroll effects\n const viewSource = trigger.element || getElement(trigger.componentId!);\n const { ready } = animation as AnimationGroup;\n\n return (animation as AnimationGroup).animations.map((partialAnimation) => {\n return {\n /* we use getters for start and end in order to access the animation's start and end\n only when initializing the scrub scene rather than immediately */\n get start() {\n return partialAnimation.start;\n },\n get end() {\n return partialAnimation.end;\n },\n viewSource,\n ready,\n getProgress() {\n return (animation as AnimationGroup).getProgress();\n },\n effect(__: any, p: number) {\n const { activeDuration } =\n partialAnimation.effect!.getComputedTiming();\n const { delay } = partialAnimation.effect!.getTiming();\n\n partialAnimation.currentTime =\n ((delay || 0) + ((activeDuration as number) || 0)) * p;\n },\n disabled,\n destroy() {\n partialAnimation.cancel();\n },\n } as ScrubScrollScene;\n });\n } else if (trigger.trigger === 'pointer-move') {\n const { centeredToTarget, transitionDuration, transitionEasing } =\n animationOptions as ScrubAnimationOptions;\n\n typeSpecificOptions = {\n target: (animation as MouseAnimationInstance).target,\n centeredToTarget,\n allowActiveEvent,\n };\n\n if (animationOptions.customEffect && transitionDuration) {\n typeSpecificOptions.transitionDuration = transitionDuration;\n typeSpecificOptions.transitionEasing = getJsEasing(transitionEasing);\n }\n }\n\n return {\n ...typeSpecificOptions,\n getProgress() {\n return (\n animation as AnimationGroup | CustomMouseAnimationInstance\n ).getProgress();\n },\n effect(\n __: any,\n p: number | { x: number; y: number },\n v?: { x: number; y: number },\n active?: boolean,\n ) {\n animation.progress(\n v\n ? {\n // @ts-expect-error spread error on p\n ...p,\n v,\n active,\n }\n : p,\n );\n },\n disabled,\n destroy() {\n animation.cancel();\n },\n } as ScrubPointerScene;\n}\n\nfunction getAnimation(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n): AnimationGroup | MouseAnimationInstance | null {\n const animation = getElementCSSAnimation(target, animationOptions);\n\n if (animation) {\n animation.ready = new Promise((resolve) => {\n prepareAnimation(target, animationOptions, resolve);\n });\n\n return animation;\n }\n\n return getWebAnimation(\n target,\n animationOptions,\n trigger,\n );\n}\n\nexport {\n getCSSAnimation,\n getWebAnimation,\n getElementCSSAnimation,\n getElementAnimation,\n getScrubScene,\n prepareAnimation,\n getAnimation,\n getEasing,\n};\n\nexport type { AnimationGroup };\n"],"mappings":";;;;;;;AAUA,IAAAA,eAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AAAiDE,OAAA,CAAAC,SAAA,GAAAF,MAAA,CAAAE,SAAA;AACjD,IAAAC,cAAA,GAAAJ,OAAA;AAAsDE,OAAA,CAAAG,eAAA,GAAAD,cAAA,CAAAC,eAAA;AACtD,IAAAC,cAAA,GAAAN,OAAA;AAAsDE,OAAA,CAAAK,eAAA,GAAAD,cAAA,CAAAC,eAAA;AACtD,IAAAC,QAAA,GAAAR,OAAA;AAAiDE,OAAA,CAAAO,gBAAA,GAAAD,QAAA,CAAAC,gBAAA;AACjD,IAAAC,OAAA,GAAAV,OAAA;AAEA,SAASW,sBAAsBA,CAC7BC,MAAmC,EACnCC,gBAAkC,EACX;EACvB,MAAMC,WAAW,GAAG,IAAAC,sBAAc,EAChCF,gBACF,CAAmC;EAEnC,IAAI,CAACC,WAAW,EAAE;IAChB,OAAO,IAAI;EACb;EAEA,IAAI,CAACA,WAAW,CAACE,KAAK,EAAE;IACtB;IACA,IAAIH,gBAAgB,CAACI,QAAQ,IAAIL,MAAM,EAAE;MACvC,OAAOM,mBAAmB,CAACN,MAAM,EAAEC,gBAAgB,CAACI,QAAQ,CAAC;IAC/D;IAEA,OAAO,IAAI;EACb;EAEA,MAAME,WAAW,GAAGL,WAAW,CAACM,QAAQ,CAACP,gBAAgB,CAAC;EAC1D,MAAMQ,OAAO,GAAG,OAAOT,MAAM,KAAK,QAAQ,GAAG,IAAAU,kBAAU,EAACV,MAAM,CAAC,GAAGA,MAAM;EACxE,MAAMW,UAAU,GAAGF,OAAO,oBAAPA,OAAO,CAAEG,aAAa,CAAC,CAAC;EAC3C,MAAMC,cAAc,GAClB,CAAAF,UAAU,oBAAVA,UAAU,CAAEG,GAAG,CAAEC,IAAI,IAAMA,IAAI,CAAkBC,aAAa,CAAC,KAC9D,EAAe;EAClB,MAAMC,kBAAkC,GAAG,EAAE;EAE7CV,WAAW,CAACW,OAAO,CAAEC,IAAI,IAAK;IAC5B,IAAIN,cAAc,CAACO,QAAQ,CAACD,IAAI,CAAC,EAAE;MACjCF,kBAAkB,CAACI,IAAI,CACrBV,UAAU,oBAAVA,UAAU,CAAEW,IAAI,CACbP,IAAI,IAAMA,IAAI,CAAkBC,aAAa,KAAKG,IACrD,CACF,CAAC;IACH;EACF,CAAC,CAAC;EAEF,OAAOF,kBAAkB,YAAlBA,kBAAkB,CAAEM,MAAM,GAC7B,IAAIC,8BAAc,CAACP,kBAAkB,CAAC,GACtC,IAAI;AACV;AAEA,SAASX,mBAAmBA,CAC1BN,MAA4B,EAC5BK,QAAgB,EACO;EACvB,MAAMI,OAAO,GAAG,OAAOT,MAAM,KAAK,QAAQ,GAAG,IAAAU,kBAAU,EAACV,MAAM,CAAC,GAAGA,MAAM;EACxE;EACA,MAAMW,UAAU,GAAGF,OAAO,oBAAPA,OAAO,CACtBG,aAAa,CAAC,CAAC,CAChBa,MAAM,CAAEV,IAA8B,IAAK;IAC1C,MAAMW,EAAE,GAAGX,IAAI,CAACW,EAAE,IAAKX,IAAI,CAAkBC,aAAa;IAC1D;IACA,OAAOU,EAAE,GAAGA,EAAE,CAACC,UAAU,CAACtB,QAAQ,CAAC,GAAG,IAAI;EAC5C,CAAC,CAAC;EAEJ,OAAOM,UAAU,YAAVA,UAAU,CAAEY,MAAM,GAAG,IAAIC,8BAAc,CAACb,UAAU,CAAC,GAAG,IAAI;AACnE;AAEA,SAASiB,aAAaA,CACpB5B,MAAmC,EACnCC,gBAAkC,EAClC4B,OAA4D,EAC5DC,YAAiC,GAAG,CAAC,CAAC,EACE;EACxC,MAAM;IAAEC,QAAQ;IAAEC,gBAAgB;IAAE,GAAGC;EAAK,CAAC,GAAGH,YAAY;EAC5D,MAAMI,SAAS,GAAG,IAAAzC,8BAAe,EAACO,MAAM,EAAEC,gBAAgB,EAAE4B,OAAO,EAAEI,IAAI,CAAC;EAE1E,IAAIE,mBAAmB,GAAG,CAAC,CAAwB;EAEnD,IAAIN,OAAO,CAACA,OAAO,KAAK,eAAe,IAAI,CAACO,MAAM,CAACC,YAAY,EAAE;IAC/D;IACA,MAAMC,UAAU,GAAGT,OAAO,CAACpB,OAAO,IAAI,IAAAC,kBAAU,EAACmB,OAAO,CAACU,WAAY,CAAC;IACtE,MAAM;MAAEC;IAAM,CAAC,GAAGN,SAA2B;IAE7C,OAAQA,SAAS,CAAoBvB,UAAU,CAACG,GAAG,CAAE2B,gBAAgB,IAAK;MACxE,OAAO;QACL;AACR;QACQ,IAAIC,KAAKA,CAAA,EAAG;UACV,OAAOD,gBAAgB,CAACC,KAAK;QAC/B,CAAC;QACD,IAAIC,GAAGA,CAAA,EAAG;UACR,OAAOF,gBAAgB,CAACE,GAAG;QAC7B,CAAC;QACDL,UAAU;QACVE,KAAK;QACLI,WAAWA,CAAA,EAAG;UACZ,OAAQV,SAAS,CAAoBU,WAAW,CAAC,CAAC;QACpD,CAAC;QACDC,MAAMA,CAACC,EAAO,EAAEC,CAAS,EAAE;UACzB,MAAM;YAAEC;UAAe,CAAC,GACtBP,gBAAgB,CAACI,MAAM,CAAEI,iBAAiB,CAAC,CAAC;UAC9C,MAAM;YAAEC;UAAM,CAAC,GAAGT,gBAAgB,CAACI,MAAM,CAAEM,SAAS,CAAC,CAAC;UAEtDV,gBAAgB,CAACW,WAAW,GAC1B,CAAC,CAACF,KAAK,IAAI,CAAC,KAAMF,cAAc,IAAe,CAAC,CAAC,IAAID,CAAC;QAC1D,CAAC;QACDhB,QAAQ;QACRsB,OAAOA,CAAA,EAAG;UACRZ,gBAAgB,CAACa,MAAM,CAAC,CAAC;QAC3B;MACF,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,MAAM,IAAIzB,OAAO,CAACA,OAAO,KAAK,cAAc,EAAE;IAC7C,MAAM;MAAE0B,gBAAgB;MAAEC,kBAAkB;MAAEC;IAAiB,CAAC,GAC9DxD,gBAAyC;IAE3CkC,mBAAmB,GAAG;MACpBnC,MAAM,EAAGkC,SAAS,CAA4BlC,MAAM;MACpDuD,gBAAgB;MAChBvB;IACF,CAAC;IAED,IAAI/B,gBAAgB,CAACyD,YAAY,IAAIF,kBAAkB,EAAE;MACvDrB,mBAAmB,CAACqB,kBAAkB,GAAGA,kBAAkB;MAC3DrB,mBAAmB,CAACsB,gBAAgB,GAAG,IAAAE,kBAAW,EAACF,gBAAgB,CAAC;IACtE;EACF;EAEA,OAAO;IACL,GAAGtB,mBAAmB;IACtBS,WAAWA,CAAA,EAAG;MACZ,OACEV,SAAS,CACTU,WAAW,CAAC,CAAC;IACjB,CAAC;IACDC,MAAMA,CACJC,EAAO,EACPC,CAAoC,EACpCa,CAA4B,EAC5BC,MAAgB,EAChB;MACA3B,SAAS,CAAC4B,QAAQ,CAChBF,CAAC,GACG;QACE;QACA,GAAGb,CAAC;QACJa,CAAC;QACDC;MACF,CAAC,GACDd,CACN,CAAC;IACH,CAAC;IACDhB,QAAQ;IACRsB,OAAOA,CAAA,EAAG;MACRnB,SAAS,CAACoB,MAAM,CAAC,CAAC;IACpB;EACF,CAAC;AACH;AAEA,SAASS,YAAYA,CACnB/D,MAAmC,EACnCC,gBAAkC,EAClC4B,OAA6D,EACb;EAChD,MAAMK,SAAS,GAAGnC,sBAAsB,CAACC,MAAM,EAAEC,gBAAgB,CAAC;EAElE,IAAIiC,SAAS,EAAE;IACbA,SAAS,CAACM,KAAK,GAAG,IAAIwB,OAAO,CAAEC,OAAO,IAAK;MACzC,IAAApE,yBAAgB,EAACG,MAAM,EAAEC,gBAAgB,EAAEgE,OAAO,CAAC;IACrD,CAAC,CAAC;IAEF,OAAO/B,SAAS;EAClB;EAEA,OAAO,IAAAzC,8BAAe,EACpBO,MAAM,EACNC,gBAAgB,EAChB4B,OACF,CAAC;AACH","ignoreList":[]}
|
package/dist/esm/motion.js
CHANGED
|
@@ -120,5 +120,15 @@ function getScrubScene(target, animationOptions, trigger, sceneOptions) {
|
|
|
120
120
|
}
|
|
121
121
|
};
|
|
122
122
|
}
|
|
123
|
-
|
|
123
|
+
function getAnimation(target, animationOptions, trigger) {
|
|
124
|
+
const animation = getElementCSSAnimation(target, animationOptions);
|
|
125
|
+
if (animation) {
|
|
126
|
+
animation.ready = new Promise(resolve => {
|
|
127
|
+
prepareAnimation(target, animationOptions, resolve);
|
|
128
|
+
});
|
|
129
|
+
return animation;
|
|
130
|
+
}
|
|
131
|
+
return getWebAnimation(target, animationOptions, trigger);
|
|
132
|
+
}
|
|
133
|
+
export { getCSSAnimation, getWebAnimation, getElementCSSAnimation, getElementAnimation, getScrubScene, prepareAnimation, getAnimation, getEasing };
|
|
124
134
|
//# sourceMappingURL=motion.js.map
|
package/dist/esm/motion.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["AnimationGroup","getEasing","getJsEasing","getWebAnimation","getCSSAnimation","prepareAnimation","getElement","getNamedEffect","getElementCSSAnimation","target","animationOptions","namedEffect","style","effectId","getElementAnimation","effectNames","getNames","element","animations","getAnimations","animationNames","map","anim","animationName","filteredAnimations","forEach","name","includes","push","find","length","filter","id","startsWith","getScrubScene","trigger","sceneOptions","disabled","allowActiveEvent","rest","animation","typeSpecificOptions","window","ViewTimeline","viewSource","componentId","ready","partialAnimation","start","end","getProgress","effect","__","p","activeDuration","getComputedTiming","delay","getTiming","currentTime","destroy","cancel","centeredToTarget","transitionDuration","transitionEasing","customEffect","v","active","progress"],"sources":["../../src/motion.ts"],"sourcesContent":["import type {\n AnimationOptions,\n ScrubAnimationOptions,\n TriggerVariant,\n MouseAnimationInstance,\n AnimationEffectAPI,\n CustomMouseAnimationInstance,\n ScrubScrollScene,\n ScrubPointerScene,\n} from './types';\nimport { AnimationGroup } from './AnimationGroup';\nimport { getEasing, getJsEasing } from './utils';\nimport { getWebAnimation } from './api/webAnimations';\nimport { getCSSAnimation } from './api/cssAnimations';\nimport { prepareAnimation } from './api/prepare';\nimport { getElement, getNamedEffect } from './api/common';\n\nfunction getElementCSSAnimation(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n): AnimationGroup | null {\n const namedEffect = getNamedEffect(\n animationOptions,\n ) as AnimationEffectAPI<any> | null;\n\n if (!namedEffect) {\n return null;\n }\n\n if (!namedEffect.style) {\n // if this named effect does not have a style method, attempt to get group of Web Animations\n if (animationOptions.effectId && target) {\n return getElementAnimation(target, animationOptions.effectId);\n }\n\n return null;\n }\n\n const effectNames = namedEffect.getNames(animationOptions);\n const element = typeof target === 'string' ? getElement(target) : target;\n const animations = element?.getAnimations();\n const animationNames =\n animations?.map((anim) => (anim as CSSAnimation).animationName) ||\n ([] as string[]);\n const filteredAnimations: CSSAnimation[] = [];\n\n effectNames.forEach((name) => {\n if (animationNames.includes(name)) {\n filteredAnimations.push(\n animations?.find(\n (anim) => (anim as CSSAnimation).animationName === name,\n ) as CSSAnimation,\n );\n }\n });\n\n return filteredAnimations?.length\n ? new AnimationGroup(filteredAnimations)\n : null;\n}\n\nfunction getElementAnimation(\n target: HTMLElement | string,\n effectId: string,\n): AnimationGroup | null {\n const element = typeof target === 'string' ? getElement(target) : target;\n // somehow get the right animations\n const animations = element\n ?.getAnimations()\n .filter((anim: Animation | CSSAnimation) => {\n const id = anim.id || (anim as CSSAnimation).animationName;\n // if no id/name just return all animations\n return id ? id.startsWith(effectId) : true;\n });\n\n return animations?.length ? new AnimationGroup(animations) : null;\n}\n\nfunction getScrubScene(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n trigger: Partial<TriggerVariant> & { element?: HTMLElement },\n sceneOptions: Record<string, any> = {},\n): ScrubScrollScene[] | ScrubPointerScene {\n const { disabled, allowActiveEvent, ...rest } = sceneOptions;\n const animation = getWebAnimation(target, animationOptions, trigger, rest);\n\n let typeSpecificOptions = {} as Record<string, any>;\n\n if (trigger.trigger === 'view-progress' && !window.ViewTimeline) {\n // TODO(ameerf): consider doing this only for bgscrub to not affect the other scroll effects\n const viewSource = trigger.element || getElement(trigger.componentId!);\n const { ready } = animation as AnimationGroup;\n\n return (animation as AnimationGroup).animations.map((partialAnimation) => {\n return {\n /* we use getters for start and end in order to access the animation's start and end\n only when initializing the scrub scene rather than immediately */\n get start() {\n return partialAnimation.start;\n },\n get end() {\n return partialAnimation.end;\n },\n viewSource,\n ready,\n getProgress() {\n return (animation as AnimationGroup).getProgress();\n },\n effect(__: any, p: number) {\n const { activeDuration } =\n partialAnimation.effect!.getComputedTiming();\n const { delay } = partialAnimation.effect!.getTiming();\n\n partialAnimation.currentTime =\n ((delay || 0) + ((activeDuration as number) || 0)) * p;\n },\n disabled,\n destroy() {\n partialAnimation.cancel();\n },\n } as ScrubScrollScene;\n });\n } else if (trigger.trigger === 'pointer-move') {\n const { centeredToTarget, transitionDuration, transitionEasing } =\n animationOptions as ScrubAnimationOptions;\n\n typeSpecificOptions = {\n target: (animation as MouseAnimationInstance).target,\n centeredToTarget,\n allowActiveEvent,\n };\n\n if (animationOptions.customEffect && transitionDuration) {\n typeSpecificOptions.transitionDuration = transitionDuration;\n typeSpecificOptions.transitionEasing = getJsEasing(transitionEasing);\n }\n }\n\n return {\n ...typeSpecificOptions,\n getProgress() {\n return (\n animation as AnimationGroup | CustomMouseAnimationInstance\n ).getProgress();\n },\n effect(\n __: any,\n p: number | { x: number; y: number },\n v?: { x: number; y: number },\n active?: boolean,\n ) {\n animation.progress(\n v\n ? {\n // @ts-expect-error spread error on p\n ...p,\n v,\n active,\n }\n : p,\n );\n },\n disabled,\n destroy() {\n animation.cancel();\n },\n } as ScrubPointerScene;\n}\n\nexport {\n getCSSAnimation,\n getWebAnimation,\n getElementCSSAnimation,\n getElementAnimation,\n getScrubScene,\n prepareAnimation,\n getEasing,\n};\n\nexport type { AnimationGroup };\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"names":["AnimationGroup","getEasing","getJsEasing","getWebAnimation","getCSSAnimation","prepareAnimation","getElement","getNamedEffect","getElementCSSAnimation","target","animationOptions","namedEffect","style","effectId","getElementAnimation","effectNames","getNames","element","animations","getAnimations","animationNames","map","anim","animationName","filteredAnimations","forEach","name","includes","push","find","length","filter","id","startsWith","getScrubScene","trigger","sceneOptions","disabled","allowActiveEvent","rest","animation","typeSpecificOptions","window","ViewTimeline","viewSource","componentId","ready","partialAnimation","start","end","getProgress","effect","__","p","activeDuration","getComputedTiming","delay","getTiming","currentTime","destroy","cancel","centeredToTarget","transitionDuration","transitionEasing","customEffect","v","active","progress","getAnimation","Promise","resolve"],"sources":["../../src/motion.ts"],"sourcesContent":["import type {\n AnimationOptions,\n ScrubAnimationOptions,\n TriggerVariant,\n MouseAnimationInstance,\n AnimationEffectAPI,\n CustomMouseAnimationInstance,\n ScrubScrollScene,\n ScrubPointerScene,\n} from './types';\nimport { AnimationGroup } from './AnimationGroup';\nimport { getEasing, getJsEasing } from './utils';\nimport { getWebAnimation } from './api/webAnimations';\nimport { getCSSAnimation } from './api/cssAnimations';\nimport { prepareAnimation } from './api/prepare';\nimport { getElement, getNamedEffect } from './api/common';\n\nfunction getElementCSSAnimation(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n): AnimationGroup | null {\n const namedEffect = getNamedEffect(\n animationOptions,\n ) as AnimationEffectAPI<any> | null;\n\n if (!namedEffect) {\n return null;\n }\n\n if (!namedEffect.style) {\n // if this named effect does not have a style method, attempt to get group of Web Animations\n if (animationOptions.effectId && target) {\n return getElementAnimation(target, animationOptions.effectId);\n }\n\n return null;\n }\n\n const effectNames = namedEffect.getNames(animationOptions);\n const element = typeof target === 'string' ? getElement(target) : target;\n const animations = element?.getAnimations();\n const animationNames =\n animations?.map((anim) => (anim as CSSAnimation).animationName) ||\n ([] as string[]);\n const filteredAnimations: CSSAnimation[] = [];\n\n effectNames.forEach((name) => {\n if (animationNames.includes(name)) {\n filteredAnimations.push(\n animations?.find(\n (anim) => (anim as CSSAnimation).animationName === name,\n ) as CSSAnimation,\n );\n }\n });\n\n return filteredAnimations?.length\n ? new AnimationGroup(filteredAnimations)\n : null;\n}\n\nfunction getElementAnimation(\n target: HTMLElement | string,\n effectId: string,\n): AnimationGroup | null {\n const element = typeof target === 'string' ? getElement(target) : target;\n // somehow get the right animations\n const animations = element\n ?.getAnimations()\n .filter((anim: Animation | CSSAnimation) => {\n const id = anim.id || (anim as CSSAnimation).animationName;\n // if no id/name just return all animations\n return id ? id.startsWith(effectId) : true;\n });\n\n return animations?.length ? new AnimationGroup(animations) : null;\n}\n\nfunction getScrubScene(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n trigger: Partial<TriggerVariant> & { element?: HTMLElement },\n sceneOptions: Record<string, any> = {},\n): ScrubScrollScene[] | ScrubPointerScene {\n const { disabled, allowActiveEvent, ...rest } = sceneOptions;\n const animation = getWebAnimation(target, animationOptions, trigger, rest);\n\n let typeSpecificOptions = {} as Record<string, any>;\n\n if (trigger.trigger === 'view-progress' && !window.ViewTimeline) {\n // TODO(ameerf): consider doing this only for bgscrub to not affect the other scroll effects\n const viewSource = trigger.element || getElement(trigger.componentId!);\n const { ready } = animation as AnimationGroup;\n\n return (animation as AnimationGroup).animations.map((partialAnimation) => {\n return {\n /* we use getters for start and end in order to access the animation's start and end\n only when initializing the scrub scene rather than immediately */\n get start() {\n return partialAnimation.start;\n },\n get end() {\n return partialAnimation.end;\n },\n viewSource,\n ready,\n getProgress() {\n return (animation as AnimationGroup).getProgress();\n },\n effect(__: any, p: number) {\n const { activeDuration } =\n partialAnimation.effect!.getComputedTiming();\n const { delay } = partialAnimation.effect!.getTiming();\n\n partialAnimation.currentTime =\n ((delay || 0) + ((activeDuration as number) || 0)) * p;\n },\n disabled,\n destroy() {\n partialAnimation.cancel();\n },\n } as ScrubScrollScene;\n });\n } else if (trigger.trigger === 'pointer-move') {\n const { centeredToTarget, transitionDuration, transitionEasing } =\n animationOptions as ScrubAnimationOptions;\n\n typeSpecificOptions = {\n target: (animation as MouseAnimationInstance).target,\n centeredToTarget,\n allowActiveEvent,\n };\n\n if (animationOptions.customEffect && transitionDuration) {\n typeSpecificOptions.transitionDuration = transitionDuration;\n typeSpecificOptions.transitionEasing = getJsEasing(transitionEasing);\n }\n }\n\n return {\n ...typeSpecificOptions,\n getProgress() {\n return (\n animation as AnimationGroup | CustomMouseAnimationInstance\n ).getProgress();\n },\n effect(\n __: any,\n p: number | { x: number; y: number },\n v?: { x: number; y: number },\n active?: boolean,\n ) {\n animation.progress(\n v\n ? {\n // @ts-expect-error spread error on p\n ...p,\n v,\n active,\n }\n : p,\n );\n },\n disabled,\n destroy() {\n animation.cancel();\n },\n } as ScrubPointerScene;\n}\n\nfunction getAnimation(\n target: HTMLElement | string | null,\n animationOptions: AnimationOptions,\n trigger?: Partial<TriggerVariant> & { element?: HTMLElement },\n): AnimationGroup | MouseAnimationInstance | null {\n const animation = getElementCSSAnimation(target, animationOptions);\n\n if (animation) {\n animation.ready = new Promise((resolve) => {\n prepareAnimation(target, animationOptions, resolve);\n });\n\n return animation;\n }\n\n return getWebAnimation(\n target,\n animationOptions,\n trigger,\n );\n}\n\nexport {\n getCSSAnimation,\n getWebAnimation,\n getElementCSSAnimation,\n getElementAnimation,\n getScrubScene,\n prepareAnimation,\n getAnimation,\n getEasing,\n};\n\nexport type { AnimationGroup };\n"],"mappings":"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","ignoreList":[]}
|
package/dist/types/motion.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { AnimationOptions, TriggerVariant, ScrubScrollScene, ScrubPointerScene } from './types';
|
|
1
|
+
import type { AnimationOptions, TriggerVariant, MouseAnimationInstance, ScrubScrollScene, ScrubPointerScene } from './types';
|
|
2
2
|
import { AnimationGroup } from './AnimationGroup';
|
|
3
3
|
import { getEasing } from './utils';
|
|
4
4
|
import { getWebAnimation } from './api/webAnimations';
|
|
@@ -9,6 +9,9 @@ declare function getElementAnimation(target: HTMLElement | string, effectId: str
|
|
|
9
9
|
declare function getScrubScene(target: HTMLElement | string | null, animationOptions: AnimationOptions, trigger: Partial<TriggerVariant> & {
|
|
10
10
|
element?: HTMLElement;
|
|
11
11
|
}, sceneOptions?: Record<string, any>): ScrubScrollScene[] | ScrubPointerScene;
|
|
12
|
-
|
|
12
|
+
declare function getAnimation(target: HTMLElement | string | null, animationOptions: AnimationOptions, trigger?: Partial<TriggerVariant> & {
|
|
13
|
+
element?: HTMLElement;
|
|
14
|
+
}): AnimationGroup | MouseAnimationInstance | null;
|
|
15
|
+
export { getCSSAnimation, getWebAnimation, getElementCSSAnimation, getElementAnimation, getScrubScene, prepareAnimation, getAnimation, getEasing, };
|
|
13
16
|
export type { AnimationGroup };
|
|
14
17
|
//# sourceMappingURL=motion.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/motion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAEhB,cAAc,
|
|
1
|
+
{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/motion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,gBAAgB,EAEhB,cAAc,EACd,sBAAsB,EAGtB,gBAAgB,EAChB,iBAAiB,EAClB,MAAM,SAAS,CAAC;AACjB,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAe,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGjD,iBAAS,sBAAsB,CAC7B,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,GACjC,cAAc,GAAG,IAAI,CAuCvB;AAED,iBAAS,mBAAmB,CAC1B,MAAM,EAAE,WAAW,GAAG,MAAM,EAC5B,QAAQ,EAAE,MAAM,GACf,cAAc,GAAG,IAAI,CAYvB;AAED,iBAAS,aAAa,CACpB,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,EAC5D,YAAY,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,GACrC,gBAAgB,EAAE,GAAG,iBAAiB,CAqFxC;AAED,iBAAS,YAAY,CACnB,MAAM,EAAE,WAAW,GAAG,MAAM,GAAG,IAAI,EACnC,gBAAgB,EAAE,gBAAgB,EAClC,OAAO,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,WAAW,CAAA;CAAE,GAC5D,cAAc,GAAG,sBAAsB,GAAG,IAAI,CAgBhD;AAED,OAAO,EACL,eAAe,EACf,eAAe,EACf,sBAAsB,EACtB,mBAAmB,EACnB,aAAa,EACb,gBAAgB,EAChB,YAAY,EACZ,SAAS,GACV,CAAC;AAEF,YAAY,EAAE,cAAc,EAAE,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@wix/motion",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.601.0",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "wow!Team",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"wallaby": {
|
|
84
84
|
"autoDetect": true
|
|
85
85
|
},
|
|
86
|
-
"falconPackageHash": "
|
|
86
|
+
"falconPackageHash": "da3b5a0b372e90eae0a023d32b0ea4a1a59c65a370978dd5ad79cc06"
|
|
87
87
|
}
|