motion 10.18.0 → 11.11.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.turbo/turbo-build.log +32 -0
- package/{LICENSE → LICENSE.md} +2 -2
- package/README.md +99 -7
- package/dist/cjs/index.js +6117 -0
- package/dist/cjs/react-client.js +10003 -0
- package/dist/cjs/react-m.js +1852 -0
- package/dist/es/framer-motion/dist/es/animation/GroupPlaybackControls.mjs +78 -0
- package/dist/es/framer-motion/dist/es/animation/animate/index.mjs +34 -0
- package/dist/es/framer-motion/dist/es/animation/animate/resolve-subjects.mjs +19 -0
- package/dist/es/framer-motion/dist/es/animation/animate/sequence.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/animate/single-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/animation/animate/subject.mjs +52 -0
- package/dist/es/framer-motion/dist/es/animation/animators/AcceleratedAnimation.mjs +318 -0
- package/dist/es/framer-motion/dist/es/animation/animators/BaseAnimation.mjs +113 -0
- package/dist/es/framer-motion/dist/es/animation/animators/MainThreadAnimation.mjs +384 -0
- package/dist/es/framer-motion/dist/es/animation/animators/drivers/driver-frameloop.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/animators/utils/accelerated-values.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/animators/utils/can-animate.mjs +42 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/NativeAnimation.mjs +169 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-elements.mjs +36 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/animate-style.mjs +12 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/easing.mjs +44 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/index.mjs +23 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/attach-timeline.mjs +6 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/get-final-keyframe.mjs +12 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/linear.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/memo-supports.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/style.mjs +8 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-flags.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-linear-easing.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-partial-keyframes.mjs +13 -0
- package/dist/es/framer-motion/dist/es/animation/animators/waapi/utils/supports-waapi.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/generators/inertia.mjs +87 -0
- package/dist/es/framer-motion/dist/es/animation/generators/keyframes.mjs +51 -0
- package/dist/es/framer-motion/dist/es/animation/generators/spring/find.mjs +89 -0
- package/dist/es/framer-motion/dist/es/animation/generators/spring/index.mjs +129 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/calc-duration.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/is-generator.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/generators/utils/velocity.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/animation-controls.mjs +80 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animate-style.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animate.mjs +17 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animated-state.mjs +64 -0
- package/dist/es/framer-motion/dist/es/animation/hooks/use-animation.mjs +41 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/motion-value.mjs +113 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-target.mjs +75 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element-variant.mjs +66 -0
- package/dist/es/framer-motion/dist/es/animation/interfaces/visual-element.mjs +26 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/data-id.mjs +6 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/get-appear-id.mjs +7 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/handoff.mjs +40 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/start.mjs +173 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/store-id.mjs +8 -0
- package/dist/es/framer-motion/dist/es/animation/optimized-appear/store.mjs +4 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/create.mjs +230 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/calc-time.mjs +21 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/edit.mjs +31 -0
- package/dist/es/framer-motion/dist/es/animation/sequence/utils/sort.mjs +14 -0
- package/dist/es/framer-motion/dist/es/animation/utils/create-visual-element.mjs +44 -0
- package/dist/es/framer-motion/dist/es/animation/utils/default-transitions.mjs +40 -0
- package/dist/es/framer-motion/dist/es/animation/utils/get-value-transition.mjs +9 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-animatable.mjs +30 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-animation-controls.mjs +7 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-dom-keyframes.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-keyframes-target.mjs +5 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-none.mjs +15 -0
- package/dist/es/framer-motion/dist/es/animation/utils/is-transition-defined.mjs +10 -0
- package/dist/es/framer-motion/dist/es/animation/utils/stagger.mjs +26 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/PopChild.mjs +77 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/PresenceChild.mjs +61 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/index.mjs +163 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/use-presence.mjs +66 -0
- package/dist/es/framer-motion/dist/es/components/AnimatePresence/utils.mjs +14 -0
- package/dist/es/framer-motion/dist/es/components/AnimateSharedLayout.mjs +15 -0
- package/dist/es/framer-motion/dist/es/components/LayoutGroup/index.mjs +32 -0
- package/dist/es/framer-motion/dist/es/components/LazyMotion/index.mjs +68 -0
- package/dist/es/framer-motion/dist/es/components/MotionConfig/index.mjs +48 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/Group.mjs +53 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/Item.mjs +34 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/namespace.mjs +2 -0
- package/dist/es/framer-motion/dist/es/components/Reorder/utils/check-reorder.mjs +24 -0
- package/dist/es/framer-motion/dist/es/context/DeprecatedLayoutGroupContext.mjs +10 -0
- package/dist/es/framer-motion/dist/es/context/LayoutGroupContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/LazyContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/MotionConfigContext.mjs +13 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/create.mjs +13 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/index.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/MotionContext/utils.mjs +17 -0
- package/dist/es/framer-motion/dist/es/context/PresenceContext.mjs +9 -0
- package/dist/es/framer-motion/dist/es/context/ReorderContext.mjs +6 -0
- package/dist/es/framer-motion/dist/es/context/SwitchLayoutGroupContext.mjs +9 -0
- package/dist/es/framer-motion/dist/es/easing/anticipate.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/back.mjs +9 -0
- package/dist/es/framer-motion/dist/es/easing/circ.mjs +8 -0
- package/dist/es/framer-motion/dist/es/easing/cubic-bezier.mjs +51 -0
- package/dist/es/framer-motion/dist/es/easing/ease.mjs +7 -0
- package/dist/es/framer-motion/dist/es/easing/modifiers/mirror.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/modifiers/reverse.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/steps.mjs +15 -0
- package/dist/es/framer-motion/dist/es/easing/utils/create-generator-easing.mjs +17 -0
- package/dist/es/framer-motion/dist/es/easing/utils/get-easing-for-segment.mjs +8 -0
- package/dist/es/framer-motion/dist/es/easing/utils/is-bezier-definition.mjs +3 -0
- package/dist/es/framer-motion/dist/es/easing/utils/is-easing-array.mjs +5 -0
- package/dist/es/framer-motion/dist/es/easing/utils/map.mjs +38 -0
- package/dist/es/framer-motion/dist/es/events/add-dom-event.mjs +6 -0
- package/dist/es/framer-motion/dist/es/events/add-pointer-event.mjs +8 -0
- package/dist/es/framer-motion/dist/es/events/event-info.mjs +15 -0
- package/dist/es/framer-motion/dist/es/events/use-dom-event.mjs +34 -0
- package/dist/es/framer-motion/dist/es/events/utils/is-primary-pointer.mjs +18 -0
- package/dist/es/framer-motion/dist/es/frameloop/batcher.mjs +74 -0
- package/dist/es/framer-motion/dist/es/frameloop/frame.mjs +6 -0
- package/dist/es/framer-motion/dist/es/frameloop/index-legacy.mjs +20 -0
- package/dist/es/framer-motion/dist/es/frameloop/microtask.mjs +5 -0
- package/dist/es/framer-motion/dist/es/frameloop/render-step.mjs +80 -0
- package/dist/es/framer-motion/dist/es/frameloop/sync-time.mjs +31 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/VisualElementDragControls.mjs +487 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/index.mjs +27 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/use-drag-controls.mjs +88 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/constraints.mjs +129 -0
- package/dist/es/framer-motion/dist/es/gestures/drag/utils/lock.mjs +53 -0
- package/dist/es/framer-motion/dist/es/gestures/focus.mjs +41 -0
- package/dist/es/framer-motion/dist/es/gestures/hover.mjs +33 -0
- package/dist/es/framer-motion/dist/es/gestures/pan/PanSession.mjs +156 -0
- package/dist/es/framer-motion/dist/es/gestures/pan/index.mjs +50 -0
- package/dist/es/framer-motion/dist/es/gestures/press.mjs +130 -0
- package/dist/es/framer-motion/dist/es/gestures/utils/is-node-or-child.mjs +20 -0
- package/dist/es/framer-motion/dist/es/motion/features/Feature.mjs +9 -0
- package/dist/es/framer-motion/dist/es/motion/features/animation/exit.mjs +31 -0
- package/dist/es/framer-motion/dist/es/motion/features/animation/index.mjs +41 -0
- package/dist/es/framer-motion/dist/es/motion/features/animations.mjs +13 -0
- package/dist/es/framer-motion/dist/es/motion/features/definitions.mjs +28 -0
- package/dist/es/framer-motion/dist/es/motion/features/drag.mjs +17 -0
- package/dist/es/framer-motion/dist/es/motion/features/gestures.mjs +21 -0
- package/dist/es/framer-motion/dist/es/motion/features/layout/MeasureLayout.mjs +134 -0
- package/dist/es/framer-motion/dist/es/motion/features/layout.mjs +11 -0
- package/dist/es/framer-motion/dist/es/motion/features/load-features.mjs +12 -0
- package/dist/es/framer-motion/dist/es/motion/features/viewport/index.mjs +72 -0
- package/dist/es/framer-motion/dist/es/motion/features/viewport/observers.mjs +49 -0
- package/dist/es/framer-motion/dist/es/motion/index.mjs +98 -0
- package/dist/es/framer-motion/dist/es/motion/utils/is-forced-motion-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/motion/utils/is-motion-component.mjs +12 -0
- package/dist/es/framer-motion/dist/es/motion/utils/symbol.mjs +3 -0
- package/dist/es/framer-motion/dist/es/motion/utils/unwrap-motion-component.mjs +17 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-motion-ref.mjs +36 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-element.mjs +134 -0
- package/dist/es/framer-motion/dist/es/motion/utils/use-visual-state.mjs +82 -0
- package/dist/es/framer-motion/dist/es/motion/utils/valid-prop.mjs +57 -0
- package/dist/es/framer-motion/dist/es/projection/animation/mix-values.mjs +93 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/conversion.mjs +33 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/copy.mjs +31 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-apply.mjs +119 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-calc.mjs +52 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/delta-remove.mjs +54 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/models.mjs +17 -0
- package/dist/es/framer-motion/dist/es/projection/geometry/utils.mjs +31 -0
- package/dist/es/framer-motion/dist/es/projection/node/DocumentProjectionNode.mjs +13 -0
- package/dist/es/framer-motion/dist/es/projection/node/HTMLProjectionNode.mjs +27 -0
- package/dist/es/framer-motion/dist/es/projection/node/create-projection-node.mjs +1583 -0
- package/dist/es/framer-motion/dist/es/projection/node/group.mjs +24 -0
- package/dist/es/framer-motion/dist/es/projection/node/state.mjs +19 -0
- package/dist/es/framer-motion/dist/es/projection/shared/stack.mjs +112 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-border-radius.mjs +41 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-box-shadow.mjs +35 -0
- package/dist/es/framer-motion/dist/es/projection/styles/scale-correction.mjs +6 -0
- package/dist/es/framer-motion/dist/es/projection/styles/transform.mjs +49 -0
- package/dist/es/framer-motion/dist/es/projection/use-instant-layout-transition.mjs +14 -0
- package/dist/es/framer-motion/dist/es/projection/use-reset-projection.mjs +14 -0
- package/dist/es/framer-motion/dist/es/projection/utils/each-axis.mjs +5 -0
- package/dist/es/framer-motion/dist/es/projection/utils/has-transform.mjs +26 -0
- package/dist/es/framer-motion/dist/es/projection/utils/measure.mjs +17 -0
- package/dist/es/framer-motion/dist/es/render/VisualElement.mjs +477 -0
- package/dist/es/framer-motion/dist/es/render/components/create-factory.mjs +23 -0
- package/dist/es/framer-motion/dist/es/render/components/create-proxy.mjs +38 -0
- package/dist/es/framer-motion/dist/es/render/components/m/create.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/components/m/elements.mjs +227 -0
- package/dist/es/framer-motion/dist/es/render/components/m/proxy.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/create.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/elements.mjs +194 -0
- package/dist/es/framer-motion/dist/es/render/components/motion/proxy.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/DOMKeyframesResolver.mjs +130 -0
- package/dist/es/framer-motion/dist/es/render/dom/DOMVisualElement.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/dom/create-visual-element.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/features-animation.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/features-max.mjs +14 -0
- package/dist/es/framer-motion/dist/es/render/dom/features-min.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-element.mjs +64 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/handle-window.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/resize/index.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/index.mjs +80 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/info.mjs +56 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/observe.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/edge.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/index.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/inset.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/offset.mjs +35 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/offsets/presets.mjs +20 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/on-scroll-handler.mjs +48 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/supports.mjs +5 -0
- package/dist/es/framer-motion/dist/es/render/dom/scroll/track.mjs +84 -0
- package/dist/es/framer-motion/dist/es/render/dom/use-render.mjs +33 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/camel-to-dash.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/css-variables-conversion.mjs +42 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/filter-props.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-css-variable.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-component.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/is-svg-element.mjs +5 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/resolve-element.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/dom/utils/unit-conversion.mjs +65 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/animatable-none.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/defaults.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/dimensions.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/find.mjs +15 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/get-as-type.mjs +10 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/number-browser.mjs +41 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/number.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/test.mjs +6 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/transform.mjs +31 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/type-auto.mjs +9 -0
- package/dist/es/framer-motion/dist/es/render/dom/value-types/type-int.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/dom/viewport/index.mjs +43 -0
- package/dist/es/framer-motion/dist/es/render/html/HTMLVisualElement.mjs +57 -0
- package/dist/es/framer-motion/dist/es/render/html/config-motion.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/html/use-props.mjs +57 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/build-styles.mjs +65 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/build-transform.mjs +62 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/create-render-state.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/make-none-animatable.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/render.mjs +9 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/scrape-motion-values.mjs +20 -0
- package/dist/es/framer-motion/dist/es/render/html/utils/transform.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/object/ObjectVisualElement.mjs +41 -0
- package/dist/es/framer-motion/dist/es/render/store.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/svg/SVGVisualElement.mjs +45 -0
- package/dist/es/framer-motion/dist/es/render/svg/config-motion.mjs +40 -0
- package/dist/es/framer-motion/dist/es/render/svg/lowercase-elements.mjs +33 -0
- package/dist/es/framer-motion/dist/es/render/svg/use-props.mjs +24 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/build-attrs.mjs +52 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/camel-case-attrs.mjs +30 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/create-render-state.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/is-svg-tag.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/path.mjs +32 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/render.mjs +12 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/scrape-motion-values.mjs +19 -0
- package/dist/es/framer-motion/dist/es/render/svg/utils/transform-origin.mjs +18 -0
- package/dist/es/framer-motion/dist/es/render/utils/KeyframesResolver.mjs +164 -0
- package/dist/es/framer-motion/dist/es/render/utils/animation-state.mjs +332 -0
- package/dist/es/framer-motion/dist/es/render/utils/compare-by-depth.mjs +3 -0
- package/dist/es/framer-motion/dist/es/render/utils/flat-tree.mjs +24 -0
- package/dist/es/framer-motion/dist/es/render/utils/get-variant-context.mjs +28 -0
- package/dist/es/framer-motion/dist/es/render/utils/is-controlling-variants.mjs +13 -0
- package/dist/es/framer-motion/dist/es/render/utils/is-variant-label.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/utils/motion-values.mjs +59 -0
- package/dist/es/framer-motion/dist/es/render/utils/resolve-dynamic-variants.mjs +8 -0
- package/dist/es/framer-motion/dist/es/render/utils/resolve-variants.mjs +36 -0
- package/dist/es/framer-motion/dist/es/render/utils/setters.mjs +27 -0
- package/dist/es/framer-motion/dist/es/render/utils/variant-props.mjs +12 -0
- package/dist/es/framer-motion/dist/es/utils/GlobalConfig.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/array.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/clamp.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/delay.mjs +24 -0
- package/dist/es/framer-motion/dist/es/utils/distance.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/errors.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/get-context-window.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/hsla-to-rgba.mjs +42 -0
- package/dist/es/framer-motion/dist/es/utils/interpolate.mjs +75 -0
- package/dist/es/framer-motion/dist/es/utils/is-browser.mjs +3 -0
- package/dist/es/framer-motion/dist/es/utils/is-numerical-string.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/is-ref-object.mjs +7 -0
- package/dist/es/framer-motion/dist/es/utils/is-zero-value-string.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/memo.mjs +10 -0
- package/dist/es/framer-motion/dist/es/utils/mix/color.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/mix/complex.mjs +94 -0
- package/dist/es/framer-motion/dist/es/utils/mix/immediate.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/mix/index.mjs +14 -0
- package/dist/es/framer-motion/dist/es/utils/mix/number.mjs +26 -0
- package/dist/es/framer-motion/dist/es/utils/mix/visibility.mjs +16 -0
- package/dist/es/framer-motion/dist/es/utils/noop.mjs +3 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/default.mjs +9 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/fill.mjs +12 -0
- package/dist/es/framer-motion/dist/es/utils/offsets/time.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/pipe.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/progress.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/index.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/state.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion-config.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/resolve-value.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/shallow-compare.mjs +14 -0
- package/dist/es/framer-motion/dist/es/utils/subscription-manager.mjs +40 -0
- package/dist/es/framer-motion/dist/es/utils/time-conversion.mjs +10 -0
- package/dist/es/framer-motion/dist/es/utils/transform.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/use-animation-frame.mjs +21 -0
- package/dist/es/framer-motion/dist/es/utils/use-constant.mjs +18 -0
- package/dist/es/framer-motion/dist/es/utils/use-cycle.mjs +47 -0
- package/dist/es/framer-motion/dist/es/utils/use-force-update.mjs +19 -0
- package/dist/es/framer-motion/dist/es/utils/use-in-view.mjs +23 -0
- package/dist/es/framer-motion/dist/es/utils/use-instant-transition-state.mjs +5 -0
- package/dist/es/framer-motion/dist/es/utils/use-instant-transition.mjs +41 -0
- package/dist/es/framer-motion/dist/es/utils/use-is-mounted.mjs +15 -0
- package/dist/es/framer-motion/dist/es/utils/use-isomorphic-effect.mjs +6 -0
- package/dist/es/framer-motion/dist/es/utils/use-motion-value-event.mjs +13 -0
- package/dist/es/framer-motion/dist/es/utils/use-unmount-effect.mjs +7 -0
- package/dist/es/framer-motion/dist/es/utils/velocity-per-second.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/warn-once.mjs +11 -0
- package/dist/es/framer-motion/dist/es/utils/wrap.mjs +6 -0
- package/dist/es/framer-motion/dist/es/value/index.mjs +319 -0
- package/dist/es/framer-motion/dist/es/value/scroll/use-element-scroll.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/scroll/use-viewport-scroll.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/types/color/hex.mjs +40 -0
- package/dist/es/framer-motion/dist/es/value/types/color/hsla.mjs +22 -0
- package/dist/es/framer-motion/dist/es/value/types/color/index.mjs +27 -0
- package/dist/es/framer-motion/dist/es/value/types/color/rgba.mjs +25 -0
- package/dist/es/framer-motion/dist/es/value/types/color/utils.mjs +29 -0
- package/dist/es/framer-motion/dist/es/value/types/complex/filter.mjs +30 -0
- package/dist/es/framer-motion/dist/es/value/types/complex/index.mjs +92 -0
- package/dist/es/framer-motion/dist/es/value/types/numbers/index.mjs +17 -0
- package/dist/es/framer-motion/dist/es/value/types/numbers/units.mjs +17 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/color-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/float-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/is-nullish.mjs +5 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/sanitize.mjs +5 -0
- package/dist/es/framer-motion/dist/es/value/types/utils/single-color-regex.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/use-combine-values.mjs +37 -0
- package/dist/es/framer-motion/dist/es/value/use-computed.mjs +19 -0
- package/dist/es/framer-motion/dist/es/value/use-inverted-scale.mjs +52 -0
- package/dist/es/framer-motion/dist/es/value/use-motion-template.mjs +45 -0
- package/dist/es/framer-motion/dist/es/value/use-motion-value.mjs +38 -0
- package/dist/es/framer-motion/dist/es/value/use-scroll.mjs +39 -0
- package/dist/es/framer-motion/dist/es/value/use-spring.mjs +85 -0
- package/dist/es/framer-motion/dist/es/value/use-time.mjs +10 -0
- package/dist/es/framer-motion/dist/es/value/use-transform.mjs +29 -0
- package/dist/es/framer-motion/dist/es/value/use-velocity.mjs +35 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/WillChangeMotionValue.mjs +22 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/add-will-change.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/get-will-change-name.mjs +14 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/index.mjs +8 -0
- package/dist/es/framer-motion/dist/es/value/use-will-change/is.mjs +7 -0
- package/dist/es/framer-motion/dist/es/value/utils/is-motion-value.mjs +3 -0
- package/dist/es/framer-motion/dist/es/value/utils/resolve-motion-value.mjs +16 -0
- package/dist/es/motion/lib/index.mjs +30 -0
- package/dist/es/motion/lib/react-client.mjs +3 -0
- package/dist/es/motion/lib/react-m.mjs +3 -0
- package/dist/es/motion/lib/react.mjs +110 -0
- package/dist/index.d.ts +1 -0
- package/dist/motion.dev.js +6121 -0
- package/dist/motion.js +1 -0
- package/dist/react-client.d.ts +1 -0
- package/dist/react-m.d.ts +1 -0
- package/dist/react.d.ts +1 -0
- package/lib/index.js +1 -3
- package/lib/index.js.map +1 -1
- package/lib/react-client.js +3 -0
- package/lib/react-client.js.map +1 -0
- package/lib/react-m.js +3 -0
- package/lib/react-m.js.map +1 -0
- package/lib/react.js +3 -0
- package/lib/react.js.map +1 -0
- package/package.json +79 -29
- package/react/package.json +6 -0
- package/react-client/package.json +6 -0
- package/react-m/package.json +6 -0
- package/rollup.config.mjs +184 -0
- package/src/index.ts +1 -0
- package/src/react-client.ts +3 -0
- package/src/react-m.ts +3 -0
- package/src/react.ts +3 -0
- package/tsconfig.json +25 -0
- package/types/index.d.ts +1 -4
- package/types/react-client.d.ts +1 -0
- package/types/react-m.d.ts +1 -0
- package/types/react.d.ts +1 -0
- package/CHANGELOG.md +0 -378
- package/dist/animate.cjs.js +0 -22
- package/dist/animate.es.js +0 -19
- package/dist/main.cjs.js +0 -21
- package/dist/main.es.js +0 -3
- package/dist/motion.min.js +0 -1
- package/dist/motion.umd.js +0 -2364
- package/dist/size-index.js +0 -1
- package/lib/animate.js +0 -17
- package/lib/animate.js.map +0 -1
- package/types/animate.d.ts +0 -6
- package/types/animate.d.ts.map +0 -1
- package/types/index.d.ts.map +0 -1
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
2
|
+
import { useUnmountEffect } from '../../utils/use-unmount-effect.mjs';
|
|
3
|
+
import { createScopedAnimate } from '../animate/index.mjs';
|
|
4
|
+
|
|
5
|
+
function useAnimate() {
|
|
6
|
+
const scope = useConstant(() => ({
|
|
7
|
+
current: null, // Will be hydrated by React
|
|
8
|
+
animations: [],
|
|
9
|
+
}));
|
|
10
|
+
const animate = useConstant(() => createScopedAnimate(scope));
|
|
11
|
+
useUnmountEffect(() => {
|
|
12
|
+
scope.animations.forEach((animation) => animation.stop());
|
|
13
|
+
});
|
|
14
|
+
return [scope, animate];
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export { useAnimate };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import { useState, useLayoutEffect } from 'react';
|
|
2
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
3
|
+
import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
|
|
4
|
+
import { createBox } from '../../projection/geometry/models.mjs';
|
|
5
|
+
import { VisualElement } from '../../render/VisualElement.mjs';
|
|
6
|
+
import { animateVisualElement } from '../interfaces/visual-element.mjs';
|
|
7
|
+
|
|
8
|
+
const createObject = () => ({});
|
|
9
|
+
class StateVisualElement extends VisualElement {
|
|
10
|
+
constructor() {
|
|
11
|
+
super(...arguments);
|
|
12
|
+
this.measureInstanceViewportBox = createBox;
|
|
13
|
+
}
|
|
14
|
+
build() { }
|
|
15
|
+
resetTransform() { }
|
|
16
|
+
restoreTransform() { }
|
|
17
|
+
removeValueFromRenderState() { }
|
|
18
|
+
renderInstance() { }
|
|
19
|
+
scrapeMotionValuesFromProps() {
|
|
20
|
+
return createObject();
|
|
21
|
+
}
|
|
22
|
+
getBaseTargetFromProps() {
|
|
23
|
+
return undefined;
|
|
24
|
+
}
|
|
25
|
+
readValueFromInstance(_state, key, options) {
|
|
26
|
+
return options.initialState[key] || 0;
|
|
27
|
+
}
|
|
28
|
+
sortInstanceNodePosition() {
|
|
29
|
+
return 0;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
const useVisualState = makeUseVisualState({
|
|
33
|
+
scrapeMotionValuesFromProps: createObject,
|
|
34
|
+
createRenderState: createObject,
|
|
35
|
+
});
|
|
36
|
+
/**
|
|
37
|
+
* This is not an officially supported API and may be removed
|
|
38
|
+
* on any version.
|
|
39
|
+
*/
|
|
40
|
+
function useAnimatedState(initialState) {
|
|
41
|
+
const [animationState, setAnimationState] = useState(initialState);
|
|
42
|
+
const visualState = useVisualState({}, false);
|
|
43
|
+
const element = useConstant(() => {
|
|
44
|
+
return new StateVisualElement({
|
|
45
|
+
props: {
|
|
46
|
+
onUpdate: (v) => {
|
|
47
|
+
setAnimationState({ ...v });
|
|
48
|
+
},
|
|
49
|
+
},
|
|
50
|
+
visualState,
|
|
51
|
+
presenceContext: null,
|
|
52
|
+
}, { initialState });
|
|
53
|
+
});
|
|
54
|
+
useLayoutEffect(() => {
|
|
55
|
+
element.mount({});
|
|
56
|
+
return () => element.unmount();
|
|
57
|
+
}, [element]);
|
|
58
|
+
const startAnimation = useConstant(() => (animationDefinition) => {
|
|
59
|
+
return animateVisualElement(element, animationDefinition);
|
|
60
|
+
});
|
|
61
|
+
return [animationState, startAnimation];
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export { useAnimatedState };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { animationControls } from './animation-controls.mjs';
|
|
2
|
+
import { useConstant } from '../../utils/use-constant.mjs';
|
|
3
|
+
import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Creates `AnimationControls`, which can be used to manually start, stop
|
|
7
|
+
* and sequence animations on one or more components.
|
|
8
|
+
*
|
|
9
|
+
* The returned `AnimationControls` should be passed to the `animate` property
|
|
10
|
+
* of the components you want to animate.
|
|
11
|
+
*
|
|
12
|
+
* These components can then be animated with the `start` method.
|
|
13
|
+
*
|
|
14
|
+
* ```jsx
|
|
15
|
+
* import * as React from 'react'
|
|
16
|
+
* import { motion, useAnimation } from 'framer-motion'
|
|
17
|
+
*
|
|
18
|
+
* export function MyComponent(props) {
|
|
19
|
+
* const controls = useAnimation()
|
|
20
|
+
*
|
|
21
|
+
* controls.start({
|
|
22
|
+
* x: 100,
|
|
23
|
+
* transition: { duration: 0.5 },
|
|
24
|
+
* })
|
|
25
|
+
*
|
|
26
|
+
* return <motion.div animate={controls} />
|
|
27
|
+
* }
|
|
28
|
+
* ```
|
|
29
|
+
*
|
|
30
|
+
* @returns Animation controller with `start` and `stop` methods
|
|
31
|
+
*
|
|
32
|
+
* @public
|
|
33
|
+
*/
|
|
34
|
+
function useAnimationControls() {
|
|
35
|
+
const controls = useConstant(animationControls);
|
|
36
|
+
useIsomorphicLayoutEffect(controls.mount, []);
|
|
37
|
+
return controls;
|
|
38
|
+
}
|
|
39
|
+
const useAnimation = useAnimationControls;
|
|
40
|
+
|
|
41
|
+
export { useAnimation, useAnimationControls };
|
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import { secondsToMilliseconds } from '../../utils/time-conversion.mjs';
|
|
2
|
+
import { getDefaultTransition } from '../utils/default-transitions.mjs';
|
|
3
|
+
import { getValueTransition } from '../utils/get-value-transition.mjs';
|
|
4
|
+
import { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';
|
|
5
|
+
import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
|
|
6
|
+
import { getFinalKeyframe } from '../animators/waapi/utils/get-final-keyframe.mjs';
|
|
7
|
+
import { frame } from '../../frameloop/frame.mjs';
|
|
8
|
+
import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
|
|
9
|
+
import { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';
|
|
10
|
+
import { GroupPlaybackControls } from '../GroupPlaybackControls.mjs';
|
|
11
|
+
import { isTransitionDefined } from '../utils/is-transition-defined.mjs';
|
|
12
|
+
|
|
13
|
+
const animateMotionValue = (name, value, target, transition = {}, element, isHandoff) => (onComplete) => {
|
|
14
|
+
const valueTransition = getValueTransition(transition, name) || {};
|
|
15
|
+
/**
|
|
16
|
+
* Most transition values are currently completely overwritten by value-specific
|
|
17
|
+
* transitions. In the future it'd be nicer to blend these transitions. But for now
|
|
18
|
+
* delay actually does inherit from the root transition if not value-specific.
|
|
19
|
+
*/
|
|
20
|
+
const delay = valueTransition.delay || transition.delay || 0;
|
|
21
|
+
/**
|
|
22
|
+
* Elapsed isn't a public transition option but can be passed through from
|
|
23
|
+
* optimized appear effects in milliseconds.
|
|
24
|
+
*/
|
|
25
|
+
let { elapsed = 0 } = transition;
|
|
26
|
+
elapsed = elapsed - secondsToMilliseconds(delay);
|
|
27
|
+
let options = {
|
|
28
|
+
keyframes: Array.isArray(target) ? target : [null, target],
|
|
29
|
+
ease: "easeOut",
|
|
30
|
+
velocity: value.getVelocity(),
|
|
31
|
+
...valueTransition,
|
|
32
|
+
delay: -elapsed,
|
|
33
|
+
onUpdate: (v) => {
|
|
34
|
+
value.set(v);
|
|
35
|
+
valueTransition.onUpdate && valueTransition.onUpdate(v);
|
|
36
|
+
},
|
|
37
|
+
onComplete: () => {
|
|
38
|
+
onComplete();
|
|
39
|
+
valueTransition.onComplete && valueTransition.onComplete();
|
|
40
|
+
},
|
|
41
|
+
name,
|
|
42
|
+
motionValue: value,
|
|
43
|
+
element: isHandoff ? undefined : element,
|
|
44
|
+
};
|
|
45
|
+
/**
|
|
46
|
+
* If there's no transition defined for this value, we can generate
|
|
47
|
+
* unqiue transition settings for this value.
|
|
48
|
+
*/
|
|
49
|
+
if (!isTransitionDefined(valueTransition)) {
|
|
50
|
+
options = {
|
|
51
|
+
...options,
|
|
52
|
+
...getDefaultTransition(name, options),
|
|
53
|
+
};
|
|
54
|
+
}
|
|
55
|
+
/**
|
|
56
|
+
* Both WAAPI and our internal animation functions use durations
|
|
57
|
+
* as defined by milliseconds, while our external API defines them
|
|
58
|
+
* as seconds.
|
|
59
|
+
*/
|
|
60
|
+
if (options.duration) {
|
|
61
|
+
options.duration = secondsToMilliseconds(options.duration);
|
|
62
|
+
}
|
|
63
|
+
if (options.repeatDelay) {
|
|
64
|
+
options.repeatDelay = secondsToMilliseconds(options.repeatDelay);
|
|
65
|
+
}
|
|
66
|
+
if (options.from !== undefined) {
|
|
67
|
+
options.keyframes[0] = options.from;
|
|
68
|
+
}
|
|
69
|
+
let shouldSkip = false;
|
|
70
|
+
if (options.type === false ||
|
|
71
|
+
(options.duration === 0 && !options.repeatDelay)) {
|
|
72
|
+
options.duration = 0;
|
|
73
|
+
if (options.delay === 0) {
|
|
74
|
+
shouldSkip = true;
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
if (instantAnimationState.current ||
|
|
78
|
+
MotionGlobalConfig.skipAnimations) {
|
|
79
|
+
shouldSkip = true;
|
|
80
|
+
options.duration = 0;
|
|
81
|
+
options.delay = 0;
|
|
82
|
+
}
|
|
83
|
+
/**
|
|
84
|
+
* If we can or must skip creating the animation, and apply only
|
|
85
|
+
* the final keyframe, do so. We also check once keyframes are resolved but
|
|
86
|
+
* this early check prevents the need to create an animation at all.
|
|
87
|
+
*/
|
|
88
|
+
if (shouldSkip && !isHandoff && value.get() !== undefined) {
|
|
89
|
+
const finalKeyframe = getFinalKeyframe(options.keyframes, valueTransition);
|
|
90
|
+
if (finalKeyframe !== undefined) {
|
|
91
|
+
frame.update(() => {
|
|
92
|
+
options.onUpdate(finalKeyframe);
|
|
93
|
+
options.onComplete();
|
|
94
|
+
});
|
|
95
|
+
// We still want to return some animation controls here rather
|
|
96
|
+
// than returning undefined
|
|
97
|
+
return new GroupPlaybackControls([]);
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
/**
|
|
101
|
+
* Animate via WAAPI if possible. If this is a handoff animation, the optimised animation will be running via
|
|
102
|
+
* WAAPI. Therefore, this animation must be JS to ensure it runs "under" the
|
|
103
|
+
* optimised animation.
|
|
104
|
+
*/
|
|
105
|
+
if (!isHandoff && AcceleratedAnimation.supports(options)) {
|
|
106
|
+
return new AcceleratedAnimation(options);
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
return new MainThreadAnimation(options);
|
|
110
|
+
}
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
export { animateMotionValue };
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
import { transformProps } from '../../render/html/utils/transform.mjs';
|
|
2
|
+
import { animateMotionValue } from './motion-value.mjs';
|
|
3
|
+
import { setTarget } from '../../render/utils/setters.mjs';
|
|
4
|
+
import { getValueTransition } from '../utils/get-value-transition.mjs';
|
|
5
|
+
import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
|
|
6
|
+
import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
|
|
7
|
+
import { frame } from '../../frameloop/frame.mjs';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Decide whether we should block this animation. Previously, we achieved this
|
|
11
|
+
* just by checking whether the key was listed in protectedKeys, but this
|
|
12
|
+
* posed problems if an animation was triggered by afterChildren and protectedKeys
|
|
13
|
+
* had been set to true in the meantime.
|
|
14
|
+
*/
|
|
15
|
+
function shouldBlockAnimation({ protectedKeys, needsAnimating }, key) {
|
|
16
|
+
const shouldBlock = protectedKeys.hasOwnProperty(key) && needsAnimating[key] !== true;
|
|
17
|
+
needsAnimating[key] = false;
|
|
18
|
+
return shouldBlock;
|
|
19
|
+
}
|
|
20
|
+
function animateTarget(visualElement, targetAndTransition, { delay = 0, transitionOverride, type } = {}) {
|
|
21
|
+
var _a;
|
|
22
|
+
let { transition = visualElement.getDefaultTransition(), transitionEnd, ...target } = targetAndTransition;
|
|
23
|
+
if (transitionOverride)
|
|
24
|
+
transition = transitionOverride;
|
|
25
|
+
const animations = [];
|
|
26
|
+
const animationTypeState = type &&
|
|
27
|
+
visualElement.animationState &&
|
|
28
|
+
visualElement.animationState.getState()[type];
|
|
29
|
+
for (const key in target) {
|
|
30
|
+
const value = visualElement.getValue(key, (_a = visualElement.latestValues[key]) !== null && _a !== void 0 ? _a : null);
|
|
31
|
+
const valueTarget = target[key];
|
|
32
|
+
if (valueTarget === undefined ||
|
|
33
|
+
(animationTypeState &&
|
|
34
|
+
shouldBlockAnimation(animationTypeState, key))) {
|
|
35
|
+
continue;
|
|
36
|
+
}
|
|
37
|
+
const valueTransition = {
|
|
38
|
+
delay,
|
|
39
|
+
...getValueTransition(transition || {}, key),
|
|
40
|
+
};
|
|
41
|
+
/**
|
|
42
|
+
* If this is the first time a value is being animated, check
|
|
43
|
+
* to see if we're handling off from an existing animation.
|
|
44
|
+
*/
|
|
45
|
+
let isHandoff = false;
|
|
46
|
+
if (window.MotionHandoffAnimation) {
|
|
47
|
+
const appearId = getOptimisedAppearId(visualElement);
|
|
48
|
+
if (appearId) {
|
|
49
|
+
const startTime = window.MotionHandoffAnimation(appearId, key, frame);
|
|
50
|
+
if (startTime !== null) {
|
|
51
|
+
valueTransition.startTime = startTime;
|
|
52
|
+
isHandoff = true;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
addValueToWillChange(visualElement, key);
|
|
57
|
+
value.start(animateMotionValue(key, value, valueTarget, visualElement.shouldReduceMotion && transformProps.has(key)
|
|
58
|
+
? { type: false }
|
|
59
|
+
: valueTransition, visualElement, isHandoff));
|
|
60
|
+
const animation = value.animation;
|
|
61
|
+
if (animation) {
|
|
62
|
+
animations.push(animation);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
if (transitionEnd) {
|
|
66
|
+
Promise.all(animations).then(() => {
|
|
67
|
+
frame.update(() => {
|
|
68
|
+
transitionEnd && setTarget(visualElement, transitionEnd);
|
|
69
|
+
});
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
return animations;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
export { animateTarget };
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
|
|
2
|
+
import { animateTarget } from './visual-element-target.mjs';
|
|
3
|
+
|
|
4
|
+
function animateVariant(visualElement, variant, options = {}) {
|
|
5
|
+
var _a;
|
|
6
|
+
const resolved = resolveVariant(visualElement, variant, options.type === "exit"
|
|
7
|
+
? (_a = visualElement.presenceContext) === null || _a === void 0 ? void 0 : _a.custom
|
|
8
|
+
: undefined);
|
|
9
|
+
let { transition = visualElement.getDefaultTransition() || {} } = resolved || {};
|
|
10
|
+
if (options.transitionOverride) {
|
|
11
|
+
transition = options.transitionOverride;
|
|
12
|
+
}
|
|
13
|
+
/**
|
|
14
|
+
* If we have a variant, create a callback that runs it as an animation.
|
|
15
|
+
* Otherwise, we resolve a Promise immediately for a composable no-op.
|
|
16
|
+
*/
|
|
17
|
+
const getAnimation = resolved
|
|
18
|
+
? () => Promise.all(animateTarget(visualElement, resolved, options))
|
|
19
|
+
: () => Promise.resolve();
|
|
20
|
+
/**
|
|
21
|
+
* If we have children, create a callback that runs all their animations.
|
|
22
|
+
* Otherwise, we resolve a Promise immediately for a composable no-op.
|
|
23
|
+
*/
|
|
24
|
+
const getChildAnimations = visualElement.variantChildren && visualElement.variantChildren.size
|
|
25
|
+
? (forwardDelay = 0) => {
|
|
26
|
+
const { delayChildren = 0, staggerChildren, staggerDirection, } = transition;
|
|
27
|
+
return animateChildren(visualElement, variant, delayChildren + forwardDelay, staggerChildren, staggerDirection, options);
|
|
28
|
+
}
|
|
29
|
+
: () => Promise.resolve();
|
|
30
|
+
/**
|
|
31
|
+
* If the transition explicitly defines a "when" option, we need to resolve either
|
|
32
|
+
* this animation or all children animations before playing the other.
|
|
33
|
+
*/
|
|
34
|
+
const { when } = transition;
|
|
35
|
+
if (when) {
|
|
36
|
+
const [first, last] = when === "beforeChildren"
|
|
37
|
+
? [getAnimation, getChildAnimations]
|
|
38
|
+
: [getChildAnimations, getAnimation];
|
|
39
|
+
return first().then(() => last());
|
|
40
|
+
}
|
|
41
|
+
else {
|
|
42
|
+
return Promise.all([getAnimation(), getChildAnimations(options.delay)]);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
function animateChildren(visualElement, variant, delayChildren = 0, staggerChildren = 0, staggerDirection = 1, options) {
|
|
46
|
+
const animations = [];
|
|
47
|
+
const maxStaggerDuration = (visualElement.variantChildren.size - 1) * staggerChildren;
|
|
48
|
+
const generateStaggerDuration = staggerDirection === 1
|
|
49
|
+
? (i = 0) => i * staggerChildren
|
|
50
|
+
: (i = 0) => maxStaggerDuration - i * staggerChildren;
|
|
51
|
+
Array.from(visualElement.variantChildren)
|
|
52
|
+
.sort(sortByTreeOrder)
|
|
53
|
+
.forEach((child, i) => {
|
|
54
|
+
child.notify("AnimationStart", variant);
|
|
55
|
+
animations.push(animateVariant(child, variant, {
|
|
56
|
+
...options,
|
|
57
|
+
delay: delayChildren + generateStaggerDuration(i),
|
|
58
|
+
}).then(() => child.notify("AnimationComplete", variant)));
|
|
59
|
+
});
|
|
60
|
+
return Promise.all(animations);
|
|
61
|
+
}
|
|
62
|
+
function sortByTreeOrder(a, b) {
|
|
63
|
+
return a.sortNodePosition(b);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
export { animateVariant, sortByTreeOrder };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { resolveVariant } from '../../render/utils/resolve-dynamic-variants.mjs';
|
|
2
|
+
import { animateTarget } from './visual-element-target.mjs';
|
|
3
|
+
import { animateVariant } from './visual-element-variant.mjs';
|
|
4
|
+
|
|
5
|
+
function animateVisualElement(visualElement, definition, options = {}) {
|
|
6
|
+
visualElement.notify("AnimationStart", definition);
|
|
7
|
+
let animation;
|
|
8
|
+
if (Array.isArray(definition)) {
|
|
9
|
+
const animations = definition.map((variant) => animateVariant(visualElement, variant, options));
|
|
10
|
+
animation = Promise.all(animations);
|
|
11
|
+
}
|
|
12
|
+
else if (typeof definition === "string") {
|
|
13
|
+
animation = animateVariant(visualElement, definition, options);
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
const resolvedDefinition = typeof definition === "function"
|
|
17
|
+
? resolveVariant(visualElement, definition, options.custom)
|
|
18
|
+
: definition;
|
|
19
|
+
animation = Promise.all(animateTarget(visualElement, resolvedDefinition, options));
|
|
20
|
+
}
|
|
21
|
+
return animation.then(() => {
|
|
22
|
+
visualElement.notify("AnimationComplete", definition);
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export { animateVisualElement };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { camelToDash } from '../../render/dom/utils/camel-to-dash.mjs';
|
|
2
|
+
|
|
3
|
+
const optimizedAppearDataId = "framerAppearId";
|
|
4
|
+
const optimizedAppearDataAttribute = "data-" + camelToDash(optimizedAppearDataId);
|
|
5
|
+
|
|
6
|
+
export { optimizedAppearDataAttribute, optimizedAppearDataId };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { appearAnimationStore } from './store.mjs';
|
|
2
|
+
import { appearStoreId } from './store-id.mjs';
|
|
3
|
+
|
|
4
|
+
function handoffOptimizedAppearAnimation(elementId, valueName, frame) {
|
|
5
|
+
var _a;
|
|
6
|
+
const storeId = appearStoreId(elementId, valueName);
|
|
7
|
+
const optimisedAnimation = appearAnimationStore.get(storeId);
|
|
8
|
+
if (!optimisedAnimation) {
|
|
9
|
+
return null;
|
|
10
|
+
}
|
|
11
|
+
const { animation, startTime } = optimisedAnimation;
|
|
12
|
+
function cancelAnimation() {
|
|
13
|
+
var _a;
|
|
14
|
+
(_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, elementId, valueName, frame);
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* We can cancel the animation once it's finished now that we've synced
|
|
18
|
+
* with Motion.
|
|
19
|
+
*
|
|
20
|
+
* Prefer onfinish over finished as onfinish is backwards compatible with
|
|
21
|
+
* older browsers.
|
|
22
|
+
*/
|
|
23
|
+
animation.onfinish = cancelAnimation;
|
|
24
|
+
if (startTime === null || ((_a = window.MotionHandoffIsComplete) === null || _a === void 0 ? void 0 : _a.call(window, elementId))) {
|
|
25
|
+
/**
|
|
26
|
+
* If the startTime is null, this animation is the Paint Ready detection animation
|
|
27
|
+
* and we can cancel it immediately without handoff.
|
|
28
|
+
*
|
|
29
|
+
* Or if we've already handed off the animation then we're now interrupting it.
|
|
30
|
+
* In which case we need to cancel it.
|
|
31
|
+
*/
|
|
32
|
+
cancelAnimation();
|
|
33
|
+
return null;
|
|
34
|
+
}
|
|
35
|
+
else {
|
|
36
|
+
return startTime;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { handoffOptimizedAppearAnimation };
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { appearStoreId } from './store-id.mjs';
|
|
2
|
+
import { startWaapiAnimation } from '../animators/waapi/index.mjs';
|
|
3
|
+
import { optimizedAppearDataId } from './data-id.mjs';
|
|
4
|
+
import { handoffOptimizedAppearAnimation } from './handoff.mjs';
|
|
5
|
+
import { appearAnimationStore, appearComplete } from './store.mjs';
|
|
6
|
+
import { noop } from '../../utils/noop.mjs';
|
|
7
|
+
import { getOptimisedAppearId } from './get-appear-id.mjs';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* A single time to use across all animations to manually set startTime
|
|
11
|
+
* and ensure they're all in sync.
|
|
12
|
+
*/
|
|
13
|
+
let startFrameTime;
|
|
14
|
+
/**
|
|
15
|
+
* A dummy animation to detect when Chrome is ready to start
|
|
16
|
+
* painting the page and hold off from triggering the real animation
|
|
17
|
+
* until then. We only need one animation to detect paint ready.
|
|
18
|
+
*
|
|
19
|
+
* https://bugs.chromium.org/p/chromium/issues/detail?id=1406850
|
|
20
|
+
*/
|
|
21
|
+
let readyAnimation;
|
|
22
|
+
/**
|
|
23
|
+
* Keep track of animations that were suspended vs cancelled so we
|
|
24
|
+
* can easily resume them when we're done measuring layout.
|
|
25
|
+
*/
|
|
26
|
+
const suspendedAnimations = new Set();
|
|
27
|
+
function resumeSuspendedAnimations() {
|
|
28
|
+
suspendedAnimations.forEach((data) => {
|
|
29
|
+
data.animation.play();
|
|
30
|
+
data.animation.startTime = data.startTime;
|
|
31
|
+
});
|
|
32
|
+
suspendedAnimations.clear();
|
|
33
|
+
}
|
|
34
|
+
function startOptimizedAppearAnimation(element, name, keyframes, options, onReady) {
|
|
35
|
+
// Prevent optimised appear animations if Motion has already started animating.
|
|
36
|
+
if (window.MotionIsMounted) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
const id = element.dataset[optimizedAppearDataId];
|
|
40
|
+
if (!id)
|
|
41
|
+
return;
|
|
42
|
+
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
|
|
43
|
+
const storeId = appearStoreId(id, name);
|
|
44
|
+
if (!readyAnimation) {
|
|
45
|
+
readyAnimation = startWaapiAnimation(element, name, [keyframes[0], keyframes[0]],
|
|
46
|
+
/**
|
|
47
|
+
* 10 secs is basically just a super-safe duration to give Chrome
|
|
48
|
+
* long enough to get the animation ready.
|
|
49
|
+
*/
|
|
50
|
+
{ duration: 10000, ease: "linear" });
|
|
51
|
+
appearAnimationStore.set(storeId, {
|
|
52
|
+
animation: readyAnimation,
|
|
53
|
+
startTime: null,
|
|
54
|
+
});
|
|
55
|
+
/**
|
|
56
|
+
* If there's no readyAnimation then there's been no instantiation
|
|
57
|
+
* of handoff animations.
|
|
58
|
+
*/
|
|
59
|
+
window.MotionHandoffAnimation = handoffOptimizedAppearAnimation;
|
|
60
|
+
window.MotionHasOptimisedAnimation = (elementId, valueName) => {
|
|
61
|
+
if (!elementId)
|
|
62
|
+
return false;
|
|
63
|
+
/**
|
|
64
|
+
* Keep a map of elementIds that have started animating. We check
|
|
65
|
+
* via ID instead of Element because of hydration errors and
|
|
66
|
+
* pre-hydration checks. We also actively record IDs as they start
|
|
67
|
+
* animating rather than simply checking for data-appear-id as
|
|
68
|
+
* this attrbute might be present but not lead to an animation, for
|
|
69
|
+
* instance if the element's appear animation is on a different
|
|
70
|
+
* breakpoint.
|
|
71
|
+
*/
|
|
72
|
+
if (!valueName) {
|
|
73
|
+
return appearComplete.has(elementId);
|
|
74
|
+
}
|
|
75
|
+
const animationId = appearStoreId(elementId, valueName);
|
|
76
|
+
return Boolean(appearAnimationStore.get(animationId));
|
|
77
|
+
};
|
|
78
|
+
window.MotionHandoffMarkAsComplete = (elementId) => {
|
|
79
|
+
if (appearComplete.has(elementId)) {
|
|
80
|
+
appearComplete.set(elementId, true);
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
window.MotionHandoffIsComplete = (elementId) => {
|
|
84
|
+
return appearComplete.get(elementId) === true;
|
|
85
|
+
};
|
|
86
|
+
/**
|
|
87
|
+
* We only need to cancel transform animations as
|
|
88
|
+
* they're the ones that will interfere with the
|
|
89
|
+
* layout animation measurements.
|
|
90
|
+
*/
|
|
91
|
+
window.MotionCancelOptimisedAnimation = (elementId, valueName, frame, canResume) => {
|
|
92
|
+
const animationId = appearStoreId(elementId, valueName);
|
|
93
|
+
const data = appearAnimationStore.get(animationId);
|
|
94
|
+
if (!data)
|
|
95
|
+
return;
|
|
96
|
+
if (frame && canResume === undefined) {
|
|
97
|
+
/**
|
|
98
|
+
* Wait until the end of the subsequent frame to cancel the animation
|
|
99
|
+
* to ensure we don't remove the animation before the main thread has
|
|
100
|
+
* had a chance to resolve keyframes and render.
|
|
101
|
+
*/
|
|
102
|
+
frame.postRender(() => {
|
|
103
|
+
frame.postRender(() => {
|
|
104
|
+
data.animation.cancel();
|
|
105
|
+
});
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
else {
|
|
109
|
+
data.animation.cancel();
|
|
110
|
+
}
|
|
111
|
+
if (frame && canResume) {
|
|
112
|
+
suspendedAnimations.add(data);
|
|
113
|
+
frame.render(resumeSuspendedAnimations);
|
|
114
|
+
}
|
|
115
|
+
else {
|
|
116
|
+
appearAnimationStore.delete(animationId);
|
|
117
|
+
/**
|
|
118
|
+
* If there are no more animations left, we can remove the cancel function.
|
|
119
|
+
* This will let us know when we can stop checking for conflicting layout animations.
|
|
120
|
+
*/
|
|
121
|
+
if (!appearAnimationStore.size) {
|
|
122
|
+
window.MotionCancelOptimisedAnimation = undefined;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
window.MotionCheckAppearSync = (visualElement, valueName, value) => {
|
|
127
|
+
var _a, _b;
|
|
128
|
+
const appearId = getOptimisedAppearId(visualElement);
|
|
129
|
+
if (!appearId)
|
|
130
|
+
return;
|
|
131
|
+
const valueIsOptimised = (_a = window.MotionHasOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
|
|
132
|
+
const externalAnimationValue = (_b = visualElement.props.values) === null || _b === void 0 ? void 0 : _b[valueName];
|
|
133
|
+
if (!valueIsOptimised || !externalAnimationValue)
|
|
134
|
+
return;
|
|
135
|
+
const removeSyncCheck = value.on("change", (latestValue) => {
|
|
136
|
+
var _a;
|
|
137
|
+
if (externalAnimationValue.get() !== latestValue) {
|
|
138
|
+
(_a = window.MotionCancelOptimisedAnimation) === null || _a === void 0 ? void 0 : _a.call(window, appearId, valueName);
|
|
139
|
+
removeSyncCheck();
|
|
140
|
+
}
|
|
141
|
+
});
|
|
142
|
+
return removeSyncCheck;
|
|
143
|
+
};
|
|
144
|
+
}
|
|
145
|
+
const startAnimation = () => {
|
|
146
|
+
readyAnimation.cancel();
|
|
147
|
+
const appearAnimation = startWaapiAnimation(element, name, keyframes, options);
|
|
148
|
+
/**
|
|
149
|
+
* Record the time of the first started animation. We call performance.now() once
|
|
150
|
+
* here and once in handoff to ensure we're getting
|
|
151
|
+
* close to a frame-locked time. This keeps all animations in sync.
|
|
152
|
+
*/
|
|
153
|
+
if (startFrameTime === undefined) {
|
|
154
|
+
startFrameTime = performance.now();
|
|
155
|
+
}
|
|
156
|
+
appearAnimation.startTime = startFrameTime;
|
|
157
|
+
appearAnimationStore.set(storeId, {
|
|
158
|
+
animation: appearAnimation,
|
|
159
|
+
startTime: startFrameTime,
|
|
160
|
+
});
|
|
161
|
+
if (onReady)
|
|
162
|
+
onReady(appearAnimation);
|
|
163
|
+
};
|
|
164
|
+
appearComplete.set(id, false);
|
|
165
|
+
if (readyAnimation.ready) {
|
|
166
|
+
readyAnimation.ready.then(startAnimation).catch(noop);
|
|
167
|
+
}
|
|
168
|
+
else {
|
|
169
|
+
startAnimation();
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
export { startOptimizedAppearAnimation };
|