Removing Animation polyfill

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",

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(

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)

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()

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])
         )
       }
     })

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(

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)
 }

packages/solid/package.json

@@ -25,7 +25,7 @@
   "bundlesize": [
     {
       "path": "./dist/size.js",
-      "maxSize": "6.35 kB"
+      "maxSize": "4.92 kB"
     }
   ],
   "sideEffects": false,