diff --git a/packages/dom/package.json b/packages/dom/package.json index eaa47788..4eb10205 100644 --- a/packages/dom/package.json +++ b/packages/dom/package.json @@ -25,23 +25,23 @@ "bundlesize": [ { "path": "./dist/size-animate.js", - "maxSize": "3.96 kB" + "maxSize": "2.57 kB" }, { "path": "./dist/size-animate-style.js", - "maxSize": "3.4 kB" + "maxSize": "2 kB" }, { "path": "./dist/size-timeline.js", - "maxSize": "4.8 kB" + "maxSize": "3.51 kB" }, { "path": "./dist/size-spring.js", - "maxSize": "1.5 kB" + "maxSize": "1.45 kB" }, { "path": "./dist/size-webpack-animate.js", - "maxSize": "3.9 kB" + "maxSize": "2.6 kB" }, { "path": "./dist/size-in-view.js", diff --git a/packages/dom/src/animate/animate-style.ts b/packages/dom/src/animate/animate-style.ts index 9c0fafb2..dc419988 100644 --- a/packages/dom/src/animate/animate-style.ts +++ b/packages/dom/src/animate/animate-style.ts @@ -1,7 +1,6 @@ import { getAnimationData, getMotionValue } from "./data" import type { AnimationFactory, ValueKeyframesDefinition } from "./types" import { isCssVar, registerCssVariable } from "./utils/css-var" -import type { Animation } from "@motionone/animation" import { defaults, time, @@ -22,7 +21,6 @@ import { style } from "./style" import { getStyleName } from "./utils/get-style-name" import { isNumber, noop } from "@motionone/utils" import { stopAnimation } from "./utils/stop-animation" -import { getUnitConverter } from "./utils/get-unit" function getDevToolsRecord() { return (window as any).__MOTION_DEV_TOOLS_RECORD @@ -32,8 +30,7 @@ export function animateStyle( element: Element, key: string, keyframesDefinition: ValueKeyframesDefinition, - options: AnimationOptions = {}, - AnimationPolyfill?: typeof Animation + options: AnimationOptions = {} ): AnimationFactory { const record = getDevToolsRecord() const isRecording = options.record !== false && record @@ -98,11 +95,6 @@ export function animateStyle( readInitialValue ) - /** - * Detect unit type of keyframes. - */ - const toUnit = getUnitConverter(keyframes, definition) - if (isEasingGenerator(easing)) { const custom = easing.createAnimation( keyframes, @@ -225,39 +217,6 @@ export function animateStyle( * accelerated animations in WKWebView. */ if (!allowWebkitAcceleration) animation.playbackRate = 1.000001 - - /** - * If we can't animate the value natively then we can fallback to the numbers-only - * polyfill for transforms. - */ - } else if (AnimationPolyfill && valueIsTransform) { - /** - * If any keyframe is a string (because we measured it from the DOM), we need to convert - * it into a number before passing to the Animation polyfill. - */ - keyframes = keyframes.map((value) => - typeof value === "string" ? parseFloat(value) : value - ) - - /** - * If we only have a single keyframe, we need to create an initial keyframe by reading - * the current value from the DOM. - */ - if (keyframes.length === 1) { - keyframes.unshift(parseFloat(readInitialValue() as string)) - } - - animation = new AnimationPolyfill( - (latest: number) => { - style.set(element, name, toUnit ? toUnit(latest) : latest) - }, - keyframes as any, - { - ...options, - duration, - easing, - } - ) } else { const target = keyframes[keyframes.length - 1] style.set( diff --git a/packages/dom/src/animate/create-animate.ts b/packages/dom/src/animate/create-animate.ts index 5fe691d1..b938d0f8 100644 --- a/packages/dom/src/animate/create-animate.ts +++ b/packages/dom/src/animate/create-animate.ts @@ -11,9 +11,8 @@ import { withControls } from "./utils/controls" import { resolveOption } from "../utils/stagger" import { AnimationControls } from "@motionone/types" import { ElementOrSelector } from "../types" -import type { Animation } from "@motionone/animation" -export function createAnimate(AnimatePolyfill?: typeof Animation) { +export function createAnimate() { return function animate( elements: ElementOrSelector, keyframes: MotionKeyframesDefinition, @@ -40,8 +39,7 @@ export function createAnimate(AnimatePolyfill?: typeof Animation) { element, key, keyframes[key]!, - valueOptions, - AnimatePolyfill + valueOptions ) animationFactories.push(animation) diff --git a/packages/dom/src/animate/index.ts b/packages/dom/src/animate/index.ts index 0d88c0ac..997f0a25 100644 --- a/packages/dom/src/animate/index.ts +++ b/packages/dom/src/animate/index.ts @@ -1,4 +1,3 @@ -import { Animation } from "@motionone/animation" import { createAnimate } from "./create-animate" -export const animate = createAnimate(Animation) +export const animate = createAnimate() diff --git a/packages/dom/src/state/index.ts b/packages/dom/src/state/index.ts index 16814bf7..e8596241 100644 --- a/packages/dom/src/state/index.ts +++ b/packages/dom/src/state/index.ts @@ -16,7 +16,6 @@ import { inView } from "./gestures/in-view" import { hover } from "./gestures/hover" import { press } from "./gestures/press" import { motionEvent } from "./utils/events" -import { Animation } from "@motionone/animation" interface GestureSubscriptions { [key: string]: VoidFunction @@ -153,13 +152,7 @@ export function createMotionState( baseTarget[key] ??= style.get(element, key) as string animationFactories.push( - animateStyle( - element, - key, - target[key], - animationOptions[key], - Animation - ) + animateStyle(element, key, target[key], animationOptions[key]) ) } }) diff --git a/packages/dom/src/timeline/index.ts b/packages/dom/src/timeline/index.ts index a3aff2b0..07bb7bc5 100644 --- a/packages/dom/src/timeline/index.ts +++ b/packages/dom/src/timeline/index.ts @@ -31,7 +31,6 @@ import type { import { calcNextTime } from "./utils/calc-time" import { addKeyframes } from "./utils/edit" import { compareByTime } from "./utils/sort" -import { Animation } from "@motionone/animation" type AnimateStyleDefinition = [ Element, @@ -55,7 +54,7 @@ export function timeline( * Create and start animations */ const animationFactories = animationDefinitions - .map((definition) => animateStyle(...definition, Animation)) + .map((definition) => animateStyle(...definition)) .filter(Boolean) return withControls( diff --git a/packages/motion/src/animate.ts b/packages/motion/src/animate.ts index 8fa92eff..b77d8a9a 100644 --- a/packages/motion/src/animate.ts +++ b/packages/motion/src/animate.ts @@ -3,48 +3,13 @@ import { animate as animateDom, AnimationOptionsWithOverrides, MotionKeyframesDefinition, - withControls, } from "@motionone/dom" -import { isFunction } from "@motionone/utils" -import { Animation } from "@motionone/animation" -import { - AnimationControls, - AnimationOptions, - ProgressFunction, -} from "@motionone/types" - -export function animateProgress( - target: ProgressFunction, - options: AnimationOptions = {} -) { - return withControls( - [ - () => { - const animation = new Animation(target, [0, 1], options) - animation.finished.catch(() => {}) - return animation - }, - ], - options, - options.duration - ) -} +import { AnimationControls } from "@motionone/types" export function animate( - elements: ElementOrSelector, + target: ElementOrSelector, keyframes: MotionKeyframesDefinition, options?: AnimationOptionsWithOverrides -): AnimationControls -export function animate( - target: ProgressFunction, - options?: AnimationOptions -): AnimationControls -export function animate( - target: ProgressFunction | ElementOrSelector, - keyframesOrOptions?: MotionKeyframesDefinition | AnimationOptions, - options?: AnimationOptionsWithOverrides ): AnimationControls { - const factory: any = isFunction(target) ? animateProgress : animateDom - - return factory(target, keyframesOrOptions, options) + return animateDom(target, keyframes, options) } diff --git a/packages/solid/package.json b/packages/solid/package.json index 8194076a..1732b508 100644 --- a/packages/solid/package.json +++ b/packages/solid/package.json @@ -25,7 +25,7 @@ "bundlesize": [ { "path": "./dist/size.js", - "maxSize": "6.35 kB" + "maxSize": "4.92 kB" } ], "sideEffects": false,