framer-motion 12.34.2 → 12.34.4
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/README.md +3 -5
- package/dist/cjs/client.js +1 -1
- package/dist/cjs/client.js.map +1 -1
- package/dist/cjs/dom-mini.js.map +1 -1
- package/dist/cjs/dom.js +8 -16
- package/dist/cjs/dom.js.map +1 -1
- package/dist/cjs/{feature-bundle-Cb13qNcx.js → feature-bundle-CUI5saed.js} +2 -5
- package/dist/cjs/feature-bundle-CUI5saed.js.map +1 -0
- package/dist/cjs/index.js +9 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/m.js +3 -9
- package/dist/cjs/m.js.map +1 -1
- package/dist/cjs/mini.js.map +1 -1
- package/dist/dom-mini.d.ts +1 -0
- package/dist/dom.d.ts +1 -0
- package/dist/dom.js +1 -1
- package/dist/es/animation/animate/index.mjs +6 -2
- package/dist/es/animation/animate/index.mjs.map +1 -1
- package/dist/es/animation/animate/resolve-subjects.mjs.map +1 -1
- package/dist/es/animation/animate/sequence.mjs.map +1 -1
- package/dist/es/animation/animate/subject.mjs.map +1 -1
- package/dist/es/animation/animators/waapi/animate-elements.mjs.map +1 -1
- package/dist/es/animation/animators/waapi/animate-sequence.mjs.map +1 -1
- package/dist/es/animation/animators/waapi/animate-style.mjs.map +1 -1
- package/dist/es/animation/hooks/animation-controls.mjs.map +1 -1
- package/dist/es/animation/optimized-appear/handoff.mjs.map +1 -1
- package/dist/es/animation/optimized-appear/start.mjs.map +1 -1
- package/dist/es/animation/optimized-appear/store-id.mjs.map +1 -1
- package/dist/es/animation/optimized-appear/store.mjs.map +1 -1
- package/dist/es/animation/sequence/create.mjs.map +1 -1
- package/dist/es/animation/sequence/utils/calc-repeat-duration.mjs.map +1 -1
- package/dist/es/animation/sequence/utils/calc-time.mjs.map +1 -1
- package/dist/es/animation/sequence/utils/edit.mjs.map +1 -1
- package/dist/es/animation/sequence/utils/normalize-times.mjs.map +1 -1
- package/dist/es/animation/sequence/utils/sort.mjs.map +1 -1
- package/dist/es/animation/utils/create-visual-element.mjs.map +1 -1
- package/dist/es/animation/utils/is-dom-keyframes.mjs.map +1 -1
- package/dist/es/components/AnimatePresence/PopChild.mjs.map +1 -1
- package/dist/es/components/AnimatePresence/PresenceChild.mjs.map +1 -1
- package/dist/es/components/AnimatePresence/index.mjs.map +1 -1
- package/dist/es/components/AnimatePresence/use-presence.mjs.map +1 -1
- package/dist/es/components/AnimatePresence/utils.mjs.map +1 -1
- package/dist/es/components/Reorder/Group.mjs.map +1 -1
- package/dist/es/components/Reorder/Item.mjs.map +1 -1
- package/dist/es/components/Reorder/utils/auto-scroll.mjs.map +1 -1
- package/dist/es/components/Reorder/utils/check-reorder.mjs.map +1 -1
- package/dist/es/context/MotionContext/index.mjs.map +1 -1
- package/dist/es/context/MotionContext/utils.mjs.map +1 -1
- package/dist/es/events/add-pointer-event.mjs.map +1 -1
- package/dist/es/events/event-info.mjs.map +1 -1
- package/dist/es/gestures/drag/VisualElementDragControls.mjs +1 -1
- package/dist/es/gestures/drag/VisualElementDragControls.mjs.map +1 -1
- package/dist/es/gestures/drag/index.mjs.map +1 -1
- package/dist/es/gestures/drag/use-drag-controls.mjs.map +1 -1
- package/dist/es/gestures/drag/utils/constraints.mjs.map +1 -1
- package/dist/es/gestures/focus.mjs.map +1 -1
- package/dist/es/gestures/hover.mjs.map +1 -1
- package/dist/es/gestures/pan/PanSession.mjs +2 -5
- package/dist/es/gestures/pan/PanSession.mjs.map +1 -1
- package/dist/es/gestures/pan/index.mjs.map +1 -1
- package/dist/es/gestures/press.mjs.map +1 -1
- package/dist/es/index.mjs +2 -2
- package/dist/es/m.mjs +1 -1
- package/dist/es/motion/features/animation/exit.mjs.map +1 -1
- package/dist/es/motion/features/animation/index.mjs.map +1 -1
- package/dist/es/motion/features/animations.mjs.map +1 -1
- package/dist/es/motion/features/definitions.mjs.map +1 -1
- package/dist/es/motion/features/drag.mjs.map +1 -1
- package/dist/es/motion/features/gestures.mjs.map +1 -1
- package/dist/es/motion/features/layout.mjs.map +1 -1
- package/dist/es/motion/features/load-features.mjs.map +1 -1
- package/dist/es/motion/features/viewport/index.mjs.map +1 -1
- package/dist/es/motion/features/viewport/observers.mjs.map +1 -1
- package/dist/es/motion/utils/is-motion-component.mjs.map +1 -1
- package/dist/es/motion/utils/symbol.mjs.map +1 -1
- package/dist/es/motion/utils/unwrap-motion-component.mjs.map +1 -1
- package/dist/es/motion/utils/use-visual-element.mjs.map +1 -1
- package/dist/es/motion/utils/valid-prop.mjs.map +1 -1
- package/dist/es/projection/use-instant-layout-transition.mjs.map +1 -1
- package/dist/es/projection/use-reset-projection.mjs.map +1 -1
- package/dist/es/render/components/create-proxy.mjs.map +1 -1
- package/dist/es/render/components/m/create.mjs.map +1 -1
- package/dist/es/render/components/m/elements.mjs.map +1 -1
- package/dist/es/render/components/motion/create.mjs.map +1 -1
- package/dist/es/render/components/motion/elements.mjs.map +1 -1
- package/dist/es/render/components/motion/feature-bundle.mjs.map +1 -1
- package/dist/es/render/dom/create-visual-element.mjs.map +1 -1
- package/dist/es/render/dom/features-animation.mjs.map +1 -1
- package/dist/es/render/dom/features-max.mjs.map +1 -1
- package/dist/es/render/dom/features-min.mjs.map +1 -1
- package/dist/es/render/dom/scroll/attach-animation.mjs.map +1 -1
- package/dist/es/render/dom/scroll/attach-function.mjs.map +1 -1
- package/dist/es/render/dom/scroll/index.mjs.map +1 -1
- package/dist/es/render/dom/scroll/info.mjs.map +1 -1
- package/dist/es/render/dom/scroll/offsets/edge.mjs.map +1 -1
- package/dist/es/render/dom/scroll/offsets/index.mjs.map +1 -1
- package/dist/es/render/dom/scroll/offsets/inset.mjs.map +1 -1
- package/dist/es/render/dom/scroll/offsets/offset.mjs.map +1 -1
- package/dist/es/render/dom/scroll/offsets/presets.mjs +0 -12
- package/dist/es/render/dom/scroll/offsets/presets.mjs.map +1 -1
- package/dist/es/render/dom/scroll/on-scroll-handler.mjs.map +1 -1
- package/dist/es/render/dom/scroll/track.mjs +2 -2
- package/dist/es/render/dom/scroll/track.mjs.map +1 -1
- package/dist/es/render/dom/scroll/utils/can-use-native-timeline.mjs.map +1 -1
- package/dist/es/render/dom/scroll/utils/get-timeline.mjs.map +1 -1
- package/dist/es/render/dom/utils/filter-props.mjs.map +1 -1
- package/dist/es/render/dom/utils/is-svg-component.mjs.map +1 -1
- package/dist/es/render/dom/viewport/index.mjs.map +1 -1
- package/dist/es/render/html/use-html-visual-state.mjs.map +1 -1
- package/dist/es/render/html/use-props.mjs.map +1 -1
- package/dist/es/render/html/utils/create-render-state.mjs.map +1 -1
- package/dist/es/render/svg/lowercase-elements.mjs.map +1 -1
- package/dist/es/render/svg/use-svg-visual-state.mjs.map +1 -1
- package/dist/es/render/svg/utils/create-render-state.mjs.map +1 -1
- package/dist/es/utils/distance.mjs.map +1 -1
- package/dist/es/utils/get-context-window.mjs.map +1 -1
- package/dist/es/utils/is-ref-object.mjs.map +1 -1
- package/dist/es/utils/transform-viewbox-point.mjs.map +1 -1
- package/dist/es/utils/use-composed-ref.mjs.map +1 -1
- package/dist/es/utils/use-cycle.mjs.map +1 -1
- package/dist/es/value/scroll/use-element-scroll.mjs.map +1 -1
- package/dist/es/value/scroll/use-viewport-scroll.mjs.map +1 -1
- package/dist/es/value/use-combine-values.mjs.map +1 -1
- package/dist/es/value/use-will-change/WillChangeMotionValue.mjs.map +1 -1
- package/dist/framer-motion.dev.js +15 -9
- package/dist/framer-motion.js +1 -1
- package/dist/size-rollup-animate.js +1 -1
- package/dist/size-rollup-animate.js.map +1 -1
- package/dist/size-rollup-dom-animation-assets.js +1 -1
- package/dist/size-rollup-dom-animation.js +1 -1
- package/dist/size-rollup-dom-max-assets.js +1 -1
- package/dist/size-rollup-dom-max.js +1 -1
- package/dist/size-rollup-m.js.map +1 -1
- package/dist/size-rollup-motion.js +1 -1
- package/dist/size-rollup-motion.js.map +1 -1
- package/dist/size-rollup-scroll.js +1 -1
- package/dist/size-rollup-scroll.js.map +1 -1
- package/dist/size-rollup-waapi-animate.js.map +1 -1
- package/dist/types/index.d.ts +1 -0
- package/dist/types.d-DOCC-kZB.d.ts +223 -0
- package/package.json +3 -3
- package/dist/cjs/feature-bundle-Cb13qNcx.js.map +0 -1
|
@@ -19,9 +19,13 @@ function createScopedAnimate(options = {}) {
|
|
|
19
19
|
let animations = [];
|
|
20
20
|
let animationOnComplete;
|
|
21
21
|
if (isSequence(subjectOrSequence)) {
|
|
22
|
+
const { onComplete, ...sequenceOptions } = optionsOrKeyframes || {};
|
|
23
|
+
if (typeof onComplete === "function") {
|
|
24
|
+
animationOnComplete = onComplete;
|
|
25
|
+
}
|
|
22
26
|
animations = animateSequence(subjectOrSequence, reduceMotion !== undefined
|
|
23
|
-
? { reduceMotion, ...
|
|
24
|
-
:
|
|
27
|
+
? { reduceMotion, ...sequenceOptions }
|
|
28
|
+
: sequenceOptions, scope);
|
|
25
29
|
}
|
|
26
30
|
else {
|
|
27
31
|
// Extract top-level onComplete so it doesn't get applied per-value
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../src/animation/animate/index.ts"],"sourcesContent":["import type {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n MotionValue,\n UnresolvedValueKeyframe,\n ValueAnimationTransition,\n} from \"motion-dom\"\nimport { GroupAnimationWithThen } from \"motion-dom\"\nimport { removeItem } from \"motion-utils\"\nimport {\n AnimationSequence,\n ObjectTarget,\n SequenceOptions,\n} from \"../sequence/types\"\nimport { animateSequence } from \"./sequence\"\nimport { animateSubject } from \"./subject\"\n\nfunction isSequence(value: unknown): value is AnimationSequence {\n return Array.isArray(value) && value.some(Array.isArray)\n}\n\ninterface ScopedAnimateOptions {\n scope?: AnimationScope\n reduceMotion?: boolean\n}\n\n/**\n * Creates an animation function that is optionally scoped\n * to a specific element.\n */\nexport function createScopedAnimate(options: ScopedAnimateOptions = {}) {\n const { scope, reduceMotion } = options\n /**\n * Animate a sequence\n */\n function scopedAnimate(\n sequence: AnimationSequence,\n options?: SequenceOptions\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate a string\n */\n function scopedAnimate(\n value: string | MotionValue<string>,\n keyframes: string | UnresolvedValueKeyframe<string>[],\n options?: ValueAnimationTransition<string>\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate a number\n */\n function scopedAnimate(\n value: number | MotionValue<number>,\n keyframes: number | UnresolvedValueKeyframe<number>[],\n options?: ValueAnimationTransition<number>\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate a generic motion value\n */\n function scopedAnimate<V extends string | number>(\n value: V | MotionValue<V>,\n keyframes: V | UnresolvedValueKeyframe<V>[],\n options?: ValueAnimationTransition<V>\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate an Element\n */\n function scopedAnimate(\n element: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate an object\n */\n function scopedAnimate<O extends {}>(\n object: O | O[],\n keyframes: ObjectTarget<O>,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen\n /**\n * Implementation\n */\n function scopedAnimate<O extends {}>(\n subjectOrSequence:\n | AnimationSequence\n | MotionValue<number>\n | MotionValue<string>\n | number\n | string\n | ElementOrSelector\n | O\n | O[],\n optionsOrKeyframes?:\n | SequenceOptions\n | number\n | string\n | UnresolvedValueKeyframe<number>[]\n | UnresolvedValueKeyframe<string>[]\n | DOMKeyframesDefinition\n | ObjectTarget<O>,\n options?:\n | ValueAnimationTransition<number>\n | ValueAnimationTransition<string>\n | DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen {\n let animations: AnimationPlaybackControlsWithThen[] = []\n let animationOnComplete: VoidFunction | undefined\n\n if (isSequence(subjectOrSequence)) {\n animations = animateSequence(\n subjectOrSequence,\n reduceMotion !== undefined\n ? { reduceMotion, ...
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../src/animation/animate/index.ts"],"sourcesContent":["import type {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n MotionValue,\n UnresolvedValueKeyframe,\n ValueAnimationTransition,\n} from \"motion-dom\"\nimport { GroupAnimationWithThen } from \"motion-dom\"\nimport { removeItem } from \"motion-utils\"\nimport {\n AnimationSequence,\n ObjectTarget,\n SequenceOptions,\n} from \"../sequence/types\"\nimport { animateSequence } from \"./sequence\"\nimport { animateSubject } from \"./subject\"\n\nfunction isSequence(value: unknown): value is AnimationSequence {\n return Array.isArray(value) && value.some(Array.isArray)\n}\n\ninterface ScopedAnimateOptions {\n scope?: AnimationScope\n reduceMotion?: boolean\n}\n\n/**\n * Creates an animation function that is optionally scoped\n * to a specific element.\n */\nexport function createScopedAnimate(options: ScopedAnimateOptions = {}) {\n const { scope, reduceMotion } = options\n /**\n * Animate a sequence\n */\n function scopedAnimate(\n sequence: AnimationSequence,\n options?: SequenceOptions\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate a string\n */\n function scopedAnimate(\n value: string | MotionValue<string>,\n keyframes: string | UnresolvedValueKeyframe<string>[],\n options?: ValueAnimationTransition<string>\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate a number\n */\n function scopedAnimate(\n value: number | MotionValue<number>,\n keyframes: number | UnresolvedValueKeyframe<number>[],\n options?: ValueAnimationTransition<number>\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate a generic motion value\n */\n function scopedAnimate<V extends string | number>(\n value: V | MotionValue<V>,\n keyframes: V | UnresolvedValueKeyframe<V>[],\n options?: ValueAnimationTransition<V>\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate an Element\n */\n function scopedAnimate(\n element: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen\n /**\n * Animate an object\n */\n function scopedAnimate<O extends {}>(\n object: O | O[],\n keyframes: ObjectTarget<O>,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen\n /**\n * Implementation\n */\n function scopedAnimate<O extends {}>(\n subjectOrSequence:\n | AnimationSequence\n | MotionValue<number>\n | MotionValue<string>\n | number\n | string\n | ElementOrSelector\n | O\n | O[],\n optionsOrKeyframes?:\n | SequenceOptions\n | number\n | string\n | UnresolvedValueKeyframe<number>[]\n | UnresolvedValueKeyframe<string>[]\n | DOMKeyframesDefinition\n | ObjectTarget<O>,\n options?:\n | ValueAnimationTransition<number>\n | ValueAnimationTransition<string>\n | DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen {\n let animations: AnimationPlaybackControlsWithThen[] = []\n let animationOnComplete: VoidFunction | undefined\n\n if (isSequence(subjectOrSequence)) {\n const { onComplete, ...sequenceOptions } =\n (optionsOrKeyframes as SequenceOptions) || {}\n if (typeof onComplete === \"function\") {\n animationOnComplete = onComplete as VoidFunction\n }\n animations = animateSequence(\n subjectOrSequence,\n reduceMotion !== undefined\n ? { reduceMotion, ...sequenceOptions }\n : (sequenceOptions as SequenceOptions),\n scope\n )\n } else {\n // Extract top-level onComplete so it doesn't get applied per-value\n const { onComplete, ...rest } = options || {}\n if (typeof onComplete === \"function\") {\n animationOnComplete = onComplete as VoidFunction\n }\n animations = animateSubject(\n subjectOrSequence as ElementOrSelector,\n optionsOrKeyframes as DOMKeyframesDefinition,\n (reduceMotion !== undefined\n ? { reduceMotion, ...rest }\n : rest) as DynamicAnimationOptions,\n scope\n )\n }\n\n const animation = new GroupAnimationWithThen(animations)\n\n if (animationOnComplete) {\n animation.finished.then(animationOnComplete)\n }\n\n if (scope) {\n scope.animations.push(animation)\n animation.finished.then(() => {\n removeItem(scope.animations, animation)\n })\n }\n\n return animation\n }\n\n return scopedAnimate\n}\n\nexport const animate = createScopedAnimate()\n"],"names":[],"mappings":";;;;;AAoBA,SAAS,UAAU,CAAC,KAAc,EAAA;AAC9B,IAAA,OAAO,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAC5D;AAOA;;;AAGG;AACG,SAAU,mBAAmB,CAAC,OAAA,GAAgC,EAAE,EAAA;AAClE,IAAA,MAAM,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,OAAO;AAgDvC;;AAEG;AACH,IAAA,SAAS,aAAa,CAClB,iBAQS,EACT,kBAOqB,EACrB,OAG6B,EAAA;QAE7B,IAAI,UAAU,GAAwC,EAAE;AACxD,QAAA,IAAI,mBAA6C;AAEjD,QAAA,IAAI,UAAU,CAAC,iBAAiB,CAAC,EAAE;YAC/B,MAAM,EAAE,UAAU,EAAE,GAAG,eAAe,EAAE,GACnC,kBAAsC,IAAI,EAAE;AACjD,YAAA,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;gBAClC,mBAAmB,GAAG,UAA0B;YACpD;AACA,YAAA,UAAU,GAAG,eAAe,CACxB,iBAAiB,EACjB,YAAY,KAAK;AACb,kBAAE,EAAE,YAAY,EAAE,GAAG,eAAe;AACpC,kBAAG,eAAmC,EAC1C,KAAK,CACR;QACL;aAAO;;YAEH,MAAM,EAAE,UAAU,EAAE,GAAG,IAAI,EAAE,GAAG,OAAO,IAAI,EAAE;AAC7C,YAAA,IAAI,OAAO,UAAU,KAAK,UAAU,EAAE;gBAClC,mBAAmB,GAAG,UAA0B;YACpD;YACA,UAAU,GAAG,cAAc,CACvB,iBAAsC,EACtC,kBAA4C,GAC3C,YAAY,KAAK;AACd,kBAAE,EAAE,YAAY,EAAE,GAAG,IAAI;AACzB,kBAAE,IAAI,GACV,KAAK,CACR;QACL;AAEA,QAAA,MAAM,SAAS,GAAG,IAAI,sBAAsB,CAAC,UAAU,CAAC;QAExD,IAAI,mBAAmB,EAAE;AACrB,YAAA,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAChD;QAEA,IAAI,KAAK,EAAE;AACP,YAAA,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,SAAS,CAAC;AAChC,YAAA,SAAS,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAK;AACzB,gBAAA,UAAU,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,CAAC;AAC3C,YAAA,CAAC,CAAC;QACN;AAEA,QAAA,OAAO,SAAS;IACpB;AAEA,IAAA,OAAO,aAAa;AACxB;AAEO,MAAM,OAAO,GAAG,mBAAmB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"resolve-subjects.mjs","sources":["../../../../src/animation/animate/resolve-subjects.ts"],"sourcesContent":["import {\n AnimationScope,\n DOMKeyframesDefinition,\n SelectorCache,\n resolveElements,\n} from \"motion-dom\"\nimport { ObjectTarget } from \"../sequence/types\"\nimport { isDOMKeyframes } from \"../utils/is-dom-keyframes\"\n\nexport function resolveSubjects<O extends {}>(\n subject:\n | string\n | Element\n | Element[]\n | NodeListOf<Element>\n | O\n | O[]\n | null\n | undefined,\n keyframes: DOMKeyframesDefinition | ObjectTarget<O>,\n scope?: AnimationScope,\n selectorCache?: SelectorCache\n) {\n if (subject == null) {\n return []\n }\n\n if (typeof subject === \"string\" && isDOMKeyframes(keyframes)) {\n return resolveElements(subject, scope, selectorCache)\n } else if (subject instanceof NodeList) {\n return Array.from(subject)\n } else if (Array.isArray(subject)) {\n return subject.filter((s) => s != null)\n } else {\n return [subject]\n }\n}\n"],"names":[],"mappings":";;;AASM,SAAU,eAAe,CAC3B,OAQe,EACf,SAAmD,EACnD,KAAsB,EACtB,aAA6B,EAAA;AAE7B,IAAA,IAAI,OAAO,IAAI,IAAI,EAAE;AACjB,QAAA,OAAO,EAAE
|
|
1
|
+
{"version":3,"file":"resolve-subjects.mjs","sources":["../../../../src/animation/animate/resolve-subjects.ts"],"sourcesContent":["import {\n AnimationScope,\n DOMKeyframesDefinition,\n SelectorCache,\n resolveElements,\n} from \"motion-dom\"\nimport { ObjectTarget } from \"../sequence/types\"\nimport { isDOMKeyframes } from \"../utils/is-dom-keyframes\"\n\nexport function resolveSubjects<O extends {}>(\n subject:\n | string\n | Element\n | Element[]\n | NodeListOf<Element>\n | O\n | O[]\n | null\n | undefined,\n keyframes: DOMKeyframesDefinition | ObjectTarget<O>,\n scope?: AnimationScope,\n selectorCache?: SelectorCache\n) {\n if (subject == null) {\n return []\n }\n\n if (typeof subject === \"string\" && isDOMKeyframes(keyframes)) {\n return resolveElements(subject, scope, selectorCache)\n } else if (subject instanceof NodeList) {\n return Array.from(subject)\n } else if (Array.isArray(subject)) {\n return subject.filter((s) => s != null)\n } else {\n return [subject]\n }\n}\n"],"names":[],"mappings":";;;AASM,SAAU,eAAe,CAC3B,OAQe,EACf,SAAmD,EACnD,KAAsB,EACtB,aAA6B,EAAA;AAE7B,IAAA,IAAI,OAAO,IAAI,IAAI,EAAE;AACjB,QAAA,OAAO,EAAE;IACb;IAEA,IAAI,OAAO,OAAO,KAAK,QAAQ,IAAI,cAAc,CAAC,SAAS,CAAC,EAAE;QAC1D,OAAO,eAAe,CAAC,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC;IACzD;AAAO,SAAA,IAAI,OAAO,YAAY,QAAQ,EAAE;AACpC,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC;IAC9B;AAAO,SAAA,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;AAC/B,QAAA,OAAO,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC;IAC3C;SAAO;QACH,OAAO,CAAC,OAAO,CAAC;IACpB;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sequence.mjs","sources":["../../../../src/animation/animate/sequence.ts"],"sourcesContent":["import {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n motionValue,\n spring,\n} from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../sequence/types\"\nimport { animateSubject } from \"./subject\"\n\nexport function animateSequence(\n sequence: AnimationSequence,\n options?: SequenceOptions,\n scope?: AnimationScope\n) {\n const animations: AnimationPlaybackControlsWithThen[] = []\n\n /**\n * Pre-process: replace function segments with MotionValue segments,\n * subscribe callbacks immediately\n */\n const processedSequence = sequence.map((segment) => {\n if (Array.isArray(segment) && typeof segment[0] === \"function\") {\n const callback = segment[0] as (value: any) => void\n const mv = motionValue(0)\n mv.on(\"change\", callback)\n\n if (segment.length === 1) {\n return [mv, [0, 1]] as any\n } else if (segment.length === 2) {\n return [mv, [0, 1], segment[1]] as any\n } else {\n return [mv, segment[1], segment[2]] as any\n }\n }\n return segment\n }) as AnimationSequence\n\n const animationDefinitions = createAnimationsFromSequence(\n processedSequence,\n options,\n scope,\n { spring }\n )\n\n animationDefinitions.forEach(({ keyframes, transition }, subject) => {\n animations.push(...animateSubject(subject, keyframes, transition))\n })\n\n return animations\n}\n"],"names":[],"mappings":";;;;SAUgB,eAAe,CAC3B,QAA2B,EAC3B,OAAyB,EACzB,KAAsB,EAAA;IAEtB,MAAM,UAAU,GAAwC,EAAE
|
|
1
|
+
{"version":3,"file":"sequence.mjs","sources":["../../../../src/animation/animate/sequence.ts"],"sourcesContent":["import {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n motionValue,\n spring,\n} from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../sequence/types\"\nimport { animateSubject } from \"./subject\"\n\nexport function animateSequence(\n sequence: AnimationSequence,\n options?: SequenceOptions,\n scope?: AnimationScope\n) {\n const animations: AnimationPlaybackControlsWithThen[] = []\n\n /**\n * Pre-process: replace function segments with MotionValue segments,\n * subscribe callbacks immediately\n */\n const processedSequence = sequence.map((segment) => {\n if (Array.isArray(segment) && typeof segment[0] === \"function\") {\n const callback = segment[0] as (value: any) => void\n const mv = motionValue(0)\n mv.on(\"change\", callback)\n\n if (segment.length === 1) {\n return [mv, [0, 1]] as any\n } else if (segment.length === 2) {\n return [mv, [0, 1], segment[1]] as any\n } else {\n return [mv, segment[1], segment[2]] as any\n }\n }\n return segment\n }) as AnimationSequence\n\n const animationDefinitions = createAnimationsFromSequence(\n processedSequence,\n options,\n scope,\n { spring }\n )\n\n animationDefinitions.forEach(({ keyframes, transition }, subject) => {\n animations.push(...animateSubject(subject, keyframes, transition))\n })\n\n return animations\n}\n"],"names":[],"mappings":";;;;SAUgB,eAAe,CAC3B,QAA2B,EAC3B,OAAyB,EACzB,KAAsB,EAAA;IAEtB,MAAM,UAAU,GAAwC,EAAE;AAE1D;;;AAGG;IACH,MAAM,iBAAiB,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,KAAI;AAC/C,QAAA,IAAI,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,OAAO,OAAO,CAAC,CAAC,CAAC,KAAK,UAAU,EAAE;AAC5D,YAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,CAAC,CAAyB;AACnD,YAAA,MAAM,EAAE,GAAG,WAAW,CAAC,CAAC,CAAC;AACzB,YAAA,EAAE,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;AAEzB,YAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;gBACtB,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAQ;YAC9B;AAAO,iBAAA,IAAI,OAAO,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,gBAAA,OAAO,CAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAQ;YAC1C;iBAAO;AACH,gBAAA,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAQ;YAC9C;QACJ;AACA,QAAA,OAAO,OAAO;AAClB,IAAA,CAAC,CAAsB;AAEvB,IAAA,MAAM,oBAAoB,GAAG,4BAA4B,CACrD,iBAAiB,EACjB,OAAO,EACP,KAAK,EACL,EAAE,MAAM,EAAE,CACb;AAED,IAAA,oBAAoB,CAAC,OAAO,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,OAAO,KAAI;AAChE,QAAA,UAAU,CAAC,IAAI,CAAC,GAAG,cAAc,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AACtE,IAAA,CAAC,CAAC;AAEF,IAAA,OAAO,UAAU;AACrB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"subject.mjs","sources":["../../../../src/animation/animate/subject.ts"],"sourcesContent":["import {\n animateTarget,\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n AnyResolvedKeyframe,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n isMotionValue,\n MotionValue,\n TargetAndTransition,\n UnresolvedValueKeyframe,\n ValueAnimationTransition,\n visualElementStore,\n} from \"motion-dom\"\nimport { invariant } from \"motion-utils\"\nimport { ObjectTarget } from \"../sequence/types\"\nimport {\n createDOMVisualElement,\n createObjectVisualElement,\n} from \"../utils/create-visual-element\"\nimport { isDOMKeyframes } from \"../utils/is-dom-keyframes\"\nimport { resolveSubjects } from \"./resolve-subjects\"\nimport { animateSingleValue } from \"motion-dom\"\n\nexport type AnimationSubject = Element | MotionValue<any> | any\n\nfunction isSingleValue(\n subject: unknown,\n keyframes: unknown\n): subject is MotionValue | AnyResolvedKeyframe {\n return (\n isMotionValue(subject) ||\n typeof subject === \"number\" ||\n (typeof subject === \"string\" && !isDOMKeyframes(keyframes))\n )\n}\n\n/**\n * Animate a string\n */\nexport function animateSubject(\n value: string | MotionValue<string>,\n keyframes: string | UnresolvedValueKeyframe<string>[],\n options?: ValueAnimationTransition<string>\n): AnimationPlaybackControlsWithThen[]\n/**\n * Animate a number\n */\nexport function animateSubject(\n value: number | MotionValue<number>,\n keyframes: number | UnresolvedValueKeyframe<number>[],\n options?: ValueAnimationTransition<number>\n): AnimationPlaybackControlsWithThen[]\n/**\n * Animate a Element\n */\nexport function animateSubject(\n element: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions,\n scope?: AnimationScope\n): AnimationPlaybackControlsWithThen[]\n/**\n * Animate a object\n */\nexport function animateSubject<O extends Object>(\n object: O | O[],\n keyframes: ObjectTarget<O>,\n options?: DynamicAnimationOptions\n): AnimationPlaybackControlsWithThen[]\n/**\n * Implementation\n */\nexport function animateSubject<O extends Object>(\n subject:\n | MotionValue<number>\n | MotionValue<string>\n | number\n | string\n | ElementOrSelector\n | O\n | O[],\n keyframes:\n | number\n | string\n | UnresolvedValueKeyframe<number>[]\n | UnresolvedValueKeyframe<string>[]\n | DOMKeyframesDefinition\n | ObjectTarget<O>,\n options?:\n | ValueAnimationTransition<number>\n | ValueAnimationTransition<string>\n | DynamicAnimationOptions,\n scope?: AnimationScope\n): AnimationPlaybackControlsWithThen[] {\n const animations: AnimationPlaybackControlsWithThen[] = []\n\n if (isSingleValue(subject, keyframes)) {\n animations.push(\n animateSingleValue(\n subject,\n isDOMKeyframes(keyframes)\n ? (keyframes as any).default || keyframes\n : keyframes,\n options ? (options as any).default || options : options\n )\n )\n } else {\n // Gracefully handle null/undefined subjects (e.g., from querySelector returning null)\n if (subject == null) {\n return animations\n }\n\n const subjects = resolveSubjects(\n subject,\n keyframes as DOMKeyframesDefinition,\n scope\n )\n\n const numSubjects = subjects.length\n\n invariant(\n Boolean(numSubjects),\n \"No valid elements provided.\",\n \"no-valid-elements\"\n )\n\n for (let i = 0; i < numSubjects; i++) {\n const thisSubject = subjects[i]\n\n const createVisualElement =\n thisSubject instanceof Element\n ? createDOMVisualElement\n : createObjectVisualElement\n\n if (!visualElementStore.has(thisSubject)) {\n createVisualElement(thisSubject as any)\n }\n\n const visualElement = visualElementStore.get(thisSubject)!\n const transition = { ...options }\n\n /**\n * Resolve stagger function if provided.\n */\n if (\n \"delay\" in transition &&\n typeof transition.delay === \"function\"\n ) {\n transition.delay = transition.delay(i, numSubjects)\n }\n\n animations.push(\n ...animateTarget(\n visualElement,\n { ...(keyframes as {}), transition } as TargetAndTransition,\n {}\n )\n )\n }\n }\n\n return animations\n}\n"],"names":[],"mappings":";;;;;;AA2BA,SAAS,aAAa,CAClB,OAAgB,EAChB,SAAkB,EAAA;AAElB,IAAA,QACI,aAAa,CAAC,OAAO,CAAC;QACtB,OAAO,OAAO,KAAK,QAAQ;AAC3B,SAAC,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"subject.mjs","sources":["../../../../src/animation/animate/subject.ts"],"sourcesContent":["import {\n animateTarget,\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n AnyResolvedKeyframe,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n isMotionValue,\n MotionValue,\n TargetAndTransition,\n UnresolvedValueKeyframe,\n ValueAnimationTransition,\n visualElementStore,\n} from \"motion-dom\"\nimport { invariant } from \"motion-utils\"\nimport { ObjectTarget } from \"../sequence/types\"\nimport {\n createDOMVisualElement,\n createObjectVisualElement,\n} from \"../utils/create-visual-element\"\nimport { isDOMKeyframes } from \"../utils/is-dom-keyframes\"\nimport { resolveSubjects } from \"./resolve-subjects\"\nimport { animateSingleValue } from \"motion-dom\"\n\nexport type AnimationSubject = Element | MotionValue<any> | any\n\nfunction isSingleValue(\n subject: unknown,\n keyframes: unknown\n): subject is MotionValue | AnyResolvedKeyframe {\n return (\n isMotionValue(subject) ||\n typeof subject === \"number\" ||\n (typeof subject === \"string\" && !isDOMKeyframes(keyframes))\n )\n}\n\n/**\n * Animate a string\n */\nexport function animateSubject(\n value: string | MotionValue<string>,\n keyframes: string | UnresolvedValueKeyframe<string>[],\n options?: ValueAnimationTransition<string>\n): AnimationPlaybackControlsWithThen[]\n/**\n * Animate a number\n */\nexport function animateSubject(\n value: number | MotionValue<number>,\n keyframes: number | UnresolvedValueKeyframe<number>[],\n options?: ValueAnimationTransition<number>\n): AnimationPlaybackControlsWithThen[]\n/**\n * Animate a Element\n */\nexport function animateSubject(\n element: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions,\n scope?: AnimationScope\n): AnimationPlaybackControlsWithThen[]\n/**\n * Animate a object\n */\nexport function animateSubject<O extends Object>(\n object: O | O[],\n keyframes: ObjectTarget<O>,\n options?: DynamicAnimationOptions\n): AnimationPlaybackControlsWithThen[]\n/**\n * Implementation\n */\nexport function animateSubject<O extends Object>(\n subject:\n | MotionValue<number>\n | MotionValue<string>\n | number\n | string\n | ElementOrSelector\n | O\n | O[],\n keyframes:\n | number\n | string\n | UnresolvedValueKeyframe<number>[]\n | UnresolvedValueKeyframe<string>[]\n | DOMKeyframesDefinition\n | ObjectTarget<O>,\n options?:\n | ValueAnimationTransition<number>\n | ValueAnimationTransition<string>\n | DynamicAnimationOptions,\n scope?: AnimationScope\n): AnimationPlaybackControlsWithThen[] {\n const animations: AnimationPlaybackControlsWithThen[] = []\n\n if (isSingleValue(subject, keyframes)) {\n animations.push(\n animateSingleValue(\n subject,\n isDOMKeyframes(keyframes)\n ? (keyframes as any).default || keyframes\n : keyframes,\n options ? (options as any).default || options : options\n )\n )\n } else {\n // Gracefully handle null/undefined subjects (e.g., from querySelector returning null)\n if (subject == null) {\n return animations\n }\n\n const subjects = resolveSubjects(\n subject,\n keyframes as DOMKeyframesDefinition,\n scope\n )\n\n const numSubjects = subjects.length\n\n invariant(\n Boolean(numSubjects),\n \"No valid elements provided.\",\n \"no-valid-elements\"\n )\n\n for (let i = 0; i < numSubjects; i++) {\n const thisSubject = subjects[i]\n\n const createVisualElement =\n thisSubject instanceof Element\n ? createDOMVisualElement\n : createObjectVisualElement\n\n if (!visualElementStore.has(thisSubject)) {\n createVisualElement(thisSubject as any)\n }\n\n const visualElement = visualElementStore.get(thisSubject)!\n const transition = { ...options }\n\n /**\n * Resolve stagger function if provided.\n */\n if (\n \"delay\" in transition &&\n typeof transition.delay === \"function\"\n ) {\n transition.delay = transition.delay(i, numSubjects)\n }\n\n animations.push(\n ...animateTarget(\n visualElement,\n { ...(keyframes as {}), transition } as TargetAndTransition,\n {}\n )\n )\n }\n }\n\n return animations\n}\n"],"names":[],"mappings":";;;;;;AA2BA,SAAS,aAAa,CAClB,OAAgB,EAChB,SAAkB,EAAA;AAElB,IAAA,QACI,aAAa,CAAC,OAAO,CAAC;QACtB,OAAO,OAAO,KAAK,QAAQ;AAC3B,SAAC,OAAO,OAAO,KAAK,QAAQ,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,CAAC;AAEnE;AAmCA;;AAEG;AACG,SAAU,cAAc,CAC1B,OAOS,EACT,SAMqB,EACrB,OAG6B,EAC7B,KAAsB,EAAA;IAEtB,MAAM,UAAU,GAAwC,EAAE;AAE1D,IAAA,IAAI,aAAa,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE;QACnC,UAAU,CAAC,IAAI,CACX,kBAAkB,CACd,OAAO,EACP,cAAc,CAAC,SAAS;AACpB,cAAG,SAAiB,CAAC,OAAO,IAAI;AAChC,cAAE,SAAS,EACf,OAAO,GAAI,OAAe,CAAC,OAAO,IAAI,OAAO,GAAG,OAAO,CAC1D,CACJ;IACL;SAAO;;AAEH,QAAA,IAAI,OAAO,IAAI,IAAI,EAAE;AACjB,YAAA,OAAO,UAAU;QACrB;QAEA,MAAM,QAAQ,GAAG,eAAe,CAC5B,OAAO,EACP,SAAmC,EACnC,KAAK,CACR;AAED,QAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,MAAM;QAEnC,SAAS,CACL,OAAO,CAAC,WAAW,CAAC,EACpB,6BAA6B,EAC7B,mBAAmB,CACtB;AAED,QAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,WAAW,EAAE,CAAC,EAAE,EAAE;AAClC,YAAA,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC;AAE/B,YAAA,MAAM,mBAAmB,GACrB,WAAW,YAAY;AACnB,kBAAE;kBACA,yBAAyB;YAEnC,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE;gBACtC,mBAAmB,CAAC,WAAkB,CAAC;YAC3C;YAEA,MAAM,aAAa,GAAG,kBAAkB,CAAC,GAAG,CAAC,WAAW,CAAE;AAC1D,YAAA,MAAM,UAAU,GAAG,EAAE,GAAG,OAAO,EAAE;AAEjC;;AAEG;YACH,IACI,OAAO,IAAI,UAAU;AACrB,gBAAA,OAAO,UAAU,CAAC,KAAK,KAAK,UAAU,EACxC;gBACE,UAAU,CAAC,KAAK,GAAG,UAAU,CAAC,KAAK,CAAC,CAAC,EAAE,WAAW,CAAC;YACvD;AAEA,YAAA,UAAU,CAAC,IAAI,CACX,GAAG,aAAa,CACZ,aAAa,EACb,EAAE,GAAI,SAAgB,EAAE,UAAU,EAAyB,EAC3D,EAAE,CACL,CACJ;QACL;IACJ;AAEA,IAAA,OAAO,UAAU;AACrB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate-elements.mjs","sources":["../../../../../src/animation/animators/waapi/animate-elements.ts"],"sourcesContent":["import {\n animationMapKey,\n AnimationPlaybackControls,\n AnimationScope,\n applyPxDefaults,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n fillWildcards,\n getAnimationMap,\n getComputedStyle,\n getValueTransition,\n NativeAnimation,\n NativeAnimationOptions,\n resolveElements,\n UnresolvedValueKeyframe,\n ValueKeyframe,\n} from \"motion-dom\"\nimport { invariant, secondsToMilliseconds } from \"motion-utils\"\n\ninterface AnimationDefinition {\n map: Map<string, NativeAnimation<any>>\n key: string\n unresolvedKeyframes: UnresolvedValueKeyframe[]\n options: Omit<NativeAnimationOptions, \"keyframes\"> & {\n keyframes?: ValueKeyframe[]\n }\n}\n\nexport function animateElements(\n elementOrSelector: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions,\n scope?: AnimationScope\n) {\n // Gracefully handle null/undefined elements (e.g., from querySelector returning null)\n if (elementOrSelector == null) {\n return []\n }\n\n const elements = resolveElements(elementOrSelector, scope) as Array<\n HTMLElement | SVGElement\n >\n const numElements = elements.length\n\n invariant(\n Boolean(numElements),\n \"No valid elements provided.\",\n \"no-valid-elements\"\n )\n\n /**\n * WAAPI doesn't support interrupting animations.\n *\n * Therefore, starting animations requires a three-step process:\n * 1. Stop existing animations (write styles to DOM)\n * 2. Resolve keyframes (read styles from DOM)\n * 3. Create new animations (write styles to DOM)\n *\n * The hybrid `animate()` function uses AsyncAnimation to resolve\n * keyframes before creating new animations, which removes style\n * thrashing. Here, we have much stricter filesize constraints.\n * Therefore we do this in a synchronous way that ensures that\n * at least within `animate()` calls there is no style thrashing.\n *\n * In the motion-native-animate-mini-interrupt benchmark this\n * was 80% faster than a single loop.\n */\n const animationDefinitions: AnimationDefinition[] = []\n\n /**\n * Step 1: Build options and stop existing animations (write)\n */\n for (let i = 0; i < numElements; i++) {\n const element = elements[i]\n const elementTransition: DynamicAnimationOptions = { ...options }\n\n /**\n * Resolve stagger function if provided.\n */\n if (typeof elementTransition.delay === \"function\") {\n elementTransition.delay = elementTransition.delay(i, numElements)\n }\n\n for (const valueName in keyframes) {\n let valueKeyframes = keyframes[valueName as keyof typeof keyframes]!\n\n if (!Array.isArray(valueKeyframes)) {\n valueKeyframes = [valueKeyframes]\n }\n\n const valueOptions = {\n ...getValueTransition(elementTransition as any, valueName),\n }\n\n valueOptions.duration &&= secondsToMilliseconds(\n valueOptions.duration\n )\n\n valueOptions.delay &&= secondsToMilliseconds(valueOptions.delay)\n\n /**\n * If there's an existing animation playing on this element then stop it\n * before creating a new one.\n */\n const map = getAnimationMap(element)\n const key = animationMapKey(\n valueName,\n valueOptions.pseudoElement || \"\"\n )\n const currentAnimation = map.get(key)\n currentAnimation && currentAnimation.stop()\n\n animationDefinitions.push({\n map,\n key,\n unresolvedKeyframes: valueKeyframes,\n options: {\n ...valueOptions,\n element,\n name: valueName,\n allowFlatten:\n !elementTransition.type && !elementTransition.ease,\n },\n })\n }\n }\n\n /**\n * Step 2: Resolve keyframes (read)\n */\n for (let i = 0; i < animationDefinitions.length; i++) {\n const { unresolvedKeyframes, options: animationOptions } =\n animationDefinitions[i]\n\n const { element, name, pseudoElement } = animationOptions\n if (!pseudoElement && unresolvedKeyframes[0] === null) {\n unresolvedKeyframes[0] = getComputedStyle(element, name)\n }\n\n fillWildcards(unresolvedKeyframes)\n applyPxDefaults(unresolvedKeyframes, name)\n\n /**\n * If we only have one keyframe, explicitly read the initial keyframe\n * from the computed style. This is to ensure consistency with WAAPI behaviour\n * for restarting animations, for instance .play() after finish, when it\n * has one vs two keyframes.\n */\n if (!pseudoElement && unresolvedKeyframes.length < 2) {\n unresolvedKeyframes.unshift(getComputedStyle(element, name))\n }\n\n animationOptions.keyframes = unresolvedKeyframes as ValueKeyframe[]\n }\n\n /**\n * Step 3: Create new animations (write)\n */\n const animations: AnimationPlaybackControls[] = []\n for (let i = 0; i < animationDefinitions.length; i++) {\n const { map, key, options: animationOptions } = animationDefinitions[i]\n const animation = new NativeAnimation(\n animationOptions as NativeAnimationOptions\n )\n\n map.set(key, animation)\n animation.finished.finally(() => map.delete(key))\n\n animations.push(animation)\n }\n\n return animations\n}\n"],"names":[],"mappings":";;;AA6BM,SAAU,eAAe,CAC3B,iBAAoC,EACpC,SAAiC,EACjC,OAAiC,EACjC,KAAsB,EAAA;;AAGtB,IAAA,IAAI,iBAAiB,IAAI,IAAI,EAAE;AAC3B,QAAA,OAAO,EAAE
|
|
1
|
+
{"version":3,"file":"animate-elements.mjs","sources":["../../../../../src/animation/animators/waapi/animate-elements.ts"],"sourcesContent":["import {\n animationMapKey,\n AnimationPlaybackControls,\n AnimationScope,\n applyPxDefaults,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n fillWildcards,\n getAnimationMap,\n getComputedStyle,\n getValueTransition,\n NativeAnimation,\n NativeAnimationOptions,\n resolveElements,\n UnresolvedValueKeyframe,\n ValueKeyframe,\n} from \"motion-dom\"\nimport { invariant, secondsToMilliseconds } from \"motion-utils\"\n\ninterface AnimationDefinition {\n map: Map<string, NativeAnimation<any>>\n key: string\n unresolvedKeyframes: UnresolvedValueKeyframe[]\n options: Omit<NativeAnimationOptions, \"keyframes\"> & {\n keyframes?: ValueKeyframe[]\n }\n}\n\nexport function animateElements(\n elementOrSelector: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions,\n scope?: AnimationScope\n) {\n // Gracefully handle null/undefined elements (e.g., from querySelector returning null)\n if (elementOrSelector == null) {\n return []\n }\n\n const elements = resolveElements(elementOrSelector, scope) as Array<\n HTMLElement | SVGElement\n >\n const numElements = elements.length\n\n invariant(\n Boolean(numElements),\n \"No valid elements provided.\",\n \"no-valid-elements\"\n )\n\n /**\n * WAAPI doesn't support interrupting animations.\n *\n * Therefore, starting animations requires a three-step process:\n * 1. Stop existing animations (write styles to DOM)\n * 2. Resolve keyframes (read styles from DOM)\n * 3. Create new animations (write styles to DOM)\n *\n * The hybrid `animate()` function uses AsyncAnimation to resolve\n * keyframes before creating new animations, which removes style\n * thrashing. Here, we have much stricter filesize constraints.\n * Therefore we do this in a synchronous way that ensures that\n * at least within `animate()` calls there is no style thrashing.\n *\n * In the motion-native-animate-mini-interrupt benchmark this\n * was 80% faster than a single loop.\n */\n const animationDefinitions: AnimationDefinition[] = []\n\n /**\n * Step 1: Build options and stop existing animations (write)\n */\n for (let i = 0; i < numElements; i++) {\n const element = elements[i]\n const elementTransition: DynamicAnimationOptions = { ...options }\n\n /**\n * Resolve stagger function if provided.\n */\n if (typeof elementTransition.delay === \"function\") {\n elementTransition.delay = elementTransition.delay(i, numElements)\n }\n\n for (const valueName in keyframes) {\n let valueKeyframes = keyframes[valueName as keyof typeof keyframes]!\n\n if (!Array.isArray(valueKeyframes)) {\n valueKeyframes = [valueKeyframes]\n }\n\n const valueOptions = {\n ...getValueTransition(elementTransition as any, valueName),\n }\n\n valueOptions.duration &&= secondsToMilliseconds(\n valueOptions.duration\n )\n\n valueOptions.delay &&= secondsToMilliseconds(valueOptions.delay)\n\n /**\n * If there's an existing animation playing on this element then stop it\n * before creating a new one.\n */\n const map = getAnimationMap(element)\n const key = animationMapKey(\n valueName,\n valueOptions.pseudoElement || \"\"\n )\n const currentAnimation = map.get(key)\n currentAnimation && currentAnimation.stop()\n\n animationDefinitions.push({\n map,\n key,\n unresolvedKeyframes: valueKeyframes,\n options: {\n ...valueOptions,\n element,\n name: valueName,\n allowFlatten:\n !elementTransition.type && !elementTransition.ease,\n },\n })\n }\n }\n\n /**\n * Step 2: Resolve keyframes (read)\n */\n for (let i = 0; i < animationDefinitions.length; i++) {\n const { unresolvedKeyframes, options: animationOptions } =\n animationDefinitions[i]\n\n const { element, name, pseudoElement } = animationOptions\n if (!pseudoElement && unresolvedKeyframes[0] === null) {\n unresolvedKeyframes[0] = getComputedStyle(element, name)\n }\n\n fillWildcards(unresolvedKeyframes)\n applyPxDefaults(unresolvedKeyframes, name)\n\n /**\n * If we only have one keyframe, explicitly read the initial keyframe\n * from the computed style. This is to ensure consistency with WAAPI behaviour\n * for restarting animations, for instance .play() after finish, when it\n * has one vs two keyframes.\n */\n if (!pseudoElement && unresolvedKeyframes.length < 2) {\n unresolvedKeyframes.unshift(getComputedStyle(element, name))\n }\n\n animationOptions.keyframes = unresolvedKeyframes as ValueKeyframe[]\n }\n\n /**\n * Step 3: Create new animations (write)\n */\n const animations: AnimationPlaybackControls[] = []\n for (let i = 0; i < animationDefinitions.length; i++) {\n const { map, key, options: animationOptions } = animationDefinitions[i]\n const animation = new NativeAnimation(\n animationOptions as NativeAnimationOptions\n )\n\n map.set(key, animation)\n animation.finished.finally(() => map.delete(key))\n\n animations.push(animation)\n }\n\n return animations\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate-sequence.mjs","sources":["../../../../../src/animation/animators/waapi/animate-sequence.ts"],"sourcesContent":["import { AnimationPlaybackControls, GroupAnimationWithThen } from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../../sequence/types\"\nimport { animateElements } from \"./animate-elements\"\n\nexport function animateSequence(\n definition: AnimationSequence,\n options?: SequenceOptions\n) {\n const animations: AnimationPlaybackControls[] = []\n\n createAnimationsFromSequence(definition, options).forEach(\n ({ keyframes, transition }, element: Element) => {\n animations.push(...animateElements(element, keyframes, transition))\n }\n )\n\n return new GroupAnimationWithThen(animations)\n}\n"],"names":[],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"animate-sequence.mjs","sources":["../../../../../src/animation/animators/waapi/animate-sequence.ts"],"sourcesContent":["import { AnimationPlaybackControls, GroupAnimationWithThen } from \"motion-dom\"\nimport { createAnimationsFromSequence } from \"../../sequence/create\"\nimport { AnimationSequence, SequenceOptions } from \"../../sequence/types\"\nimport { animateElements } from \"./animate-elements\"\n\nexport function animateSequence(\n definition: AnimationSequence,\n options?: SequenceOptions\n) {\n const animations: AnimationPlaybackControls[] = []\n\n createAnimationsFromSequence(definition, options).forEach(\n ({ keyframes, transition }, element: Element) => {\n animations.push(...animateElements(element, keyframes, transition))\n }\n )\n\n return new GroupAnimationWithThen(animations)\n}\n"],"names":[],"mappings":";;;;AAKM,SAAU,eAAe,CAC3B,UAA6B,EAC7B,OAAyB,EAAA;IAEzB,MAAM,UAAU,GAAgC,EAAE;AAElD,IAAA,4BAA4B,CAAC,UAAU,EAAE,OAAO,CAAC,CAAC,OAAO,CACrD,CAAC,EAAE,SAAS,EAAE,UAAU,EAAE,EAAE,OAAgB,KAAI;AAC5C,QAAA,UAAU,CAAC,IAAI,CAAC,GAAG,eAAe,CAAC,OAAO,EAAE,SAAS,EAAE,UAAU,CAAC,CAAC;AACvE,IAAA,CAAC,CACJ;AAED,IAAA,OAAO,IAAI,sBAAsB,CAAC,UAAU,CAAC;AACjD;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animate-style.mjs","sources":["../../../../../src/animation/animators/waapi/animate-style.ts"],"sourcesContent":["import {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n GroupAnimationWithThen,\n} from \"motion-dom\"\nimport { animateElements } from \"./animate-elements\"\n\nexport const createScopedWaapiAnimate = (scope?: AnimationScope) => {\n function scopedAnimate(\n elementOrSelector: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen {\n return new GroupAnimationWithThen(\n animateElements(\n elementOrSelector,\n keyframes as DOMKeyframesDefinition,\n options,\n scope\n )\n )\n }\n\n return scopedAnimate\n}\n\nexport const animateMini = /*@__PURE__*/ createScopedWaapiAnimate()\n"],"names":[],"mappings":";;;
|
|
1
|
+
{"version":3,"file":"animate-style.mjs","sources":["../../../../../src/animation/animators/waapi/animate-style.ts"],"sourcesContent":["import {\n AnimationPlaybackControlsWithThen,\n AnimationScope,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n ElementOrSelector,\n GroupAnimationWithThen,\n} from \"motion-dom\"\nimport { animateElements } from \"./animate-elements\"\n\nexport const createScopedWaapiAnimate = (scope?: AnimationScope) => {\n function scopedAnimate(\n elementOrSelector: ElementOrSelector,\n keyframes: DOMKeyframesDefinition,\n options?: DynamicAnimationOptions\n ): AnimationPlaybackControlsWithThen {\n return new GroupAnimationWithThen(\n animateElements(\n elementOrSelector,\n keyframes as DOMKeyframesDefinition,\n options,\n scope\n )\n )\n }\n\n return scopedAnimate\n}\n\nexport const animateMini = /*@__PURE__*/ createScopedWaapiAnimate()\n"],"names":[],"mappings":";;;AAUO,MAAM,wBAAwB,GAAG,CAAC,KAAsB,KAAI;AAC/D,IAAA,SAAS,aAAa,CAClB,iBAAoC,EACpC,SAAiC,EACjC,OAAiC,EAAA;AAEjC,QAAA,OAAO,IAAI,sBAAsB,CAC7B,eAAe,CACX,iBAAiB,EACjB,SAAmC,EACnC,OAAO,EACP,KAAK,CACR,CACJ;IACL;AAEA,IAAA,OAAO,aAAa;AACxB;MAEa,WAAW,iBAAiB,wBAAwB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"animation-controls.mjs","sources":["../../../../src/animation/hooks/animation-controls.ts"],"sourcesContent":["import {\n animateVisualElement,\n setTarget,\n type AnimationDefinition,\n type LegacyAnimationControls,\n type VisualElement,\n} from \"motion-dom\"\nimport { invariant } from \"motion-utils\"\n\nfunction stopAnimation(visualElement: VisualElement) {\n visualElement.values.forEach((value) => value.stop())\n}\n\nfunction setVariants(visualElement: VisualElement, variantLabels: string[]) {\n const reversedLabels = [...variantLabels].reverse()\n\n reversedLabels.forEach((key) => {\n const variant = visualElement.getVariant(key)\n variant && setTarget(visualElement, variant)\n\n if (visualElement.variantChildren) {\n visualElement.variantChildren.forEach((child) => {\n setVariants(child, variantLabels)\n })\n }\n })\n}\n\nexport function setValues(\n visualElement: VisualElement,\n definition: AnimationDefinition\n) {\n if (Array.isArray(definition)) {\n return setVariants(visualElement, definition)\n } else if (typeof definition === \"string\") {\n return setVariants(visualElement, [definition])\n } else {\n setTarget(visualElement, definition as any)\n }\n}\n\n/**\n * @public\n */\nexport function animationControls(): LegacyAnimationControls {\n /**\n * Track whether the host component has mounted.\n */\n let hasMounted = false\n\n /**\n * A collection of linked component animation controls.\n */\n const subscribers = new Set<VisualElement>()\n\n const controls: LegacyAnimationControls = {\n subscribe(visualElement) {\n subscribers.add(visualElement)\n return () => void subscribers.delete(visualElement)\n },\n\n start(definition, transitionOverride) {\n invariant(\n hasMounted,\n \"controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.\"\n )\n\n const animations: Array<Promise<any>> = []\n subscribers.forEach((visualElement) => {\n animations.push(\n animateVisualElement(visualElement, definition, {\n transitionOverride,\n })\n )\n })\n\n return Promise.all(animations)\n },\n\n set(definition) {\n invariant(\n hasMounted,\n \"controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.\"\n )\n\n return subscribers.forEach((visualElement) => {\n setValues(visualElement, definition)\n })\n },\n\n stop() {\n subscribers.forEach((visualElement) => {\n stopAnimation(visualElement)\n })\n },\n\n mount() {\n hasMounted = true\n\n return () => {\n hasMounted = false\n controls.stop()\n }\n },\n }\n\n return controls\n}\n"],"names":[],"mappings":";;;AASA,SAAS,aAAa,CAAC,aAA4B,EAAA;AAC/C,IAAA,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC
|
|
1
|
+
{"version":3,"file":"animation-controls.mjs","sources":["../../../../src/animation/hooks/animation-controls.ts"],"sourcesContent":["import {\n animateVisualElement,\n setTarget,\n type AnimationDefinition,\n type LegacyAnimationControls,\n type VisualElement,\n} from \"motion-dom\"\nimport { invariant } from \"motion-utils\"\n\nfunction stopAnimation(visualElement: VisualElement) {\n visualElement.values.forEach((value) => value.stop())\n}\n\nfunction setVariants(visualElement: VisualElement, variantLabels: string[]) {\n const reversedLabels = [...variantLabels].reverse()\n\n reversedLabels.forEach((key) => {\n const variant = visualElement.getVariant(key)\n variant && setTarget(visualElement, variant)\n\n if (visualElement.variantChildren) {\n visualElement.variantChildren.forEach((child) => {\n setVariants(child, variantLabels)\n })\n }\n })\n}\n\nexport function setValues(\n visualElement: VisualElement,\n definition: AnimationDefinition\n) {\n if (Array.isArray(definition)) {\n return setVariants(visualElement, definition)\n } else if (typeof definition === \"string\") {\n return setVariants(visualElement, [definition])\n } else {\n setTarget(visualElement, definition as any)\n }\n}\n\n/**\n * @public\n */\nexport function animationControls(): LegacyAnimationControls {\n /**\n * Track whether the host component has mounted.\n */\n let hasMounted = false\n\n /**\n * A collection of linked component animation controls.\n */\n const subscribers = new Set<VisualElement>()\n\n const controls: LegacyAnimationControls = {\n subscribe(visualElement) {\n subscribers.add(visualElement)\n return () => void subscribers.delete(visualElement)\n },\n\n start(definition, transitionOverride) {\n invariant(\n hasMounted,\n \"controls.start() should only be called after a component has mounted. Consider calling within a useEffect hook.\"\n )\n\n const animations: Array<Promise<any>> = []\n subscribers.forEach((visualElement) => {\n animations.push(\n animateVisualElement(visualElement, definition, {\n transitionOverride,\n })\n )\n })\n\n return Promise.all(animations)\n },\n\n set(definition) {\n invariant(\n hasMounted,\n \"controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.\"\n )\n\n return subscribers.forEach((visualElement) => {\n setValues(visualElement, definition)\n })\n },\n\n stop() {\n subscribers.forEach((visualElement) => {\n stopAnimation(visualElement)\n })\n },\n\n mount() {\n hasMounted = true\n\n return () => {\n hasMounted = false\n controls.stop()\n }\n },\n }\n\n return controls\n}\n"],"names":[],"mappings":";;;AASA,SAAS,aAAa,CAAC,aAA4B,EAAA;AAC/C,IAAA,aAAa,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,KAAK,KAAK,CAAC,IAAI,EAAE,CAAC;AACzD;AAEA,SAAS,WAAW,CAAC,aAA4B,EAAE,aAAuB,EAAA;IACtE,MAAM,cAAc,GAAG,CAAC,GAAG,aAAa,CAAC,CAAC,OAAO,EAAE;AAEnD,IAAA,cAAc,CAAC,OAAO,CAAC,CAAC,GAAG,KAAI;QAC3B,MAAM,OAAO,GAAG,aAAa,CAAC,UAAU,CAAC,GAAG,CAAC;AAC7C,QAAA,OAAO,IAAI,SAAS,CAAC,aAAa,EAAE,OAAO,CAAC;AAE5C,QAAA,IAAI,aAAa,CAAC,eAAe,EAAE;YAC/B,aAAa,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,KAAK,KAAI;AAC5C,gBAAA,WAAW,CAAC,KAAK,EAAE,aAAa,CAAC;AACrC,YAAA,CAAC,CAAC;QACN;AACJ,IAAA,CAAC,CAAC;AACN;AAEM,SAAU,SAAS,CACrB,aAA4B,EAC5B,UAA+B,EAAA;AAE/B,IAAA,IAAI,KAAK,CAAC,OAAO,CAAC,UAAU,CAAC,EAAE;AAC3B,QAAA,OAAO,WAAW,CAAC,aAAa,EAAE,UAAU,CAAC;IACjD;AAAO,SAAA,IAAI,OAAO,UAAU,KAAK,QAAQ,EAAE;QACvC,OAAO,WAAW,CAAC,aAAa,EAAE,CAAC,UAAU,CAAC,CAAC;IACnD;SAAO;AACH,QAAA,SAAS,CAAC,aAAa,EAAE,UAAiB,CAAC;IAC/C;AACJ;AAEA;;AAEG;SACa,iBAAiB,GAAA;AAC7B;;AAEG;IACH,IAAI,UAAU,GAAG,KAAK;AAEtB;;AAEG;AACH,IAAA,MAAM,WAAW,GAAG,IAAI,GAAG,EAAiB;AAE5C,IAAA,MAAM,QAAQ,GAA4B;AACtC,QAAA,SAAS,CAAC,aAAa,EAAA;AACnB,YAAA,WAAW,CAAC,GAAG,CAAC,aAAa,CAAC;YAC9B,OAAO,MAAM,KAAK,WAAW,CAAC,MAAM,CAAC,aAAa,CAAC;QACvD,CAAC;QAED,KAAK,CAAC,UAAU,EAAE,kBAAkB,EAAA;AAChC,YAAA,SAAS,CACL,UAAU,EACV,iHAAiH,CACpH;YAED,MAAM,UAAU,GAAwB,EAAE;AAC1C,YAAA,WAAW,CAAC,OAAO,CAAC,CAAC,aAAa,KAAI;gBAClC,UAAU,CAAC,IAAI,CACX,oBAAoB,CAAC,aAAa,EAAE,UAAU,EAAE;oBAC5C,kBAAkB;AACrB,iBAAA,CAAC,CACL;AACL,YAAA,CAAC,CAAC;AAEF,YAAA,OAAO,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;QAClC,CAAC;AAED,QAAA,GAAG,CAAC,UAAU,EAAA;AACV,YAAA,SAAS,CACL,UAAU,EACV,+GAA+G,CAClH;AAED,YAAA,OAAO,WAAW,CAAC,OAAO,CAAC,CAAC,aAAa,KAAI;AACzC,gBAAA,SAAS,CAAC,aAAa,EAAE,UAAU,CAAC;AACxC,YAAA,CAAC,CAAC;QACN,CAAC;QAED,IAAI,GAAA;AACA,YAAA,WAAW,CAAC,OAAO,CAAC,CAAC,aAAa,KAAI;gBAClC,aAAa,CAAC,aAAa,CAAC;AAChC,YAAA,CAAC,CAAC;QACN,CAAC;QAED,KAAK,GAAA;YACD,UAAU,GAAG,IAAI;AAEjB,YAAA,OAAO,MAAK;gBACR,UAAU,GAAG,KAAK;gBAClB,QAAQ,CAAC,IAAI,EAAE;AACnB,YAAA,CAAC;QACL,CAAC;KACJ;AAED,IAAA,OAAO,QAAQ;AACnB;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"handoff.mjs","sources":["../../../../src/animation/optimized-appear/handoff.ts"],"sourcesContent":["import type { Batcher } from \"motion-dom\"\nimport { appearAnimationStore } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\n\nexport function handoffOptimizedAppearAnimation(\n elementId: string,\n valueName: string,\n frame: Batcher\n): number | null {\n const storeId = appearStoreId(elementId, valueName)\n const optimisedAnimation = appearAnimationStore.get(storeId)\n\n if (!optimisedAnimation) {\n return null\n }\n\n const { animation, startTime } = optimisedAnimation\n\n function cancelAnimation() {\n window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame)\n }\n\n /**\n * We can cancel the animation once it's finished now that we've synced\n * with Motion.\n *\n * Prefer onfinish over finished as onfinish is backwards compatible with\n * older browsers.\n */\n animation.onfinish = cancelAnimation\n\n if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {\n /**\n * If the startTime is null, this animation is the Paint Ready detection animation\n * and we can cancel it immediately without handoff.\n *\n * Or if we've already handed off the animation then we're now interrupting it.\n * In which case we need to cancel it.\n */\n cancelAnimation()\n return null\n } else {\n return startTime\n }\n}\n"],"names":[],"mappings":";;;SAIgB,+BAA+B,CAC3C,SAAiB,EACjB,SAAiB,EACjB,KAAc,EAAA;IAEd,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"handoff.mjs","sources":["../../../../src/animation/optimized-appear/handoff.ts"],"sourcesContent":["import type { Batcher } from \"motion-dom\"\nimport { appearAnimationStore } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\n\nexport function handoffOptimizedAppearAnimation(\n elementId: string,\n valueName: string,\n frame: Batcher\n): number | null {\n const storeId = appearStoreId(elementId, valueName)\n const optimisedAnimation = appearAnimationStore.get(storeId)\n\n if (!optimisedAnimation) {\n return null\n }\n\n const { animation, startTime } = optimisedAnimation\n\n function cancelAnimation() {\n window.MotionCancelOptimisedAnimation?.(elementId, valueName, frame)\n }\n\n /**\n * We can cancel the animation once it's finished now that we've synced\n * with Motion.\n *\n * Prefer onfinish over finished as onfinish is backwards compatible with\n * older browsers.\n */\n animation.onfinish = cancelAnimation\n\n if (startTime === null || window.MotionHandoffIsComplete?.(elementId)) {\n /**\n * If the startTime is null, this animation is the Paint Ready detection animation\n * and we can cancel it immediately without handoff.\n *\n * Or if we've already handed off the animation then we're now interrupting it.\n * In which case we need to cancel it.\n */\n cancelAnimation()\n return null\n } else {\n return startTime\n }\n}\n"],"names":[],"mappings":";;;SAIgB,+BAA+B,CAC3C,SAAiB,EACjB,SAAiB,EACjB,KAAc,EAAA;IAEd,MAAM,OAAO,GAAG,aAAa,CAAC,SAAS,EAAE,SAAS,CAAC;IACnD,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC;IAE5D,IAAI,CAAC,kBAAkB,EAAE;AACrB,QAAA,OAAO,IAAI;IACf;AAEA,IAAA,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,kBAAkB;AAEnD,IAAA,SAAS,eAAe,GAAA;QACpB,MAAM,CAAC,8BAA8B,GAAG,SAAS,EAAE,SAAS,EAAE,KAAK,CAAC;IACxE;AAEA;;;;;;AAMG;AACH,IAAA,SAAS,CAAC,QAAQ,GAAG,eAAe;AAEpC,IAAA,IAAI,SAAS,KAAK,IAAI,IAAI,MAAM,CAAC,uBAAuB,GAAG,SAAS,CAAC,EAAE;AACnE;;;;;;AAMG;AACH,QAAA,eAAe,EAAE;AACjB,QAAA,OAAO,IAAI;IACf;SAAO;AACH,QAAA,OAAO,SAAS;IACpB;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"start.mjs","sources":["../../../../src/animation/optimized-appear/start.ts"],"sourcesContent":["import {\n AnyResolvedKeyframe,\n Batcher,\n getOptimisedAppearId,\n MotionValue,\n optimizedAppearDataId,\n startWaapiAnimation,\n ValueAnimationTransition,\n type WithAppearProps,\n} from \"motion-dom\"\nimport { noop } from \"motion-utils\"\nimport { handoffOptimizedAppearAnimation } from \"./handoff\"\nimport { appearAnimationStore, appearComplete, AppearStoreEntry } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\n\n/**\n * A single time to use across all animations to manually set startTime\n * and ensure they're all in sync.\n */\nlet startFrameTime: number\n\n/**\n * A dummy animation to detect when Chrome is ready to start\n * painting the page and hold off from triggering the real animation\n * until then. We only need one animation to detect paint ready.\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850\n */\nlet readyAnimation: Animation\n\n/**\n * Keep track of animations that were suspended vs cancelled so we\n * can easily resume them when we're done measuring layout.\n */\nconst suspendedAnimations = new Set<AppearStoreEntry>()\n\nfunction resumeSuspendedAnimations() {\n suspendedAnimations.forEach((data) => {\n data.animation.play()\n data.animation.startTime = data.startTime\n })\n suspendedAnimations.clear()\n}\n\nexport function startOptimizedAppearAnimation(\n element: HTMLElement,\n name: string,\n keyframes: string[] | number[],\n options: ValueAnimationTransition<number | string>,\n onReady?: (animation: Animation) => void\n): void {\n // Prevent optimised appear animations if Motion has already started animating.\n if (window.MotionIsMounted) {\n return\n }\n\n const id = element.dataset[optimizedAppearDataId]\n if (!id) return\n\n window.MotionHandoffAnimation = handoffOptimizedAppearAnimation\n\n const storeId = appearStoreId(id, name)\n if (!readyAnimation) {\n readyAnimation = startWaapiAnimation(\n element,\n name,\n [keyframes[0] as number, keyframes[0] as number],\n /**\n * 10 secs is basically just a super-safe duration to give Chrome\n * long enough to get the animation ready.\n */\n { duration: 10000, ease: \"linear\" }\n )\n\n appearAnimationStore.set(storeId, {\n animation: readyAnimation,\n startTime: null,\n })\n\n /**\n * If there's no readyAnimation then there's been no instantiation\n * of handoff animations.\n */\n window.MotionHandoffAnimation = handoffOptimizedAppearAnimation\n\n window.MotionHasOptimisedAnimation = (\n elementId?: string,\n valueName?: string\n ) => {\n if (!elementId) return false\n\n /**\n * Keep a map of elementIds that have started animating. We check\n * via ID instead of Element because of hydration errors and\n * pre-hydration checks. We also actively record IDs as they start\n * animating rather than simply checking for data-appear-id as\n * this attrbute might be present but not lead to an animation, for\n * instance if the element's appear animation is on a different\n * breakpoint.\n */\n if (!valueName) {\n return appearComplete.has(elementId)\n }\n\n const animationId = appearStoreId(elementId, valueName)\n return Boolean(appearAnimationStore.get(animationId))\n }\n\n window.MotionHandoffMarkAsComplete = (elementId: string): void => {\n if (appearComplete.has(elementId)) {\n appearComplete.set(elementId, true)\n }\n }\n\n window.MotionHandoffIsComplete = (elementId: string): boolean => {\n return appearComplete.get(elementId) === true\n }\n\n /**\n * We only need to cancel transform animations as\n * they're the ones that will interfere with the\n * layout animation measurements.\n */\n window.MotionCancelOptimisedAnimation = (\n elementId: string,\n valueName: string,\n frame?: Batcher,\n canResume?: boolean\n ) => {\n const animationId = appearStoreId(elementId, valueName)\n const data = appearAnimationStore.get(animationId)\n\n if (!data) return\n\n if (frame && canResume === undefined) {\n /**\n * Wait until the end of the subsequent frame to cancel the animation\n * to ensure we don't remove the animation before the main thread has\n * had a chance to resolve keyframes and render.\n */\n frame.postRender(() => {\n frame.postRender(() => {\n data.animation.cancel()\n })\n })\n } else {\n data.animation.cancel()\n }\n\n if (frame && canResume) {\n suspendedAnimations.add(data)\n frame.render(resumeSuspendedAnimations)\n } else {\n appearAnimationStore.delete(animationId)\n\n /**\n * If there are no more animations left, we can remove the cancel function.\n * This will let us know when we can stop checking for conflicting layout animations.\n */\n if (!appearAnimationStore.size) {\n window.MotionCancelOptimisedAnimation = undefined\n }\n }\n }\n\n window.MotionCheckAppearSync = (\n visualElement: WithAppearProps,\n valueName: string,\n value: MotionValue\n ) => {\n const appearId = getOptimisedAppearId(visualElement)\n\n if (!appearId) return\n\n const valueIsOptimised = window.MotionHasOptimisedAnimation?.(\n appearId,\n valueName\n )\n const externalAnimationValue =\n visualElement.props.values?.[valueName]\n\n if (!valueIsOptimised || !externalAnimationValue) return\n\n const removeSyncCheck = value.on(\n \"change\",\n (latestValue: AnyResolvedKeyframe) => {\n if (externalAnimationValue.get() !== latestValue) {\n window.MotionCancelOptimisedAnimation?.(\n appearId,\n valueName\n )\n removeSyncCheck()\n }\n }\n )\n\n return removeSyncCheck\n }\n }\n\n const startAnimation = () => {\n readyAnimation.cancel()\n\n const appearAnimation = startWaapiAnimation(\n element,\n name,\n keyframes,\n options\n )\n\n /**\n * Record the time of the first started animation. We call performance.now() once\n * here and once in handoff to ensure we're getting\n * close to a frame-locked time. This keeps all animations in sync.\n */\n if (startFrameTime === undefined) {\n startFrameTime = performance.now()\n }\n\n appearAnimation.startTime = startFrameTime\n\n appearAnimationStore.set(storeId, {\n animation: appearAnimation,\n startTime: startFrameTime,\n })\n\n if (onReady) onReady(appearAnimation)\n }\n\n appearComplete.set(id, false)\n\n if (readyAnimation.ready) {\n readyAnimation.ready.then(startAnimation).catch(noop)\n } else {\n startAnimation()\n }\n}\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"start.mjs","sources":["../../../../src/animation/optimized-appear/start.ts"],"sourcesContent":["import {\n AnyResolvedKeyframe,\n Batcher,\n getOptimisedAppearId,\n MotionValue,\n optimizedAppearDataId,\n startWaapiAnimation,\n ValueAnimationTransition,\n type WithAppearProps,\n} from \"motion-dom\"\nimport { noop } from \"motion-utils\"\nimport { handoffOptimizedAppearAnimation } from \"./handoff\"\nimport { appearAnimationStore, appearComplete, AppearStoreEntry } from \"./store\"\nimport { appearStoreId } from \"./store-id\"\n\n/**\n * A single time to use across all animations to manually set startTime\n * and ensure they're all in sync.\n */\nlet startFrameTime: number\n\n/**\n * A dummy animation to detect when Chrome is ready to start\n * painting the page and hold off from triggering the real animation\n * until then. We only need one animation to detect paint ready.\n *\n * https://bugs.chromium.org/p/chromium/issues/detail?id=1406850\n */\nlet readyAnimation: Animation\n\n/**\n * Keep track of animations that were suspended vs cancelled so we\n * can easily resume them when we're done measuring layout.\n */\nconst suspendedAnimations = new Set<AppearStoreEntry>()\n\nfunction resumeSuspendedAnimations() {\n suspendedAnimations.forEach((data) => {\n data.animation.play()\n data.animation.startTime = data.startTime\n })\n suspendedAnimations.clear()\n}\n\nexport function startOptimizedAppearAnimation(\n element: HTMLElement,\n name: string,\n keyframes: string[] | number[],\n options: ValueAnimationTransition<number | string>,\n onReady?: (animation: Animation) => void\n): void {\n // Prevent optimised appear animations if Motion has already started animating.\n if (window.MotionIsMounted) {\n return\n }\n\n const id = element.dataset[optimizedAppearDataId]\n if (!id) return\n\n window.MotionHandoffAnimation = handoffOptimizedAppearAnimation\n\n const storeId = appearStoreId(id, name)\n if (!readyAnimation) {\n readyAnimation = startWaapiAnimation(\n element,\n name,\n [keyframes[0] as number, keyframes[0] as number],\n /**\n * 10 secs is basically just a super-safe duration to give Chrome\n * long enough to get the animation ready.\n */\n { duration: 10000, ease: \"linear\" }\n )\n\n appearAnimationStore.set(storeId, {\n animation: readyAnimation,\n startTime: null,\n })\n\n /**\n * If there's no readyAnimation then there's been no instantiation\n * of handoff animations.\n */\n window.MotionHandoffAnimation = handoffOptimizedAppearAnimation\n\n window.MotionHasOptimisedAnimation = (\n elementId?: string,\n valueName?: string\n ) => {\n if (!elementId) return false\n\n /**\n * Keep a map of elementIds that have started animating. We check\n * via ID instead of Element because of hydration errors and\n * pre-hydration checks. We also actively record IDs as they start\n * animating rather than simply checking for data-appear-id as\n * this attrbute might be present but not lead to an animation, for\n * instance if the element's appear animation is on a different\n * breakpoint.\n */\n if (!valueName) {\n return appearComplete.has(elementId)\n }\n\n const animationId = appearStoreId(elementId, valueName)\n return Boolean(appearAnimationStore.get(animationId))\n }\n\n window.MotionHandoffMarkAsComplete = (elementId: string): void => {\n if (appearComplete.has(elementId)) {\n appearComplete.set(elementId, true)\n }\n }\n\n window.MotionHandoffIsComplete = (elementId: string): boolean => {\n return appearComplete.get(elementId) === true\n }\n\n /**\n * We only need to cancel transform animations as\n * they're the ones that will interfere with the\n * layout animation measurements.\n */\n window.MotionCancelOptimisedAnimation = (\n elementId: string,\n valueName: string,\n frame?: Batcher,\n canResume?: boolean\n ) => {\n const animationId = appearStoreId(elementId, valueName)\n const data = appearAnimationStore.get(animationId)\n\n if (!data) return\n\n if (frame && canResume === undefined) {\n /**\n * Wait until the end of the subsequent frame to cancel the animation\n * to ensure we don't remove the animation before the main thread has\n * had a chance to resolve keyframes and render.\n */\n frame.postRender(() => {\n frame.postRender(() => {\n data.animation.cancel()\n })\n })\n } else {\n data.animation.cancel()\n }\n\n if (frame && canResume) {\n suspendedAnimations.add(data)\n frame.render(resumeSuspendedAnimations)\n } else {\n appearAnimationStore.delete(animationId)\n\n /**\n * If there are no more animations left, we can remove the cancel function.\n * This will let us know when we can stop checking for conflicting layout animations.\n */\n if (!appearAnimationStore.size) {\n window.MotionCancelOptimisedAnimation = undefined\n }\n }\n }\n\n window.MotionCheckAppearSync = (\n visualElement: WithAppearProps,\n valueName: string,\n value: MotionValue\n ) => {\n const appearId = getOptimisedAppearId(visualElement)\n\n if (!appearId) return\n\n const valueIsOptimised = window.MotionHasOptimisedAnimation?.(\n appearId,\n valueName\n )\n const externalAnimationValue =\n visualElement.props.values?.[valueName]\n\n if (!valueIsOptimised || !externalAnimationValue) return\n\n const removeSyncCheck = value.on(\n \"change\",\n (latestValue: AnyResolvedKeyframe) => {\n if (externalAnimationValue.get() !== latestValue) {\n window.MotionCancelOptimisedAnimation?.(\n appearId,\n valueName\n )\n removeSyncCheck()\n }\n }\n )\n\n return removeSyncCheck\n }\n }\n\n const startAnimation = () => {\n readyAnimation.cancel()\n\n const appearAnimation = startWaapiAnimation(\n element,\n name,\n keyframes,\n options\n )\n\n /**\n * Record the time of the first started animation. We call performance.now() once\n * here and once in handoff to ensure we're getting\n * close to a frame-locked time. This keeps all animations in sync.\n */\n if (startFrameTime === undefined) {\n startFrameTime = performance.now()\n }\n\n appearAnimation.startTime = startFrameTime\n\n appearAnimationStore.set(storeId, {\n animation: appearAnimation,\n startTime: startFrameTime,\n })\n\n if (onReady) onReady(appearAnimation)\n }\n\n appearComplete.set(id, false)\n\n if (readyAnimation.ready) {\n readyAnimation.ready.then(startAnimation).catch(noop)\n } else {\n startAnimation()\n }\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store-id.mjs","sources":["../../../../src/animation/optimized-appear/store-id.ts"],"sourcesContent":["import { transformProps } from \"motion-dom\"\n\nexport const appearStoreId = (elementId: string, valueName: string) => {\n const key = transformProps.has(valueName) ? \"transform\" : valueName\n\n return `${elementId}: ${key}`\n}\n"],"names":[],"mappings":";;MAEa,aAAa,GAAG,CAAC,SAAiB,EAAE,SAAiB,KAAI;AAClE,IAAA,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,WAAW,GAAG,SAAS
|
|
1
|
+
{"version":3,"file":"store-id.mjs","sources":["../../../../src/animation/optimized-appear/store-id.ts"],"sourcesContent":["import { transformProps } from \"motion-dom\"\n\nexport const appearStoreId = (elementId: string, valueName: string) => {\n const key = transformProps.has(valueName) ? \"transform\" : valueName\n\n return `${elementId}: ${key}`\n}\n"],"names":[],"mappings":";;MAEa,aAAa,GAAG,CAAC,SAAiB,EAAE,SAAiB,KAAI;AAClE,IAAA,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,SAAS,CAAC,GAAG,WAAW,GAAG,SAAS;AAEnE,IAAA,OAAO,CAAA,EAAG,SAAS,CAAA,EAAA,EAAK,GAAG,EAAE;AACjC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"store.mjs","sources":["../../../../src/animation/optimized-appear/store.ts"],"sourcesContent":["export interface AppearStoreEntry {\n animation: Animation\n startTime: number | null\n}\n\nexport type AppearElementId = string\n\nexport type IsComplete = boolean\n\nexport const appearAnimationStore = new Map<AppearElementId, AppearStoreEntry>()\n\nexport const appearComplete = new Map<AppearElementId, IsComplete>()\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"store.mjs","sources":["../../../../src/animation/optimized-appear/store.ts"],"sourcesContent":["export interface AppearStoreEntry {\n animation: Animation\n startTime: number | null\n}\n\nexport type AppearElementId = string\n\nexport type IsComplete = boolean\n\nexport const appearAnimationStore = new Map<AppearElementId, AppearStoreEntry>()\n\nexport const appearComplete = new Map<AppearElementId, IsComplete>()\n"],"names":[],"mappings":"AASO,MAAM,oBAAoB,GAAG,IAAI,GAAG;AAEpC,MAAM,cAAc,GAAG,IAAI,GAAG;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create.mjs","sources":["../../../../src/animation/sequence/create.ts"],"sourcesContent":["import {\n AnimationScope,\n createGeneratorEasing,\n defaultOffset,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n fillOffset,\n GeneratorFactory,\n isGenerator,\n isMotionValue,\n Transition,\n UnresolvedValueKeyframe,\n type AnyResolvedKeyframe,\n type MotionValue,\n} from \"motion-dom\"\nimport {\n Easing,\n getEasingForSegment,\n invariant,\n progress,\n secondsToMilliseconds,\n} from \"motion-utils\"\nimport { resolveSubjects } from \"../animate/resolve-subjects\"\nimport {\n AnimationSequence,\n At,\n ResolvedAnimationDefinitions,\n SequenceMap,\n SequenceOptions,\n ValueSequence,\n} from \"./types\"\nimport { calculateRepeatDuration } from \"./utils/calc-repeat-duration\"\nimport { calcNextTime } from \"./utils/calc-time\"\nimport { addKeyframes } from \"./utils/edit\"\nimport { normalizeTimes } from \"./utils/normalize-times\"\nimport { compareByTime } from \"./utils/sort\"\n\nconst defaultSegmentEasing = \"easeInOut\"\n\nconst MAX_REPEAT = 20\n\nexport function createAnimationsFromSequence(\n sequence: AnimationSequence,\n { defaultTransition = {}, ...sequenceTransition }: SequenceOptions = {},\n scope?: AnimationScope,\n generators?: { [key: string]: GeneratorFactory }\n): ResolvedAnimationDefinitions {\n const defaultDuration = defaultTransition.duration || 0.3\n const animationDefinitions: ResolvedAnimationDefinitions = new Map()\n const sequences = new Map<Element | MotionValue, SequenceMap>()\n const elementCache = {}\n const timeLabels = new Map<string, number>()\n\n let prevTime = 0\n let currentTime = 0\n let totalDuration = 0\n\n /**\n * Build the timeline by mapping over the sequence array and converting\n * the definitions into keyframes and offsets with absolute time values.\n * These will later get converted into relative offsets in a second pass.\n */\n for (let i = 0; i < sequence.length; i++) {\n const segment = sequence[i]\n\n /**\n * If this is a timeline label, mark it and skip the rest of this iteration.\n */\n if (typeof segment === \"string\") {\n timeLabels.set(segment, currentTime)\n continue\n } else if (!Array.isArray(segment)) {\n timeLabels.set(\n segment.name,\n calcNextTime(currentTime, segment.at, prevTime, timeLabels)\n )\n continue\n }\n\n let [subject, keyframes, transition = {}] = segment\n\n /**\n * If a relative or absolute time value has been specified we need to resolve\n * it in relation to the currentTime.\n */\n if (transition.at !== undefined) {\n currentTime = calcNextTime(\n currentTime,\n transition.at,\n prevTime,\n timeLabels\n )\n }\n\n /**\n * Keep track of the maximum duration in this definition. This will be\n * applied to currentTime once the definition has been parsed.\n */\n let maxDuration = 0\n\n const resolveValueSequence = (\n valueKeyframes: UnresolvedValueKeyframe | UnresolvedValueKeyframe[],\n valueTransition: Transition | DynamicAnimationOptions,\n valueSequence: ValueSequence,\n elementIndex = 0,\n numSubjects = 0\n ) => {\n const valueKeyframesAsList = keyframesAsList(valueKeyframes)\n const {\n delay = 0,\n times = defaultOffset(valueKeyframesAsList),\n type = defaultTransition.type || \"keyframes\",\n repeat,\n repeatType,\n repeatDelay = 0,\n ...remainingTransition\n } = valueTransition\n let { ease = defaultTransition.ease || \"easeOut\", duration } =\n valueTransition\n\n /**\n * Resolve stagger() if defined.\n */\n const calculatedDelay =\n typeof delay === \"function\"\n ? delay(elementIndex, numSubjects)\n : delay\n\n /**\n * If this animation should and can use a spring, generate a spring easing function.\n */\n const numKeyframes = valueKeyframesAsList.length\n const createGenerator = isGenerator(type)\n ? type\n : generators?.[type || \"keyframes\"]\n\n if (numKeyframes <= 2 && createGenerator) {\n /**\n * As we're creating an easing function from a spring,\n * ideally we want to generate it using the real distance\n * between the two keyframes. However this isn't always\n * possible - in these situations we use 0-100.\n */\n let absoluteDelta = 100\n if (\n numKeyframes === 2 &&\n isNumberKeyframesArray(valueKeyframesAsList)\n ) {\n const delta =\n valueKeyframesAsList[1] - valueKeyframesAsList[0]\n absoluteDelta = Math.abs(delta)\n }\n\n const springTransition = {\n ...defaultTransition,\n ...remainingTransition,\n }\n if (duration !== undefined) {\n springTransition.duration = secondsToMilliseconds(duration)\n }\n\n const springEasing = createGeneratorEasing(\n springTransition,\n absoluteDelta,\n createGenerator\n )\n\n ease = springEasing.ease\n duration = springEasing.duration\n }\n\n duration ??= defaultDuration\n\n const startTime = currentTime + calculatedDelay\n\n /**\n * If there's only one time offset of 0, fill in a second with length 1\n */\n if (times.length === 1 && times[0] === 0) {\n times[1] = 1\n }\n\n /**\n * Fill out if offset if fewer offsets than keyframes\n */\n const remainder = times.length - valueKeyframesAsList.length\n remainder > 0 && fillOffset(times, remainder)\n\n /**\n * If only one value has been set, ie [1], push a null to the start of\n * the keyframe array. This will let us mark a keyframe at this point\n * that will later be hydrated with the previous value.\n */\n valueKeyframesAsList.length === 1 &&\n valueKeyframesAsList.unshift(null)\n\n /**\n * Handle repeat options\n */\n if (repeat) {\n invariant(\n repeat < MAX_REPEAT,\n \"Repeat count too high, must be less than 20\",\n \"repeat-count-high\"\n )\n\n duration = calculateRepeatDuration(\n duration,\n repeat,\n repeatDelay\n )\n\n const originalKeyframes = [...valueKeyframesAsList]\n const originalTimes = [...times]\n ease = Array.isArray(ease) ? [...ease] : [ease]\n const originalEase = [...ease]\n\n for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {\n valueKeyframesAsList.push(...originalKeyframes)\n\n for (\n let keyframeIndex = 0;\n keyframeIndex < originalKeyframes.length;\n keyframeIndex++\n ) {\n times.push(\n originalTimes[keyframeIndex] + (repeatIndex + 1)\n )\n ease.push(\n keyframeIndex === 0\n ? \"linear\"\n : getEasingForSegment(\n originalEase,\n keyframeIndex - 1\n )\n )\n }\n }\n\n normalizeTimes(times, repeat)\n }\n\n const targetTime = startTime + duration\n\n /**\n * Add keyframes, mapping offsets to absolute time.\n */\n addKeyframes(\n valueSequence,\n valueKeyframesAsList,\n ease as Easing | Easing[],\n times,\n startTime,\n targetTime\n )\n\n maxDuration = Math.max(calculatedDelay + duration, maxDuration)\n totalDuration = Math.max(targetTime, totalDuration)\n }\n\n if (isMotionValue(subject)) {\n const subjectSequence = getSubjectSequence(subject, sequences)\n resolveValueSequence(\n keyframes as AnyResolvedKeyframe,\n transition,\n getValueSequence(\"default\", subjectSequence)\n )\n } else {\n const subjects = resolveSubjects(\n subject,\n keyframes as DOMKeyframesDefinition,\n scope,\n elementCache\n )\n\n const numSubjects = subjects.length\n\n /**\n * For every element in this segment, process the defined values.\n */\n for (\n let subjectIndex = 0;\n subjectIndex < numSubjects;\n subjectIndex++\n ) {\n /**\n * Cast necessary, but we know these are of this type\n */\n keyframes = keyframes as DOMKeyframesDefinition\n transition = transition as DynamicAnimationOptions\n\n const thisSubject = subjects[subjectIndex]\n const subjectSequence = getSubjectSequence(\n thisSubject,\n sequences\n )\n\n for (const key in keyframes) {\n resolveValueSequence(\n keyframes[\n key as keyof typeof keyframes\n ] as UnresolvedValueKeyframe,\n getValueTransition(transition, key),\n getValueSequence(key, subjectSequence),\n subjectIndex,\n numSubjects\n )\n }\n }\n }\n\n prevTime = currentTime\n currentTime += maxDuration\n }\n\n /**\n * For every element and value combination create a new animation.\n */\n sequences.forEach((valueSequences, element) => {\n for (const key in valueSequences) {\n const valueSequence = valueSequences[key]\n\n /**\n * Arrange all the keyframes in ascending time order.\n */\n valueSequence.sort(compareByTime)\n\n const keyframes: UnresolvedValueKeyframe[] = []\n const valueOffset: number[] = []\n const valueEasing: Easing[] = []\n\n /**\n * For each keyframe, translate absolute times into\n * relative offsets based on the total duration of the timeline.\n */\n for (let i = 0; i < valueSequence.length; i++) {\n const { at, value, easing } = valueSequence[i]\n keyframes.push(value)\n valueOffset.push(progress(0, totalDuration, at))\n valueEasing.push(easing || \"easeOut\")\n }\n\n /**\n * If the first keyframe doesn't land on offset: 0\n * provide one by duplicating the initial keyframe. This ensures\n * it snaps to the first keyframe when the animation starts.\n */\n if (valueOffset[0] !== 0) {\n valueOffset.unshift(0)\n keyframes.unshift(keyframes[0])\n valueEasing.unshift(defaultSegmentEasing)\n }\n\n /**\n * If the last keyframe doesn't land on offset: 1\n * provide one with a null wildcard value. This will ensure it\n * stays static until the end of the animation.\n */\n if (valueOffset[valueOffset.length - 1] !== 1) {\n valueOffset.push(1)\n keyframes.push(null)\n }\n\n if (!animationDefinitions.has(element)) {\n animationDefinitions.set(element, {\n keyframes: {},\n transition: {},\n })\n }\n\n const definition = animationDefinitions.get(element)!\n\n definition.keyframes[key] = keyframes\n\n /**\n * Exclude `type` from defaultTransition since springs have been\n * converted to duration-based easing functions in resolveValueSequence.\n * Including `type: \"spring\"` would cause JSAnimation to error when\n * the merged keyframes array has more than 2 keyframes.\n */\n const { type: _type, ...remainingDefaultTransition } =\n defaultTransition\n definition.transition[key] = {\n ...remainingDefaultTransition,\n duration: totalDuration,\n ease: valueEasing,\n times: valueOffset,\n ...sequenceTransition,\n }\n }\n })\n\n return animationDefinitions\n}\n\nfunction getSubjectSequence<O extends {}>(\n subject: Element | MotionValue | O,\n sequences: Map<Element | MotionValue | O, SequenceMap>\n): SequenceMap {\n !sequences.has(subject) && sequences.set(subject, {})\n return sequences.get(subject)!\n}\n\nfunction getValueSequence(name: string, sequences: SequenceMap): ValueSequence {\n if (!sequences[name]) sequences[name] = []\n return sequences[name]\n}\n\nfunction keyframesAsList(\n keyframes: UnresolvedValueKeyframe | UnresolvedValueKeyframe[]\n): UnresolvedValueKeyframe[] {\n return Array.isArray(keyframes) ? keyframes : [keyframes]\n}\n\nexport function getValueTransition(\n transition: DynamicAnimationOptions & At,\n key: string\n): DynamicAnimationOptions {\n return transition && transition[key as keyof typeof transition]\n ? {\n ...transition,\n ...(transition[key as keyof typeof transition] as Transition),\n }\n : { ...transition }\n}\n\nconst isNumber = (keyframe: unknown) => typeof keyframe === \"number\"\nconst isNumberKeyframesArray = (\n keyframes: UnresolvedValueKeyframe[]\n): keyframes is number[] => keyframes.every(isNumber)\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"create.mjs","sources":["../../../../src/animation/sequence/create.ts"],"sourcesContent":["import {\n AnimationScope,\n createGeneratorEasing,\n defaultOffset,\n DOMKeyframesDefinition,\n AnimationOptions as DynamicAnimationOptions,\n fillOffset,\n GeneratorFactory,\n isGenerator,\n isMotionValue,\n Transition,\n UnresolvedValueKeyframe,\n type AnyResolvedKeyframe,\n type MotionValue,\n} from \"motion-dom\"\nimport {\n Easing,\n getEasingForSegment,\n invariant,\n progress,\n secondsToMilliseconds,\n} from \"motion-utils\"\nimport { resolveSubjects } from \"../animate/resolve-subjects\"\nimport {\n AnimationSequence,\n At,\n ResolvedAnimationDefinitions,\n SequenceMap,\n SequenceOptions,\n ValueSequence,\n} from \"./types\"\nimport { calculateRepeatDuration } from \"./utils/calc-repeat-duration\"\nimport { calcNextTime } from \"./utils/calc-time\"\nimport { addKeyframes } from \"./utils/edit\"\nimport { normalizeTimes } from \"./utils/normalize-times\"\nimport { compareByTime } from \"./utils/sort\"\n\nconst defaultSegmentEasing = \"easeInOut\"\n\nconst MAX_REPEAT = 20\n\nexport function createAnimationsFromSequence(\n sequence: AnimationSequence,\n { defaultTransition = {}, ...sequenceTransition }: SequenceOptions = {},\n scope?: AnimationScope,\n generators?: { [key: string]: GeneratorFactory }\n): ResolvedAnimationDefinitions {\n const defaultDuration = defaultTransition.duration || 0.3\n const animationDefinitions: ResolvedAnimationDefinitions = new Map()\n const sequences = new Map<Element | MotionValue, SequenceMap>()\n const elementCache = {}\n const timeLabels = new Map<string, number>()\n\n let prevTime = 0\n let currentTime = 0\n let totalDuration = 0\n\n /**\n * Build the timeline by mapping over the sequence array and converting\n * the definitions into keyframes and offsets with absolute time values.\n * These will later get converted into relative offsets in a second pass.\n */\n for (let i = 0; i < sequence.length; i++) {\n const segment = sequence[i]\n\n /**\n * If this is a timeline label, mark it and skip the rest of this iteration.\n */\n if (typeof segment === \"string\") {\n timeLabels.set(segment, currentTime)\n continue\n } else if (!Array.isArray(segment)) {\n timeLabels.set(\n segment.name,\n calcNextTime(currentTime, segment.at, prevTime, timeLabels)\n )\n continue\n }\n\n let [subject, keyframes, transition = {}] = segment\n\n /**\n * If a relative or absolute time value has been specified we need to resolve\n * it in relation to the currentTime.\n */\n if (transition.at !== undefined) {\n currentTime = calcNextTime(\n currentTime,\n transition.at,\n prevTime,\n timeLabels\n )\n }\n\n /**\n * Keep track of the maximum duration in this definition. This will be\n * applied to currentTime once the definition has been parsed.\n */\n let maxDuration = 0\n\n const resolveValueSequence = (\n valueKeyframes: UnresolvedValueKeyframe | UnresolvedValueKeyframe[],\n valueTransition: Transition | DynamicAnimationOptions,\n valueSequence: ValueSequence,\n elementIndex = 0,\n numSubjects = 0\n ) => {\n const valueKeyframesAsList = keyframesAsList(valueKeyframes)\n const {\n delay = 0,\n times = defaultOffset(valueKeyframesAsList),\n type = defaultTransition.type || \"keyframes\",\n repeat,\n repeatType,\n repeatDelay = 0,\n ...remainingTransition\n } = valueTransition\n let { ease = defaultTransition.ease || \"easeOut\", duration } =\n valueTransition\n\n /**\n * Resolve stagger() if defined.\n */\n const calculatedDelay =\n typeof delay === \"function\"\n ? delay(elementIndex, numSubjects)\n : delay\n\n /**\n * If this animation should and can use a spring, generate a spring easing function.\n */\n const numKeyframes = valueKeyframesAsList.length\n const createGenerator = isGenerator(type)\n ? type\n : generators?.[type || \"keyframes\"]\n\n if (numKeyframes <= 2 && createGenerator) {\n /**\n * As we're creating an easing function from a spring,\n * ideally we want to generate it using the real distance\n * between the two keyframes. However this isn't always\n * possible - in these situations we use 0-100.\n */\n let absoluteDelta = 100\n if (\n numKeyframes === 2 &&\n isNumberKeyframesArray(valueKeyframesAsList)\n ) {\n const delta =\n valueKeyframesAsList[1] - valueKeyframesAsList[0]\n absoluteDelta = Math.abs(delta)\n }\n\n const springTransition = {\n ...defaultTransition,\n ...remainingTransition,\n }\n if (duration !== undefined) {\n springTransition.duration = secondsToMilliseconds(duration)\n }\n\n const springEasing = createGeneratorEasing(\n springTransition,\n absoluteDelta,\n createGenerator\n )\n\n ease = springEasing.ease\n duration = springEasing.duration\n }\n\n duration ??= defaultDuration\n\n const startTime = currentTime + calculatedDelay\n\n /**\n * If there's only one time offset of 0, fill in a second with length 1\n */\n if (times.length === 1 && times[0] === 0) {\n times[1] = 1\n }\n\n /**\n * Fill out if offset if fewer offsets than keyframes\n */\n const remainder = times.length - valueKeyframesAsList.length\n remainder > 0 && fillOffset(times, remainder)\n\n /**\n * If only one value has been set, ie [1], push a null to the start of\n * the keyframe array. This will let us mark a keyframe at this point\n * that will later be hydrated with the previous value.\n */\n valueKeyframesAsList.length === 1 &&\n valueKeyframesAsList.unshift(null)\n\n /**\n * Handle repeat options\n */\n if (repeat) {\n invariant(\n repeat < MAX_REPEAT,\n \"Repeat count too high, must be less than 20\",\n \"repeat-count-high\"\n )\n\n duration = calculateRepeatDuration(\n duration,\n repeat,\n repeatDelay\n )\n\n const originalKeyframes = [...valueKeyframesAsList]\n const originalTimes = [...times]\n ease = Array.isArray(ease) ? [...ease] : [ease]\n const originalEase = [...ease]\n\n for (let repeatIndex = 0; repeatIndex < repeat; repeatIndex++) {\n valueKeyframesAsList.push(...originalKeyframes)\n\n for (\n let keyframeIndex = 0;\n keyframeIndex < originalKeyframes.length;\n keyframeIndex++\n ) {\n times.push(\n originalTimes[keyframeIndex] + (repeatIndex + 1)\n )\n ease.push(\n keyframeIndex === 0\n ? \"linear\"\n : getEasingForSegment(\n originalEase,\n keyframeIndex - 1\n )\n )\n }\n }\n\n normalizeTimes(times, repeat)\n }\n\n const targetTime = startTime + duration\n\n /**\n * Add keyframes, mapping offsets to absolute time.\n */\n addKeyframes(\n valueSequence,\n valueKeyframesAsList,\n ease as Easing | Easing[],\n times,\n startTime,\n targetTime\n )\n\n maxDuration = Math.max(calculatedDelay + duration, maxDuration)\n totalDuration = Math.max(targetTime, totalDuration)\n }\n\n if (isMotionValue(subject)) {\n const subjectSequence = getSubjectSequence(subject, sequences)\n resolveValueSequence(\n keyframes as AnyResolvedKeyframe,\n transition,\n getValueSequence(\"default\", subjectSequence)\n )\n } else {\n const subjects = resolveSubjects(\n subject,\n keyframes as DOMKeyframesDefinition,\n scope,\n elementCache\n )\n\n const numSubjects = subjects.length\n\n /**\n * For every element in this segment, process the defined values.\n */\n for (\n let subjectIndex = 0;\n subjectIndex < numSubjects;\n subjectIndex++\n ) {\n /**\n * Cast necessary, but we know these are of this type\n */\n keyframes = keyframes as DOMKeyframesDefinition\n transition = transition as DynamicAnimationOptions\n\n const thisSubject = subjects[subjectIndex]\n const subjectSequence = getSubjectSequence(\n thisSubject,\n sequences\n )\n\n for (const key in keyframes) {\n resolveValueSequence(\n keyframes[\n key as keyof typeof keyframes\n ] as UnresolvedValueKeyframe,\n getValueTransition(transition, key),\n getValueSequence(key, subjectSequence),\n subjectIndex,\n numSubjects\n )\n }\n }\n }\n\n prevTime = currentTime\n currentTime += maxDuration\n }\n\n /**\n * For every element and value combination create a new animation.\n */\n sequences.forEach((valueSequences, element) => {\n for (const key in valueSequences) {\n const valueSequence = valueSequences[key]\n\n /**\n * Arrange all the keyframes in ascending time order.\n */\n valueSequence.sort(compareByTime)\n\n const keyframes: UnresolvedValueKeyframe[] = []\n const valueOffset: number[] = []\n const valueEasing: Easing[] = []\n\n /**\n * For each keyframe, translate absolute times into\n * relative offsets based on the total duration of the timeline.\n */\n for (let i = 0; i < valueSequence.length; i++) {\n const { at, value, easing } = valueSequence[i]\n keyframes.push(value)\n valueOffset.push(progress(0, totalDuration, at))\n valueEasing.push(easing || \"easeOut\")\n }\n\n /**\n * If the first keyframe doesn't land on offset: 0\n * provide one by duplicating the initial keyframe. This ensures\n * it snaps to the first keyframe when the animation starts.\n */\n if (valueOffset[0] !== 0) {\n valueOffset.unshift(0)\n keyframes.unshift(keyframes[0])\n valueEasing.unshift(defaultSegmentEasing)\n }\n\n /**\n * If the last keyframe doesn't land on offset: 1\n * provide one with a null wildcard value. This will ensure it\n * stays static until the end of the animation.\n */\n if (valueOffset[valueOffset.length - 1] !== 1) {\n valueOffset.push(1)\n keyframes.push(null)\n }\n\n if (!animationDefinitions.has(element)) {\n animationDefinitions.set(element, {\n keyframes: {},\n transition: {},\n })\n }\n\n const definition = animationDefinitions.get(element)!\n\n definition.keyframes[key] = keyframes\n\n /**\n * Exclude `type` from defaultTransition since springs have been\n * converted to duration-based easing functions in resolveValueSequence.\n * Including `type: \"spring\"` would cause JSAnimation to error when\n * the merged keyframes array has more than 2 keyframes.\n */\n const { type: _type, ...remainingDefaultTransition } =\n defaultTransition\n definition.transition[key] = {\n ...remainingDefaultTransition,\n duration: totalDuration,\n ease: valueEasing,\n times: valueOffset,\n ...sequenceTransition,\n }\n }\n })\n\n return animationDefinitions\n}\n\nfunction getSubjectSequence<O extends {}>(\n subject: Element | MotionValue | O,\n sequences: Map<Element | MotionValue | O, SequenceMap>\n): SequenceMap {\n !sequences.has(subject) && sequences.set(subject, {})\n return sequences.get(subject)!\n}\n\nfunction getValueSequence(name: string, sequences: SequenceMap): ValueSequence {\n if (!sequences[name]) sequences[name] = []\n return sequences[name]\n}\n\nfunction keyframesAsList(\n keyframes: UnresolvedValueKeyframe | UnresolvedValueKeyframe[]\n): UnresolvedValueKeyframe[] {\n return Array.isArray(keyframes) ? keyframes : [keyframes]\n}\n\nexport function getValueTransition(\n transition: DynamicAnimationOptions & At,\n key: string\n): DynamicAnimationOptions {\n return transition && transition[key as keyof typeof transition]\n ? {\n ...transition,\n ...(transition[key as keyof typeof transition] as Transition),\n }\n : { ...transition }\n}\n\nconst isNumber = (keyframe: unknown) => typeof keyframe === \"number\"\nconst isNumberKeyframesArray = (\n keyframes: UnresolvedValueKeyframe[]\n): keyframes is number[] => keyframes.every(isNumber)\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calc-repeat-duration.mjs","sources":["../../../../../src/animation/sequence/utils/calc-repeat-duration.ts"],"sourcesContent":["export function calculateRepeatDuration(\n duration: number,\n repeat: number,\n _repeatDelay: number\n): number {\n return duration * (repeat + 1)\n}\n"],"names":[],"mappings":"SAAgB,uBAAuB,CACnC,QAAgB,EAChB,MAAc,EACd,YAAoB,EAAA;AAEpB,IAAA,OAAO,QAAQ,IAAI,MAAM,GAAG,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"calc-repeat-duration.mjs","sources":["../../../../../src/animation/sequence/utils/calc-repeat-duration.ts"],"sourcesContent":["export function calculateRepeatDuration(\n duration: number,\n repeat: number,\n _repeatDelay: number\n): number {\n return duration * (repeat + 1)\n}\n"],"names":[],"mappings":"SAAgB,uBAAuB,CACnC,QAAgB,EAChB,MAAc,EACd,YAAoB,EAAA;AAEpB,IAAA,OAAO,QAAQ,IAAI,MAAM,GAAG,CAAC,CAAC;AAClC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"calc-time.mjs","sources":["../../../../../src/animation/sequence/utils/calc-time.ts"],"sourcesContent":["import { SequenceTime } from \"../types\"\n\n/**\n * Given a absolute or relative time definition and current/prev time state of the sequence,\n * calculate an absolute time for the next keyframes.\n */\nexport function calcNextTime(\n current: number,\n next: SequenceTime,\n prev: number,\n labels: Map<string, number>\n): number {\n if (typeof next === \"number\") {\n return next\n } else if (next.startsWith(\"-\") || next.startsWith(\"+\")) {\n return Math.max(0, current + parseFloat(next))\n } else if (next === \"<\") {\n return prev\n } else if (next.startsWith(\"<\")) {\n return Math.max(0, prev + parseFloat(next.slice(1)))\n } else {\n return labels.get(next) ?? current\n }\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACG,SAAU,YAAY,CACxB,OAAe,EACf,IAAkB,EAClB,IAAY,EACZ,MAA2B,EAAA;AAE3B,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC1B,QAAA,OAAO,IAAI
|
|
1
|
+
{"version":3,"file":"calc-time.mjs","sources":["../../../../../src/animation/sequence/utils/calc-time.ts"],"sourcesContent":["import { SequenceTime } from \"../types\"\n\n/**\n * Given a absolute or relative time definition and current/prev time state of the sequence,\n * calculate an absolute time for the next keyframes.\n */\nexport function calcNextTime(\n current: number,\n next: SequenceTime,\n prev: number,\n labels: Map<string, number>\n): number {\n if (typeof next === \"number\") {\n return next\n } else if (next.startsWith(\"-\") || next.startsWith(\"+\")) {\n return Math.max(0, current + parseFloat(next))\n } else if (next === \"<\") {\n return prev\n } else if (next.startsWith(\"<\")) {\n return Math.max(0, prev + parseFloat(next.slice(1)))\n } else {\n return labels.get(next) ?? current\n }\n}\n"],"names":[],"mappings":"AAEA;;;AAGG;AACG,SAAU,YAAY,CACxB,OAAe,EACf,IAAkB,EAClB,IAAY,EACZ,MAA2B,EAAA;AAE3B,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC1B,QAAA,OAAO,IAAI;IACf;AAAO,SAAA,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AACrD,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,IAAI,CAAC,CAAC;IAClD;AAAO,SAAA,IAAI,IAAI,KAAK,GAAG,EAAE;AACrB,QAAA,OAAO,IAAI;IACf;AAAO,SAAA,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AAC7B,QAAA,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;IACxD;SAAO;QACH,OAAO,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,OAAO;IACtC;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"edit.mjs","sources":["../../../../../src/animation/sequence/utils/edit.ts"],"sourcesContent":["import { mixNumber, UnresolvedValueKeyframe } from \"motion-dom\"\nimport { Easing, getEasingForSegment, removeItem } from \"motion-utils\"\nimport type { ValueSequence } from \"../types\"\n\nexport function eraseKeyframes(\n sequence: ValueSequence,\n startTime: number,\n endTime: number\n): void {\n for (let i = 0; i < sequence.length; i++) {\n const keyframe = sequence[i]\n\n if (keyframe.at > startTime && keyframe.at < endTime) {\n removeItem(sequence, keyframe)\n\n // If we remove this item we have to push the pointer back one\n i--\n }\n }\n}\n\nexport function addKeyframes(\n sequence: ValueSequence,\n keyframes: UnresolvedValueKeyframe[],\n easing: Easing | Easing[],\n offset: number[],\n startTime: number,\n endTime: number\n): void {\n /**\n * Erase every existing value between currentTime and targetTime,\n * this will essentially splice this timeline into any currently\n * defined ones.\n */\n eraseKeyframes(sequence, startTime, endTime)\n\n for (let i = 0; i < keyframes.length; i++) {\n sequence.push({\n value: keyframes[i],\n at: mixNumber(startTime, endTime, offset[i]),\n easing: getEasingForSegment(easing, i),\n })\n }\n}\n"],"names":[],"mappings":";;;SAIgB,cAAc,CAC1B,QAAuB,EACvB,SAAiB,EACjB,OAAe,EAAA;AAEf,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACtC,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC
|
|
1
|
+
{"version":3,"file":"edit.mjs","sources":["../../../../../src/animation/sequence/utils/edit.ts"],"sourcesContent":["import { mixNumber, UnresolvedValueKeyframe } from \"motion-dom\"\nimport { Easing, getEasingForSegment, removeItem } from \"motion-utils\"\nimport type { ValueSequence } from \"../types\"\n\nexport function eraseKeyframes(\n sequence: ValueSequence,\n startTime: number,\n endTime: number\n): void {\n for (let i = 0; i < sequence.length; i++) {\n const keyframe = sequence[i]\n\n if (keyframe.at > startTime && keyframe.at < endTime) {\n removeItem(sequence, keyframe)\n\n // If we remove this item we have to push the pointer back one\n i--\n }\n }\n}\n\nexport function addKeyframes(\n sequence: ValueSequence,\n keyframes: UnresolvedValueKeyframe[],\n easing: Easing | Easing[],\n offset: number[],\n startTime: number,\n endTime: number\n): void {\n /**\n * Erase every existing value between currentTime and targetTime,\n * this will essentially splice this timeline into any currently\n * defined ones.\n */\n eraseKeyframes(sequence, startTime, endTime)\n\n for (let i = 0; i < keyframes.length; i++) {\n sequence.push({\n value: keyframes[i],\n at: mixNumber(startTime, endTime, offset[i]),\n easing: getEasingForSegment(easing, i),\n })\n }\n}\n"],"names":[],"mappings":";;;SAIgB,cAAc,CAC1B,QAAuB,EACvB,SAAiB,EACjB,OAAe,EAAA;AAEf,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACtC,QAAA,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC;AAE5B,QAAA,IAAI,QAAQ,CAAC,EAAE,GAAG,SAAS,IAAI,QAAQ,CAAC,EAAE,GAAG,OAAO,EAAE;AAClD,YAAA,UAAU,CAAC,QAAQ,EAAE,QAAQ,CAAC;;AAG9B,YAAA,CAAC,EAAE;QACP;IACJ;AACJ;AAEM,SAAU,YAAY,CACxB,QAAuB,EACvB,SAAoC,EACpC,MAAyB,EACzB,MAAgB,EAChB,SAAiB,EACjB,OAAe,EAAA;AAEf;;;;AAIG;AACH,IAAA,cAAc,CAAC,QAAQ,EAAE,SAAS,EAAE,OAAO,CAAC;AAE5C,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;QACvC,QAAQ,CAAC,IAAI,CAAC;AACV,YAAA,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;YACnB,EAAE,EAAE,SAAS,CAAC,SAAS,EAAE,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;AAC5C,YAAA,MAAM,EAAE,mBAAmB,CAAC,MAAM,EAAE,CAAC,CAAC;AACzC,SAAA,CAAC;IACN;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"normalize-times.mjs","sources":["../../../../../src/animation/sequence/utils/normalize-times.ts"],"sourcesContent":["/**\n * Take an array of times that represent repeated keyframes. For instance\n * if we have original times of [0, 0.5, 1] then our repeated times will\n * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back\n * down to a 0-1 scale.\n */\nexport function normalizeTimes(times: number[], repeat: number): void {\n for (let i = 0; i < times.length; i++) {\n times[i] = times[i] / (repeat + 1)\n }\n}\n"],"names":[],"mappings":"AAAA;;;;;AAKG;
|
|
1
|
+
{"version":3,"file":"normalize-times.mjs","sources":["../../../../../src/animation/sequence/utils/normalize-times.ts"],"sourcesContent":["/**\n * Take an array of times that represent repeated keyframes. For instance\n * if we have original times of [0, 0.5, 1] then our repeated times will\n * be [0, 0.5, 1, 1, 1.5, 2]. Loop over the times and scale them back\n * down to a 0-1 scale.\n */\nexport function normalizeTimes(times: number[], repeat: number): void {\n for (let i = 0; i < times.length; i++) {\n times[i] = times[i] / (repeat + 1)\n }\n}\n"],"names":[],"mappings":"AAAA;;;;;AAKG;AACG,SAAU,cAAc,CAAC,KAAe,EAAE,MAAc,EAAA;AAC1D,IAAA,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACnC,QAAA,KAAK,CAAC,CAAC,CAAC,GAAG,KAAK,CAAC,CAAC,CAAC,IAAI,MAAM,GAAG,CAAC,CAAC;IACtC;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sort.mjs","sources":["../../../../../src/animation/sequence/utils/sort.ts"],"sourcesContent":["import { AbsoluteKeyframe } from \"../types\"\n\nexport function compareByTime(\n a: AbsoluteKeyframe,\n b: AbsoluteKeyframe\n): number {\n if (a.at === b.at) {\n if (a.value === null) return 1\n if (b.value === null) return -1\n return 0\n } else {\n return a.at - b.at\n }\n}\n"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sort.mjs","sources":["../../../../../src/animation/sequence/utils/sort.ts"],"sourcesContent":["import { AbsoluteKeyframe } from \"../types\"\n\nexport function compareByTime(\n a: AbsoluteKeyframe,\n b: AbsoluteKeyframe\n): number {\n if (a.at === b.at) {\n if (a.value === null) return 1\n if (b.value === null) return -1\n return 0\n } else {\n return a.at - b.at\n }\n}\n"],"names":[],"mappings":"AAEM,SAAU,aAAa,CACzB,CAAmB,EACnB,CAAmB,EAAA;IAEnB,IAAI,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,EAAE;AACf,QAAA,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI;AAAE,YAAA,OAAO,CAAC;AAC9B,QAAA,IAAI,CAAC,CAAC,KAAK,KAAK,IAAI;YAAE,OAAO,EAAE;AAC/B,QAAA,OAAO,CAAC;IACZ;SAAO;AACH,QAAA,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,EAAE;IACtB;AACJ;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/animation/utils/create-visual-element.ts"],"sourcesContent":["import {\n HTMLVisualElement,\n isSVGElement,\n isSVGSVGElement,\n ObjectVisualElement,\n SVGVisualElement,\n visualElementStore,\n} from \"motion-dom\"\n\nexport function createDOMVisualElement(element: HTMLElement | SVGElement) {\n const options = {\n presenceContext: null,\n props: {},\n visualState: {\n renderState: {\n transform: {},\n transformOrigin: {},\n style: {},\n vars: {},\n attrs: {},\n },\n latestValues: {},\n },\n }\n const node =\n isSVGElement(element) && !isSVGSVGElement(element)\n ? new SVGVisualElement(options)\n : new HTMLVisualElement(options)\n\n node.mount(element as any)\n\n visualElementStore.set(element, node)\n}\n\nexport function createObjectVisualElement(subject: Object) {\n const options = {\n presenceContext: null,\n props: {},\n visualState: {\n renderState: {\n output: {},\n },\n latestValues: {},\n },\n }\n const node = new ObjectVisualElement(options)\n\n node.mount(subject)\n\n visualElementStore.set(subject, node)\n}\n"],"names":[],"mappings":";;AASM,SAAU,sBAAsB,CAAC,OAAiC,EAAA;AACpE,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE;AACT,YAAA,WAAW,EAAE;AACT,gBAAA,SAAS,EAAE,EAAE;AACb,gBAAA,eAAe,EAAE,EAAE;AACnB,gBAAA,KAAK,EAAE,EAAE;AACT,gBAAA,IAAI,EAAE,EAAE;AACR,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;KACJ
|
|
1
|
+
{"version":3,"file":"create-visual-element.mjs","sources":["../../../../src/animation/utils/create-visual-element.ts"],"sourcesContent":["import {\n HTMLVisualElement,\n isSVGElement,\n isSVGSVGElement,\n ObjectVisualElement,\n SVGVisualElement,\n visualElementStore,\n} from \"motion-dom\"\n\nexport function createDOMVisualElement(element: HTMLElement | SVGElement) {\n const options = {\n presenceContext: null,\n props: {},\n visualState: {\n renderState: {\n transform: {},\n transformOrigin: {},\n style: {},\n vars: {},\n attrs: {},\n },\n latestValues: {},\n },\n }\n const node =\n isSVGElement(element) && !isSVGSVGElement(element)\n ? new SVGVisualElement(options)\n : new HTMLVisualElement(options)\n\n node.mount(element as any)\n\n visualElementStore.set(element, node)\n}\n\nexport function createObjectVisualElement(subject: Object) {\n const options = {\n presenceContext: null,\n props: {},\n visualState: {\n renderState: {\n output: {},\n },\n latestValues: {},\n },\n }\n const node = new ObjectVisualElement(options)\n\n node.mount(subject)\n\n visualElementStore.set(subject, node)\n}\n"],"names":[],"mappings":";;AASM,SAAU,sBAAsB,CAAC,OAAiC,EAAA;AACpE,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE;AACT,YAAA,WAAW,EAAE;AACT,gBAAA,SAAS,EAAE,EAAE;AACb,gBAAA,eAAe,EAAE,EAAE;AACnB,gBAAA,KAAK,EAAE,EAAE;AACT,gBAAA,IAAI,EAAE,EAAE;AACR,gBAAA,KAAK,EAAE,EAAE;AACZ,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;KACJ;IACD,MAAM,IAAI,GACN,YAAY,CAAC,OAAO,CAAC,IAAI,CAAC,eAAe,CAAC,OAAO;AAC7C,UAAE,IAAI,gBAAgB,CAAC,OAAO;AAC9B,UAAE,IAAI,iBAAiB,CAAC,OAAO,CAAC;AAExC,IAAA,IAAI,CAAC,KAAK,CAAC,OAAc,CAAC;AAE1B,IAAA,kBAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC;AACzC;AAEM,SAAU,yBAAyB,CAAC,OAAe,EAAA;AACrD,IAAA,MAAM,OAAO,GAAG;AACZ,QAAA,eAAe,EAAE,IAAI;AACrB,QAAA,KAAK,EAAE,EAAE;AACT,QAAA,WAAW,EAAE;AACT,YAAA,WAAW,EAAE;AACT,gBAAA,MAAM,EAAE,EAAE;AACb,aAAA;AACD,YAAA,YAAY,EAAE,EAAE;AACnB,SAAA;KACJ;AACD,IAAA,MAAM,IAAI,GAAG,IAAI,mBAAmB,CAAC,OAAO,CAAC;AAE7C,IAAA,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AAEnB,IAAA,kBAAkB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC;AACzC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"is-dom-keyframes.mjs","sources":["../../../../src/animation/utils/is-dom-keyframes.ts"],"sourcesContent":["import { DOMKeyframesDefinition } from \"motion-dom\"\n\nexport function isDOMKeyframes(\n keyframes: unknown\n): keyframes is DOMKeyframesDefinition {\n return typeof keyframes === \"object\" && !Array.isArray(keyframes)\n}\n"],"names":[],"mappings":"AAEM,SAAU,cAAc,CAC1B,SAAkB,EAAA;AAElB,IAAA,OAAO,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC
|
|
1
|
+
{"version":3,"file":"is-dom-keyframes.mjs","sources":["../../../../src/animation/utils/is-dom-keyframes.ts"],"sourcesContent":["import { DOMKeyframesDefinition } from \"motion-dom\"\n\nexport function isDOMKeyframes(\n keyframes: unknown\n): keyframes is DOMKeyframesDefinition {\n return typeof keyframes === \"object\" && !Array.isArray(keyframes)\n}\n"],"names":[],"mappings":"AAEM,SAAU,cAAc,CAC1B,SAAkB,EAAA;AAElB,IAAA,OAAO,OAAO,SAAS,KAAK,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,SAAS,CAAC;AACrE;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PopChild.mjs","sources":["../../../../src/components/AnimatePresence/PopChild.tsx"],"sourcesContent":["\"use client\"\n\nimport { isHTMLElement } from \"motion-dom\"\nimport * as React from \"react\"\nimport { useContext, useId, useInsertionEffect, useRef } from \"react\"\n\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { useComposedRefs } from \"../../utils/use-composed-ref\"\n\ninterface Size {\n width: number\n height: number\n top: number\n left: number\n right: number\n bottom: number\n}\n\ninterface Props {\n children: React.ReactElement\n isPresent: boolean\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n pop?: boolean\n}\n\ninterface MeasureProps extends Props {\n childRef: React.RefObject<HTMLElement | null>\n sizeRef: React.RefObject<Size>\n}\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component<MeasureProps> {\n getSnapshotBeforeUpdate(prevProps: MeasureProps) {\n const element = this.props.childRef.current\n if (element && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {\n const parent = element.offsetParent\n const parentWidth = isHTMLElement(parent)\n ? parent.offsetWidth || 0\n : 0\n const parentHeight = isHTMLElement(parent)\n ? parent.offsetHeight || 0\n : 0\n\n const size = this.props.sizeRef.current!\n size.height = element.offsetHeight || 0\n size.width = element.offsetWidth || 0\n size.top = element.offsetTop\n size.left = element.offsetLeft\n size.right = parentWidth - size.width - size.left\n size.bottom = parentHeight - size.height - size.top\n }\n\n return null\n }\n\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() {}\n\n render() {\n return this.props.children\n }\n}\n\nexport function PopChild({ children, isPresent, anchorX, anchorY, root, pop }: Props) {\n const id = useId()\n const ref = useRef<HTMLElement>(null)\n const size = useRef<Size>({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n })\n const { nonce } = useContext(MotionConfigContext)\n /**\n * In React 19, refs are passed via props.ref instead of element.ref.\n * We check props.ref first (React 19) and fall back to element.ref (React 18).\n */\n const childRef =\n (children.props as { ref?: React.Ref<HTMLElement> })?.ref ??\n (children as unknown as { ref?: React.Ref<HTMLElement> })?.ref\n const composedRef = useComposedRefs(ref, childRef)\n\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left, right, bottom } = size.current\n if (isPresent || pop === false || !ref.current || !width || !height) return\n\n const x = anchorX === \"left\" ? `left: ${left}` : `right: ${right}`\n const y = anchorY === \"bottom\" ? `bottom: ${bottom}` : `top: ${top}`\n\n ref.current.dataset.motionPopId = id\n\n const style = document.createElement(\"style\")\n if (nonce) style.nonce = nonce\n\n const parent = root ?? document.head\n parent.appendChild(style)\n\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n ${x}px !important;\n ${y}px !important;\n }\n `)\n }\n\n return () => {\n if (parent.contains(style)) {\n parent.removeChild(style)\n }\n }\n }, [isPresent])\n\n return (\n <PopChildMeasure isPresent={isPresent} childRef={ref} sizeRef={size} pop={pop}>\n {pop === false\n ? children\n : React.cloneElement(children as any, { ref: composedRef })}\n </PopChildMeasure>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AAgCA;;;AAGG;AACH;AACI;;;AAGQ;AACA;AACI;;AAEJ;AACI;;;;;AAMJ;AACA;AACA;AACA;;AAGJ;;AAGJ;;AAEG;AACH;;AAGI;;AAEP;
|
|
1
|
+
{"version":3,"file":"PopChild.mjs","sources":["../../../../src/components/AnimatePresence/PopChild.tsx"],"sourcesContent":["\"use client\"\n\nimport { isHTMLElement } from \"motion-dom\"\nimport * as React from \"react\"\nimport { useContext, useId, useInsertionEffect, useRef } from \"react\"\n\nimport { MotionConfigContext } from \"../../context/MotionConfigContext\"\nimport { useComposedRefs } from \"../../utils/use-composed-ref\"\n\ninterface Size {\n width: number\n height: number\n top: number\n left: number\n right: number\n bottom: number\n}\n\ninterface Props {\n children: React.ReactElement\n isPresent: boolean\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n pop?: boolean\n}\n\ninterface MeasureProps extends Props {\n childRef: React.RefObject<HTMLElement | null>\n sizeRef: React.RefObject<Size>\n}\n\n/**\n * Measurement functionality has to be within a separate component\n * to leverage snapshot lifecycle.\n */\nclass PopChildMeasure extends React.Component<MeasureProps> {\n getSnapshotBeforeUpdate(prevProps: MeasureProps) {\n const element = this.props.childRef.current\n if (element && prevProps.isPresent && !this.props.isPresent && this.props.pop !== false) {\n const parent = element.offsetParent\n const parentWidth = isHTMLElement(parent)\n ? parent.offsetWidth || 0\n : 0\n const parentHeight = isHTMLElement(parent)\n ? parent.offsetHeight || 0\n : 0\n\n const size = this.props.sizeRef.current!\n size.height = element.offsetHeight || 0\n size.width = element.offsetWidth || 0\n size.top = element.offsetTop\n size.left = element.offsetLeft\n size.right = parentWidth - size.width - size.left\n size.bottom = parentHeight - size.height - size.top\n }\n\n return null\n }\n\n /**\n * Required with getSnapshotBeforeUpdate to stop React complaining.\n */\n componentDidUpdate() {}\n\n render() {\n return this.props.children\n }\n}\n\nexport function PopChild({ children, isPresent, anchorX, anchorY, root, pop }: Props) {\n const id = useId()\n const ref = useRef<HTMLElement>(null)\n const size = useRef<Size>({\n width: 0,\n height: 0,\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n })\n const { nonce } = useContext(MotionConfigContext)\n /**\n * In React 19, refs are passed via props.ref instead of element.ref.\n * We check props.ref first (React 19) and fall back to element.ref (React 18).\n */\n const childRef =\n (children.props as { ref?: React.Ref<HTMLElement> })?.ref ??\n (children as unknown as { ref?: React.Ref<HTMLElement> })?.ref\n const composedRef = useComposedRefs(ref, childRef)\n\n /**\n * We create and inject a style block so we can apply this explicit\n * sizing in a non-destructive manner by just deleting the style block.\n *\n * We can't apply size via render as the measurement happens\n * in getSnapshotBeforeUpdate (post-render), likewise if we apply the\n * styles directly on the DOM node, we might be overwriting\n * styles set via the style prop.\n */\n useInsertionEffect(() => {\n const { width, height, top, left, right, bottom } = size.current\n if (isPresent || pop === false || !ref.current || !width || !height) return\n\n const x = anchorX === \"left\" ? `left: ${left}` : `right: ${right}`\n const y = anchorY === \"bottom\" ? `bottom: ${bottom}` : `top: ${top}`\n\n ref.current.dataset.motionPopId = id\n\n const style = document.createElement(\"style\")\n if (nonce) style.nonce = nonce\n\n const parent = root ?? document.head\n parent.appendChild(style)\n\n if (style.sheet) {\n style.sheet.insertRule(`\n [data-motion-pop-id=\"${id}\"] {\n position: absolute !important;\n width: ${width}px !important;\n height: ${height}px !important;\n ${x}px !important;\n ${y}px !important;\n }\n `)\n }\n\n return () => {\n if (parent.contains(style)) {\n parent.removeChild(style)\n }\n }\n }, [isPresent])\n\n return (\n <PopChildMeasure isPresent={isPresent} childRef={ref} sizeRef={size} pop={pop}>\n {pop === false\n ? children\n : React.cloneElement(children as any, { ref: composedRef })}\n </PopChildMeasure>\n )\n}\n"],"names":[],"mappings":";;;;;;;;AAgCA;;;AAGG;AACH;AACI;;;AAGQ;AACA;AACI;;AAEJ;AACI;;;;;AAMJ;AACA;AACA;AACA;;AAGJ;;AAGJ;;AAEG;AACH;;AAGI;;AAEP;AAEK;AACF;AACA;;AAEI;AACA;AACA;AACA;AACA;AACA;AACH;;AAED;;;AAGG;AACH;;;AAKA;;;;;;;;AAQG;;AAEC;AACA;;AAEA;AACA;;;AAKA;AAAW;AAEX;AACA;AAEA;AACI;;;;;;;;AAQH;;AAGD;AACI;AACI;;AAER;AACJ;;AAKY;AACA;AAGhB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PresenceChild.mjs","sources":["../../../../src/components/AnimatePresence/PresenceChild.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useId, useMemo } from \"react\"\nimport {\n PresenceContext,\n type PresenceContextProps,\n} from \"../../context/PresenceContext\"\nimport { VariantLabels } from \"../../motion/types\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { PopChild } from \"./PopChild\"\n\ninterface PresenceChildProps {\n children: React.ReactElement\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n mode: \"sync\" | \"popLayout\" | \"wait\"\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n custom,\n presenceAffectsLayout,\n mode,\n anchorX,\n anchorY,\n root\n}: PresenceChildProps) => {\n const presenceChildren = useConstant(newChildrenMap)\n const id = useId()\n\n let isReusedContext = true\n let context = useMemo((): PresenceContextProps => {\n isReusedContext = false\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: (childId: string) => {\n presenceChildren.set(childId, true)\n\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) return // can stop searching when any is incomplete\n }\n\n onExitComplete && onExitComplete()\n },\n register: (childId: string) => {\n presenceChildren.set(childId, false)\n return () => presenceChildren.delete(childId)\n },\n }\n }, [isPresent, presenceChildren, onExitComplete])\n\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n if (presenceAffectsLayout && isReusedContext) {\n context = { ...context }\n }\n\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isPresent])\n\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete()\n }, [isPresent])\n\n children = (\n <PopChild pop={mode === \"popLayout\"} isPresent={isPresent} anchorX={anchorX} anchorY={anchorY} root={root}>\n {children}\n </PopChild>\n )\n\n return (\n <PresenceContext.Provider value={context}>\n {children}\n </PresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],"names":[],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"PresenceChild.mjs","sources":["../../../../src/components/AnimatePresence/PresenceChild.tsx"],"sourcesContent":["\"use client\"\n\nimport * as React from \"react\"\nimport { useId, useMemo } from \"react\"\nimport {\n PresenceContext,\n type PresenceContextProps,\n} from \"../../context/PresenceContext\"\nimport { VariantLabels } from \"../../motion/types\"\nimport { useConstant } from \"../../utils/use-constant\"\nimport { PopChild } from \"./PopChild\"\n\ninterface PresenceChildProps {\n children: React.ReactElement\n isPresent: boolean\n onExitComplete?: () => void\n initial?: false | VariantLabels\n custom?: any\n presenceAffectsLayout: boolean\n mode: \"sync\" | \"popLayout\" | \"wait\"\n anchorX?: \"left\" | \"right\"\n anchorY?: \"top\" | \"bottom\"\n root?: HTMLElement | ShadowRoot\n}\n\nexport const PresenceChild = ({\n children,\n initial,\n isPresent,\n onExitComplete,\n custom,\n presenceAffectsLayout,\n mode,\n anchorX,\n anchorY,\n root\n}: PresenceChildProps) => {\n const presenceChildren = useConstant(newChildrenMap)\n const id = useId()\n\n let isReusedContext = true\n let context = useMemo((): PresenceContextProps => {\n isReusedContext = false\n return {\n id,\n initial,\n isPresent,\n custom,\n onExitComplete: (childId: string) => {\n presenceChildren.set(childId, true)\n\n for (const isComplete of presenceChildren.values()) {\n if (!isComplete) return // can stop searching when any is incomplete\n }\n\n onExitComplete && onExitComplete()\n },\n register: (childId: string) => {\n presenceChildren.set(childId, false)\n return () => presenceChildren.delete(childId)\n },\n }\n }, [isPresent, presenceChildren, onExitComplete])\n\n /**\n * If the presence of a child affects the layout of the components around it,\n * we want to make a new context value to ensure they get re-rendered\n * so they can detect that layout change.\n */\n if (presenceAffectsLayout && isReusedContext) {\n context = { ...context }\n }\n\n useMemo(() => {\n presenceChildren.forEach((_, key) => presenceChildren.set(key, false))\n }, [isPresent])\n\n /**\n * If there's no `motion` components to fire exit animations, we want to remove this\n * component immediately.\n */\n React.useEffect(() => {\n !isPresent &&\n !presenceChildren.size &&\n onExitComplete &&\n onExitComplete()\n }, [isPresent])\n\n children = (\n <PopChild pop={mode === \"popLayout\"} isPresent={isPresent} anchorX={anchorX} anchorY={anchorY} root={root}>\n {children}\n </PopChild>\n )\n\n return (\n <PresenceContext.Provider value={context}>\n {children}\n </PresenceContext.Provider>\n )\n}\n\nfunction newChildrenMap(): Map<string, boolean> {\n return new Map()\n}\n"],"names":[],"mappings":";;;;;;;;AAyBO;AAYH;AACA;;AAGA;;;;;;;AAOQ;AACI;;AAGI;AAAiB;;;;AAKzB;AACI;;;;;AAMZ;;;;AAIG;AACH;AACI;;;AAIA;AACJ;AAEA;;;AAGG;AACH;AACI;;;AAGI;AACR;AAEA;AAMA;AAKJ;AAEA;;AAEA;;"}
|