framer-motion 12.4.12 → 12.5.0

package/dist/es/animation/animators/BaseAnimation.mjs

@@ -1,4 +1,4 @@
-import { time } from '../../frameloop/sync-time.mjs';
+import { time } from 'motion-dom';
 import { flushKeyframeResolvers } from '../../render/utils/KeyframesResolver.mjs';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { canAnimate } from './utils/can-animate.mjs';

package/dist/es/animation/animators/MainThreadAnimation.mjs

@@ -1,7 +1,6 @@
-import { isGenerator, calcGeneratorDuration } from 'motion-dom';
+import { isGenerator, calcGeneratorDuration, activeAnimations } from 'motion-dom';
 import { invariant, millisecondsToSeconds, secondsToMilliseconds } from 'motion-utils';
 import { KeyframeResolver } from '../../render/utils/KeyframesResolver.mjs';
-import { activeAnimations } from '../../stats/animation-count.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 import { mix } from '../../utils/mix/index.mjs';
 import { pipe } from '../../utils/pipe.mjs';

package/dist/es/animation/animators/drivers/driver-frameloop.mjs

@@ -1,5 +1,4 @@
-import { time } from '../../../frameloop/sync-time.mjs';
-import { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';
+import { frame, cancelFrame, frameData, time } from 'motion-dom';
 
 const frameloopDriver = (update) => {
     const passTimestamp = ({ timestamp }) => update(timestamp);

package/dist/es/animation/animators/waapi/index.mjs

@@ -1,6 +1,4 @@
-import { mapEasingToNativeEasing } from 'motion-dom';
-import { activeAnimations } from '../../../stats/animation-count.mjs';
-import { statsBuffer } from '../../../stats/buffer.mjs';
+import { mapEasingToNativeEasing, statsBuffer, activeAnimations } from 'motion-dom';
 
 function startWaapiAnimation(element, valueName, keyframes, { delay = 0, duration = 300, repeat = 0, repeatType = "loop", ease = "easeInOut", times, } = {}) {
     const keyframeOptions = { [valueName]: keyframes };

package/dist/es/animation/generators/utils/velocity.mjs

@@ -1,4 +1,4 @@
-import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';
+import { velocityPerSecond } from 'motion-utils';
 
 const velocitySampleDuration = 5; // ms
 function calcGeneratorVelocity(resolveValue, t, current) {

package/dist/es/animation/interfaces/motion-value.mjs

@@ -1,7 +1,5 @@
-import { getValueTransition, GroupPlaybackControls } from 'motion-dom';
-import { secondsToMilliseconds } from 'motion-utils';
-import { frame } from '../../frameloop/frame.mjs';
-import { MotionGlobalConfig } from '../../utils/GlobalConfig.mjs';
+import { getValueTransition, frame, GroupPlaybackControls } from 'motion-dom';
+import { secondsToMilliseconds, MotionGlobalConfig } from 'motion-utils';
 import { instantAnimationState } from '../../utils/use-instant-transition-state.mjs';
 import { AcceleratedAnimation } from '../animators/AcceleratedAnimation.mjs';
 import { MainThreadAnimation } from '../animators/MainThreadAnimation.mjs';

package/dist/es/animation/interfaces/visual-element-target.mjs

@@ -1,10 +1,9 @@
-import { getValueTransition } from 'motion-dom';
+import { getValueTransition, frame } from 'motion-dom';
 import { positionalKeys } from '../../render/html/utils/keys-position.mjs';
 import { setTarget } from '../../render/utils/setters.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
 import { getOptimisedAppearId } from '../optimized-appear/get-appear-id.mjs';
 import { animateMotionValue } from './motion-value.mjs';
-import { frame } from '../../frameloop/frame.mjs';
 
 /**
  * Decide whether we should block this animation. Previously, we achieved this

package/dist/es/animation/optimized-appear/start.mjs

@@ -1,10 +1,10 @@
-import { appearStoreId } from './store-id.mjs';
+import { noop } from 'motion-utils';
 import { startWaapiAnimation } from '../animators/waapi/index.mjs';
 import { optimizedAppearDataId } from './data-id.mjs';
+import { getOptimisedAppearId } from './get-appear-id.mjs';
 import { handoffOptimizedAppearAnimation } from './handoff.mjs';
 import { appearAnimationStore, appearComplete } from './store.mjs';
-import { noop } from 'motion-utils';
-import { getOptimisedAppearId } from './get-appear-id.mjs';
+import { appearStoreId } from './store-id.mjs';
 
 /**
  * A single time to use across all animations to manually set startTime

package/dist/es/animation/sequence/utils/edit.mjs

@@ -1,5 +1,5 @@
+import { removeItem } from 'motion-utils';
 import { getEasingForSegment } from '../../../easing/utils/get-easing-for-segment.mjs';
-import { removeItem } from '../../../utils/array.mjs';
 import { mixNumber } from '../../../utils/mix/number.mjs';
 
 function eraseKeyframes(sequence, startTime, endTime) {

package/dist/es/components/AnimatePresence/index.mjs

@@ -3,10 +3,10 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 import { useMemo, useRef, useState, useContext } from 'react';
 import { LayoutGroupContext } from '../../context/LayoutGroupContext.mjs';
 import { useConstant } from '../../utils/use-constant.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 import { PresenceChild } from './PresenceChild.mjs';
 import { usePresence } from './use-presence.mjs';
 import { onlyElements, getChildKey } from './utils.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
 /**
  * `AnimatePresence` enables the animation of components that have been removed from the tree.

package/dist/es/components/Reorder/utils/check-reorder.mjs

@@ -1,4 +1,4 @@
-import { moveItem } from '../../../utils/array.mjs';
+import { moveItem } from 'motion-utils';
 import { mixNumber } from '../../../utils/mix/number.mjs';
 
 function checkReorder(order, value, offset, velocity) {

package/dist/es/debug.mjs

@@ -1 +1 @@
-export { recordStats } from './stats/index.mjs';
+export { recordStats } from 'motion-dom';

package/dist/es/dom.mjs

@@ -1,11 +1,10 @@
-export { hover, isDragActive, press } from 'motion-dom';
+export { MotionValue, cancelFrame, frame, frameData, hover, isDragActive, motionValue, press, time } from 'motion-dom';
 export { invariant, noop, progress } from 'motion-utils';
 export { animate, createScopedAnimate } from './animation/animate/index.mjs';
 export { animateMini } from './animation/animators/waapi/animate-style.mjs';
 export { scroll } from './render/dom/scroll/index.mjs';
 export { scrollInfo } from './render/dom/scroll/track.mjs';
 export { inView } from './render/dom/viewport/index.mjs';
-export { MotionValue, motionValue } from './value/index.mjs';
 export { anticipate } from './easing/anticipate.mjs';
 export { backIn, backInOut, backOut } from './easing/back.mjs';
 export { circIn, circInOut, circOut } from './easing/circ.mjs';
@@ -18,7 +17,6 @@ export { inertia } from './animation/generators/inertia.mjs';
 export { keyframes } from './animation/generators/keyframes.mjs';
 export { spring } from './animation/generators/spring/index.mjs';
 export { stagger } from './animation/utils/stagger.mjs';
-export { time } from './frameloop/sync-time.mjs';
 export { clamp } from './utils/clamp.mjs';
 export { delayInSeconds as delay } from './utils/delay.mjs';
 export { distance, distance2D } from './utils/distance.mjs';
@@ -27,5 +25,3 @@ export { mix } from './utils/mix/index.mjs';
 export { pipe } from './utils/pipe.mjs';
 export { transform } from './utils/transform.mjs';
 export { wrap } from './utils/wrap.mjs';
-export { cancelSync, sync } from './frameloop/index-legacy.mjs';
-export { cancelFrame, frame, frameData, frameSteps } from './frameloop/frame.mjs';

package/dist/es/gestures/drag/VisualElementDragControls.mjs

@@ -1,4 +1,4 @@
-import { setDragLock } from 'motion-dom';
+import { frame, setDragLock } from 'motion-dom';
 import { invariant } from 'motion-utils';
 import { animateMotionValue } from '../../animation/interfaces/motion-value.mjs';
 import { addDomEvent } from '../../events/add-dom-event.mjs';
@@ -16,7 +16,6 @@ import { percent } from '../../value/types/numbers/units.mjs';
 import { addValueToWillChange } from '../../value/use-will-change/add-will-change.mjs';
 import { PanSession } from '../pan/PanSession.mjs';
 import { applyConstraints, calcRelativeConstraints, resolveDragElastic, rebaseAxisConstraints, calcViewportConstraints, calcOrigin, defaultElastic } from './utils/constraints.mjs';
-import { frame } from '../../frameloop/frame.mjs';
 
 const elementDragControls = new WeakMap();
 /**

package/dist/es/gestures/hover.mjs

@@ -1,7 +1,6 @@
-import { hover } from 'motion-dom';
+import { hover, frame } from 'motion-dom';
 import { extractEventInfo } from '../events/event-info.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { frame } from '../frameloop/frame.mjs';
 
 function handleHoverEvent(node, event, lifecycle) {
     const { props } = node;

package/dist/es/gestures/pan/PanSession.mjs

@@ -1,10 +1,9 @@
-import { isPrimaryPointer } from 'motion-dom';
+import { frame, isPrimaryPointer, cancelFrame, frameData } from 'motion-dom';
 import { secondsToMilliseconds, millisecondsToSeconds } from 'motion-utils';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { extractEventInfo } from '../../events/event-info.mjs';
 import { distance2D } from '../../utils/distance.mjs';
 import { pipe } from '../../utils/pipe.mjs';
-import { frame, cancelFrame, frameData } from '../../frameloop/frame.mjs';
 
 /**
  * @internal

package/dist/es/gestures/pan/index.mjs

@@ -1,9 +1,9 @@
+import { frame } from 'motion-dom';
 import { noop } from 'motion-utils';
 import { addPointerEvent } from '../../events/add-pointer-event.mjs';
 import { Feature } from '../../motion/features/Feature.mjs';
 import { getContextWindow } from '../../utils/get-context-window.mjs';
 import { PanSession } from './PanSession.mjs';
-import { frame } from '../../frameloop/frame.mjs';
 
 const asyncHandler = (handler) => (event, info) => {
     if (handler) {

package/dist/es/gestures/press.mjs

@@ -1,7 +1,6 @@
-import { press } from 'motion-dom';
+import { press, frame } from 'motion-dom';
 import { extractEventInfo } from '../events/event-info.mjs';
 import { Feature } from '../motion/features/Feature.mjs';
-import { frame } from '../frameloop/frame.mjs';
 
 function handlePressEvent(node, event, lifecycle) {
     const { props } = node;

package/dist/es/index.mjs

@@ -5,6 +5,18 @@ export { LazyMotion } from './components/LazyMotion/index.mjs';
 export { MotionConfig } from './components/MotionConfig/index.mjs';
 export { m } from './render/components/m/proxy.mjs';
 export { motion } from './render/components/motion/proxy.mjs';
+export { addPointerEvent } from './events/add-pointer-event.mjs';
+export { addPointerInfo } from './events/event-info.mjs';
+export { animations } from './motion/features/animations.mjs';
+export { makeUseVisualState } from './motion/utils/use-visual-state.mjs';
+export { calcLength } from './projection/geometry/delta-calc.mjs';
+export { createBox } from './projection/geometry/models.mjs';
+export { filterProps } from './render/dom/utils/filter-props.mjs';
+export { isBrowser } from './utils/is-browser.mjs';
+export { useForceUpdate } from './utils/use-force-update.mjs';
+export { useIsomorphicLayoutEffect } from './utils/use-isomorphic-effect.mjs';
+export { useUnmountEffect } from './utils/use-unmount-effect.mjs';
+export { isMotionValue } from './value/utils/is-motion-value.mjs';
 export { domAnimation } from './render/dom/features-animation.mjs';
 export { domMax } from './render/dom/features-max.mjs';
 export { domMin } from './render/dom/features-min.mjs';
@@ -22,6 +34,7 @@ export { useWillChange } from './value/use-will-change/index.mjs';
 export { resolveMotionValue } from './value/utils/resolve-motion-value.mjs';
 export { useReducedMotion } from './utils/reduced-motion/use-reduced-motion.mjs';
 export { useReducedMotionConfig } from './utils/reduced-motion/use-reduced-motion-config.mjs';
+export { MotionGlobalConfig, invariant, noop, progress } from 'motion-utils';
 export { AcceleratedAnimation } from './animation/animators/AcceleratedAnimation.mjs';
 export { animateValue } from './animation/animators/MainThreadAnimation.mjs';
 export { animationControls } from './animation/hooks/animation-controls.mjs';
@@ -43,7 +56,6 @@ export { useResetProjection } from './projection/use-reset-projection.mjs';
 export { buildTransform } from './render/html/utils/build-transform.mjs';
 export { visualElementStore } from './render/store.mjs';
 export { VisualElement } from './render/VisualElement.mjs';
-export { MotionGlobalConfig } from './utils/GlobalConfig.mjs';
 export { useAnimationFrame } from './utils/use-animation-frame.mjs';
 export { useCycle } from './utils/use-cycle.mjs';
 export { useInView } from './utils/use-in-view.mjs';
@@ -68,24 +80,20 @@ export { useInvertedScale as useDeprecatedInvertedScale } from './value/use-inve
 export { delay } from './utils/delay.mjs';
 import * as namespace from './components/Reorder/namespace.mjs';
 export { namespace as Reorder };
-export { hover, isDragActive, press } from 'motion-dom';
-export { invariant, noop, progress } from 'motion-utils';
+export { MotionValue, cancelFrame, frame, frameData, hover, isDragActive, motionValue, press, time } from 'motion-dom';
 export { animate, createScopedAnimate } from './animation/animate/index.mjs';
 export { animateMini } from './animation/animators/waapi/animate-style.mjs';
 export { scroll } from './render/dom/scroll/index.mjs';
 export { scrollInfo } from './render/dom/scroll/track.mjs';
 export { inView } from './render/dom/viewport/index.mjs';
-export { MotionValue, motionValue } from './value/index.mjs';
 export { inertia } from './animation/generators/inertia.mjs';
 export { keyframes } from './animation/generators/keyframes.mjs';
 export { stagger } from './animation/utils/stagger.mjs';
-export { time } from './frameloop/sync-time.mjs';
 export { clamp } from './utils/clamp.mjs';
 export { mix } from './utils/mix/index.mjs';
 export { pipe } from './utils/pipe.mjs';
 export { transform } from './utils/transform.mjs';
 export { wrap } from './utils/wrap.mjs';
-export { cancelSync, sync } from './frameloop/index-legacy.mjs';
 export { anticipate } from './easing/anticipate.mjs';
 export { backIn, backInOut, backOut } from './easing/back.mjs';
 export { circIn, circInOut, circOut } from './easing/circ.mjs';
@@ -94,18 +102,5 @@ export { easeIn, easeInOut, easeOut } from './easing/ease.mjs';
 export { mirrorEasing } from './easing/modifiers/mirror.mjs';
 export { reverseEasing } from './easing/modifiers/reverse.mjs';
 export { steps } from './easing/steps.mjs';
-export { cancelFrame, frame, frameData, frameSteps } from './frameloop/frame.mjs';
 export { distance, distance2D } from './utils/distance.mjs';
 export { interpolate } from './utils/interpolate.mjs';
-export { animations } from './motion/features/animations.mjs';
-export { createBox } from './projection/geometry/models.mjs';
-export { calcLength } from './projection/geometry/delta-calc.mjs';
-export { filterProps } from './render/dom/utils/filter-props.mjs';
-export { makeUseVisualState } from './motion/utils/use-visual-state.mjs';
-export { addPointerEvent } from './events/add-pointer-event.mjs';
-export { addPointerInfo } from './events/event-info.mjs';
-export { isMotionValue } from './value/utils/is-motion-value.mjs';
-export { isBrowser } from './utils/is-browser.mjs';
-export { useUnmountEffect } from './utils/use-unmount-effect.mjs';
-export { useIsomorphicLayoutEffect } from './utils/use-isomorphic-effect.mjs';
-export { useForceUpdate } from './utils/use-force-update.mjs';

package/dist/es/motion/features/layout/MeasureLayout.mjs

@@ -1,15 +1,14 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
+import { frame, microtask } from 'motion-dom';
 import { useContext, Component } from 'react';
 import { usePresence } from '../../../components/AnimatePresence/use-presence.mjs';
 import { LayoutGroupContext } from '../../../context/LayoutGroupContext.mjs';
 import { SwitchLayoutGroupContext } from '../../../context/SwitchLayoutGroupContext.mjs';
-import { microtask } from '../../../frameloop/microtask.mjs';
 import { globalProjectionState } from '../../../projection/node/state.mjs';
 import { correctBorderRadius } from '../../../projection/styles/scale-border-radius.mjs';
 import { correctBoxShadow } from '../../../projection/styles/scale-box-shadow.mjs';
 import { addScaleCorrector } from '../../../projection/styles/scale-correction.mjs';
-import { frame } from '../../../frameloop/frame.mjs';
 
 class MeasureLayoutWithContext extends Component {
     /**

package/dist/es/motion/utils/use-visual-element.mjs

@@ -1,13 +1,13 @@
+import { microtask } from 'motion-dom';
 import { useContext, useRef, useInsertionEffect, useEffect } from 'react';
-import { PresenceContext } from '../../context/PresenceContext.mjs';
-import { MotionContext } from '../../context/MotionContext/index.mjs';
-import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
+import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
 import { LazyContext } from '../../context/LazyContext.mjs';
 import { MotionConfigContext } from '../../context/MotionConfigContext.mjs';
-import { optimizedAppearDataAttribute } from '../../animation/optimized-appear/data-id.mjs';
-import { microtask } from '../../frameloop/microtask.mjs';
-import { isRefObject } from '../../utils/is-ref-object.mjs';
+import { MotionContext } from '../../context/MotionContext/index.mjs';
+import { PresenceContext } from '../../context/PresenceContext.mjs';
 import { SwitchLayoutGroupContext } from '../../context/SwitchLayoutGroupContext.mjs';
+import { isRefObject } from '../../utils/is-ref-object.mjs';
+import { useIsomorphicLayoutEffect } from '../../utils/use-isomorphic-effect.mjs';
 
 function useVisualElement(Component, visualState, props, createVisualElement, ProjectionNodeConstructor) {
     var _a, _b;

package/dist/es/projection/node/create-projection-node.mjs

@@ -1,18 +1,12 @@
-import { getValueTransition } from 'motion-dom';
-import { noop } from 'motion-utils';
+import { statsBuffer, getValueTransition, cancelFrame, time, frameData, frameSteps, microtask, frame, activeAnimations } from 'motion-dom';
+import { SubscriptionManager, noop } from 'motion-utils';
 import { animateSingleValue } from '../../animation/animate/single-value.mjs';
 import { getOptimisedAppearId } from '../../animation/optimized-appear/get-appear-id.mjs';
-import { cancelFrame, frameData, frameSteps, frame } from '../../frameloop/frame.mjs';
-import { microtask } from '../../frameloop/microtask.mjs';
-import { time } from '../../frameloop/sync-time.mjs';
 import { isSVGElement } from '../../render/dom/utils/is-svg-element.mjs';
 import { FlatTree } from '../../render/utils/flat-tree.mjs';
-import { activeAnimations } from '../../stats/animation-count.mjs';
-import { statsBuffer } from '../../stats/buffer.mjs';
 import { clamp } from '../../utils/clamp.mjs';
 import { delay } from '../../utils/delay.mjs';
 import { mixNumber } from '../../utils/mix/number.mjs';
-import { SubscriptionManager } from '../../utils/subscription-manager.mjs';
 import { resolveMotionValue } from '../../value/utils/resolve-motion-value.mjs';
 import { mixValues } from '../animation/mix-values.mjs';
 import { copyBoxInto, copyAxisDeltaInto } from '../geometry/copy.mjs';

package/dist/es/projection/shared/stack.mjs

@@ -1,4 +1,4 @@
-import { addUniqueItem, removeItem } from '../../utils/array.mjs';
+import { addUniqueItem, removeItem } from 'motion-utils';
 
 class NodeStack {
     constructor() {

package/dist/es/projection.mjs

@@ -1,3 +1,4 @@
+export { frame, frameData, recordStats, statsBuffer } from 'motion-dom';
 export { calcBoxDelta } from './projection/geometry/delta-calc.mjs';
 export { nodeGroup } from './projection/node/group.mjs';
 export { HTMLProjectionNode } from './projection/node/HTMLProjectionNode.mjs';
@@ -6,8 +7,5 @@ export { correctBoxShadow } from './projection/styles/scale-box-shadow.mjs';
 export { addScaleCorrector } from './projection/styles/scale-correction.mjs';
 export { HTMLVisualElement } from './render/html/HTMLVisualElement.mjs';
 export { buildTransform } from './render/html/utils/build-transform.mjs';
-export { recordStats } from './stats/index.mjs';
-export { statsBuffer } from './stats/buffer.mjs';
 export { animateValue as animate } from './animation/animators/MainThreadAnimation.mjs';
 export { mix } from './utils/mix/index.mjs';
-export { frame, frameData } from './frameloop/frame.mjs';

package/dist/es/render/VisualElement.mjs

@@ -1,13 +1,11 @@
-import { time } from '../frameloop/sync-time.mjs';
+import { time, frame, cancelFrame, motionValue } from 'motion-dom';
+import { warnOnce, SubscriptionManager } from 'motion-utils';
 import { featureDefinitions } from '../motion/features/definitions.mjs';
 import { createBox } from '../projection/geometry/models.mjs';
 import { isNumericalString } from '../utils/is-numerical-string.mjs';
 import { isZeroValueString } from '../utils/is-zero-value-string.mjs';
 import { initPrefersReducedMotion } from '../utils/reduced-motion/index.mjs';
 import { hasReducedMotionListener, prefersReducedMotion } from '../utils/reduced-motion/state.mjs';
-import { SubscriptionManager } from '../utils/subscription-manager.mjs';
-import { warnOnce } from '../utils/warn-once.mjs';
-import { motionValue } from '../value/index.mjs';
 import { complex } from '../value/types/complex/index.mjs';
 import { isMotionValue } from '../value/utils/is-motion-value.mjs';
 import { getAnimatableNone } from './dom/value-types/animatable-none.mjs';
@@ -18,7 +16,6 @@ import { isControllingVariants, isVariantNode } from './utils/is-controlling-var
 import { KeyframeResolver } from './utils/KeyframesResolver.mjs';
 import { updateMotionValuesFromProps } from './utils/motion-values.mjs';
 import { resolveVariantFromProps } from './utils/resolve-variants.mjs';
-import { frame, cancelFrame } from '../frameloop/frame.mjs';
 
 const propEventHandlers = [
     "AnimationStart",

package/dist/es/render/components/create-proxy.mjs

@@ -1,4 +1,4 @@
-import { warnOnce } from '../../utils/warn-once.mjs';
+import { warnOnce } from 'motion-utils';
 
 function createDOMMotionComponentProxy(componentFactory) {
     if (typeof Proxy === "undefined") {

package/dist/es/render/dom/DOMVisualElement.mjs

@@ -1,6 +1,6 @@
+import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 import { VisualElement } from '../VisualElement.mjs';
 import { DOMKeyframesResolver } from './DOMKeyframesResolver.mjs';
-import { isMotionValue } from '../../value/utils/is-motion-value.mjs';
 
 class DOMVisualElement extends VisualElement {
     constructor() {

package/dist/es/render/dom/scroll/info.mjs

@@ -1,5 +1,4 @@
-import { progress } from 'motion-utils';
-import { velocityPerSecond } from '../../../utils/velocity-per-second.mjs';
+import { progress, velocityPerSecond } from 'motion-utils';
 
 /**
  * A time in milliseconds, beyond which we consider the scroll velocity to be 0.

package/dist/es/render/dom/scroll/observe.mjs

@@ -1,4 +1,4 @@
-import { frame, cancelFrame } from '../../../frameloop/frame.mjs';
+import { frame, cancelFrame } from 'motion-dom';
 
 function observeTimeline(update, timeline) {
     let prevProgress;

package/dist/es/render/dom/scroll/on-scroll-handler.mjs

@@ -1,4 +1,4 @@
-import { warnOnce } from '../../../utils/warn-once.mjs';
+import { warnOnce } from 'motion-utils';
 import { updateScrollInfo } from './info.mjs';
 import { resolveOffsets } from './offsets/index.mjs';
 

package/dist/es/render/dom/scroll/track.mjs

@@ -1,7 +1,7 @@
+import { frame, cancelFrame, frameData } from 'motion-dom';
 import { resize } from '../resize/index.mjs';
 import { createScrollInfo } from './info.mjs';
 import { createOnScrollHandler } from './on-scroll-handler.mjs';
-import { frame, cancelFrame, frameData } from '../../../frameloop/frame.mjs';
 
 const scrollListeners = new WeakMap();
 const resizeListeners = new WeakMap();

package/dist/es/render/dom/utils/unit-conversion.mjs

@@ -1,26 +1,9 @@
 import { number } from '../../../value/types/numbers/index.mjs';
 import { px } from '../../../value/types/numbers/units.mjs';
 import { transformPropOrder } from '../../html/utils/keys-transform.mjs';
+import { parseValueFromTransform } from '../../html/utils/parse-transform.mjs';
 
 const isNumOrPxType = (v) => v === number || v === px;
-const getPosFromMatrix = (matrix, pos) => parseFloat(matrix.split(", ")[pos]);
-const getTranslateFromMatrix = (pos2, pos3) => (_bbox, { transform }) => {
-    if (transform === "none" || !transform)
-        return 0;
-    const matrix3d = transform.match(/^matrix3d\((.+)\)$/u);
-    if (matrix3d) {
-        return getPosFromMatrix(matrix3d[1], pos3);
-    }
-    else {
-        const matrix = transform.match(/^matrix\((.+)\)$/u);
-        if (matrix) {
-            return getPosFromMatrix(matrix[1], pos2);
-        }
-        else {
-            return 0;
-        }
-    }
-};
 const transformKeys = new Set(["x", "y", "z"]);
 const nonTranslationalTransformKeys = transformPropOrder.filter((key) => !transformKeys.has(key));
 function removeNonTranslationalTransform(visualElement) {
@@ -43,8 +26,8 @@ const positionalValues = {
     bottom: ({ y }, { top }) => parseFloat(top) + (y.max - y.min),
     right: ({ x }, { left }) => parseFloat(left) + (x.max - x.min),
     // Transform
-    x: getTranslateFromMatrix(4, 13),
-    y: getTranslateFromMatrix(5, 14),
+    x: (_bbox, { transform }) => parseValueFromTransform(transform, "x"),
+    y: (_bbox, { transform }) => parseValueFromTransform(transform, "y"),
 };
 // Alias translate longform names
 positionalValues.translateX = positionalValues.x;

package/dist/es/render/html/HTMLVisualElement.mjs

@@ -1,9 +1,9 @@
 import { measureViewportBox } from '../../projection/utils/measure.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
 import { isCSSVariableName } from '../dom/utils/is-css-variable.mjs';
-import { getDefaultValueType } from '../dom/value-types/defaults.mjs';
 import { buildHTMLStyles } from './utils/build-styles.mjs';
 import { transformProps } from './utils/keys-transform.mjs';
+import { readTransformValue } from './utils/parse-transform.mjs';
 import { renderHTML } from './utils/render.mjs';
 import { scrapeMotionValuesFromProps } from './utils/scrape-motion-values.mjs';
 
@@ -18,8 +18,7 @@ class HTMLVisualElement extends DOMVisualElement {
     }
     readValueFromInstance(instance, key) {
         if (transformProps.has(key)) {
-            const defaultType = getDefaultValueType(key);
-            return defaultType ? defaultType.default || 0 : 0;
+            return readTransformValue(instance, key);
         }
         else {
             const computedStyle = getComputedStyle(instance);

package/dist/es/render/html/utils/parse-transform.mjs

@@ -0,0 +1,83 @@
+const radToDeg = (rad) => (rad * 180) / Math.PI;
+const rotate = (v) => {
+    const angle = radToDeg(Math.atan2(v[1], v[0]));
+    return rebaseAngle(angle);
+};
+const matrix2dParsers = {
+    x: 4,
+    y: 5,
+    translateX: 4,
+    translateY: 5,
+    scaleX: 0,
+    scaleY: 3,
+    scale: (v) => (Math.abs(v[0]) + Math.abs(v[3])) / 2,
+    rotate,
+    rotateZ: rotate,
+    skewX: (v) => radToDeg(Math.atan(v[1])),
+    skewY: (v) => radToDeg(Math.atan(v[2])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[2])) / 2,
+};
+const rebaseAngle = (angle) => {
+    angle = angle % 360;
+    if (angle < 0)
+        angle += 360;
+    return angle;
+};
+const rotateZ = rotate;
+const scaleX = (v) => Math.sqrt(v[0] * v[0] + v[1] * v[1]);
+const scaleY = (v) => Math.sqrt(v[4] * v[4] + v[5] * v[5]);
+const matrix3dParsers = {
+    x: 12,
+    y: 13,
+    z: 14,
+    translateX: 12,
+    translateY: 13,
+    translateZ: 14,
+    scaleX,
+    scaleY,
+    scale: (v) => (scaleX(v) + scaleY(v)) / 2,
+    rotateX: (v) => rebaseAngle(radToDeg(Math.atan2(v[6], v[5]))),
+    rotateY: (v) => rebaseAngle(radToDeg(Math.atan2(-v[2], v[0]))),
+    rotateZ,
+    rotate: rotateZ,
+    skewX: (v) => radToDeg(Math.atan(v[4])),
+    skewY: (v) => radToDeg(Math.atan(v[1])),
+    skew: (v) => (Math.abs(v[1]) + Math.abs(v[4])) / 2,
+};
+function defaultTransformValue(name) {
+    return name.includes("scale") ? 1 : 0;
+}
+function parseValueFromTransform(transform, name) {
+    if (!transform || transform === "none") {
+        return defaultTransformValue(name);
+    }
+    const matrix3dMatch = transform.match(/^matrix3d\(([-\d.e\s,]+)\)$/u);
+    let parsers;
+    let match;
+    if (matrix3dMatch) {
+        parsers = matrix3dParsers;
+        match = matrix3dMatch;
+    }
+    else {
+        const matrix2dMatch = transform.match(/^matrix\(([-\d.e\s,]+)\)$/u);
+        parsers = matrix2dParsers;
+        match = matrix2dMatch;
+    }
+    if (!match) {
+        return defaultTransformValue(name);
+    }
+    const valueParser = parsers[name];
+    const values = match[1].split(",").map(convertTransformToNumber);
+    return typeof valueParser === "function"
+        ? valueParser(values)
+        : values[valueParser];
+}
+const readTransformValue = (instance, name) => {
+    const { transform = "none" } = getComputedStyle(instance);
+    return parseValueFromTransform(transform, name);
+};
+function convertTransformToNumber(value) {
+    return parseFloat(value.trim());
+}
+
+export { parseValueFromTransform, readTransformValue };

package/dist/es/render/svg/SVGVisualElement.mjs

@@ -1,4 +1,4 @@
-import { frame } from '../../frameloop/frame.mjs';
+import { frame } from 'motion-dom';
 import { createBox } from '../../projection/geometry/models.mjs';
 import { DOMVisualElement } from '../dom/DOMVisualElement.mjs';
 import { camelToDash } from '../dom/utils/camel-to-dash.mjs';

package/dist/es/render/svg/config-motion.mjs

@@ -1,4 +1,4 @@
-import { frame } from '../../frameloop/frame.mjs';
+import { frame } from 'motion-dom';
 import { makeUseVisualState } from '../../motion/utils/use-visual-state.mjs';
 import { transformProps } from '../html/utils/keys-transform.mjs';
 import { buildSVGAttrs } from './utils/build-attrs.mjs';

package/dist/es/render/utils/KeyframesResolver.mjs

@@ -1,5 +1,5 @@
+import { frame } from 'motion-dom';
 import { removeNonTranslationalTransform } from '../dom/utils/unit-conversion.mjs';
-import { frame } from '../../frameloop/frame.mjs';
 
 const toResolve = new Set();
 let isScheduled = false;

package/dist/es/render/utils/flat-tree.mjs

@@ -1,4 +1,4 @@
-import { addUniqueItem, removeItem } from '../../utils/array.mjs';
+import { addUniqueItem, removeItem } from 'motion-utils';
 import { compareByDepth } from './compare-by-depth.mjs';
 
 class FlatTree {