motion-start 0.0.1 → 0.1.0

package/README.md

@@ -1,24 +1,45 @@
-# Motion Start
+<p align="center">
+ <img align="center" src="https://raw.githubusercontent.com/JonathonRP/motion-start/main/static/logo.webp" height="96" />
+ <h1 align="center">
+  Motion Start
+ </h1>
+</p>
 
-An animation library based on [framer-motion](https://www.framer.com/motion/). 
+<div align="center">
 
-[Visit Project Page](https://svelte-motion.gradientdescent.de)
+An animation library inspired by [framer-motion](https://www.framer.com/motion/)
+
+[![Discord](https://img.shields.io/discord/1288125623570530334?logo=discord&logoColor=white&label=discord&labelColor=5865F2")](https://discord.gg/bTa32kj9T3)
+[![Build Status](https://img.shields.io/github/actions/workflow/status/JonathonRP/motion-start/main.yaml)](https://github.com/JonathonRP/motion-start/actions)
+[![License](https://img.shields.io/npm/l/motion-start.svg?color=blue)](https://github.com/JonathonRP/motion-start/blob/main/LICENSE.md)
+[![Latest Release](https://img.shields.io/npm/v/motion-start.svg)](https://github.com/JonathonRP/motion-start/releases)
+[![Downloads](https://img.shields.io/npm/dt/motion-start.svg)](https://www.npmjs.com/package/motion-start)
+</div>
+
+---
+
+Work in progress.
+
+> [!WARNING]
+> **Note:** 🚧 This library is currently in alpha. Features and APIs may change. expect bugs and please report or make PRs to fix bugs.
+
+> **Note:** This is svelte-motion ported to typescript currently. We have plans to evolve it to include modern features in framer-motion and to use svelte/motion to implement animations in the future.
 
 ## Installation
 
-```bash
+```sh
 npm install --save-dev motion-start
 ```
 
-```bash
+```sh
 pnpm install --save-dev motion-start
 ```
 
-```bash
+```sh
 yarn install --save-dev motion-start
 ```
 
-```bash
+```sh
 bun install --save-dev motion-start
 ```
 
@@ -27,13 +48,25 @@ bun install --save-dev motion-start
 Corresponding to a `MotionDiv` in framer-motion is this:
 
 ```javascript
+
+
 import { Motion } from 'motion-start'
 
-<Motion let:motion><div use:motion/></Motion>
+<Motion.div></Motion.div>
 ```
 For svg elements like 'g', 'path' or 'circle', use:
 
 ```javascript
-<Motion let:motion isSVG><g use:motion/></Motion>
+<Motion.g></Motion.g>
 ```
 
+
+# Community
+Join the Discord server to ask questions, find collaborators, or say hi!
+
+<a href="https://discord.gg/bTa32kj9T3" alt="Motion Start">
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/bTa32kj9T3">
+  <img alt="Motion Start Discord Community" src="https://invidget.switchblade.xyz/bTa32kj9T3?theme=light">
+</picture>
+</a>

package/{src → dist}/animation/UseAnimatedState.svelte

@@ -2,28 +2,23 @@
 Copyright (c) 2018 Framer B.V. -->
 
 <script module lang="ts">
-  var createObject = function () {
-    return {};
-  };
+  var createObject = () => ({});
   var stateVisualElement = visualElement({
-    build: function () {},
+    build: () => {},
+    // @ts-expect-error
     measureViewportBox: axisBox,
-    resetTransform: function () {},
-    restoreTransform: function () {},
-    removeValueFromRenderState: function () {},
-    render: function () {},
+    resetTransform: () => {},
+    restoreTransform: () => {},
+    removeValueFromRenderState: () => {},
+    render: () => {},
     scrapeMotionValuesFromProps: createObject,
-    readValueFromInstance: function (_state, key, options) {
-      return options.initialState[key] || 0;
-    },
-    makeTargetAnimatable: function (element, _a) {
-      var transition = _a.transition,
-        transitionEnd = _a.transitionEnd,
-        target = __rest(_a, ["transition", "transitionEnd"]);
-      var origin = getOrigin(target, transition || {}, element);
+    readValueFromInstance: (_state, key, options) => (options as any).initialState[key] || 0,
+    makeTargetAnimatable: (element, _a) => {
+      var {transition, transitionEnd, ...target} = _a;
+      var origin = getOrigin(target as any, transition || {}, element);
       checkTargetForNewValues(element, target, origin);
-      return __assign(
-        { transition: transition, transitionEnd: transitionEnd },
+      return Object.assign(
+        { transition, transitionEnd },
         target
       );
     },
@@ -31,29 +26,35 @@ Copyright (c) 2018 Framer B.V. -->
 </script>
 
 <script lang="ts">
-  import { afterUpdate, getContext, onMount } from "svelte";
   import type { Writable } from "svelte/store";
-  import { __assign, __rest } from "tslib";
+  import { afterUpdate, getContext, onMount } from "svelte";
   import { ScaleCorrectionParentContext } from "../context/ScaleCorrectionProvider.svelte";
   import { UseVisualState } from "../motion/utils/use-visual-state.js";
   import { visualElement } from "../render/index.js";
-  import { animateVisualElement } from "../render/utils/animation";
+  import { animateVisualElement, type AnimationDefinition } from "../render/utils/animation";
   import {
     checkTargetForNewValues,
     getOrigin,
   } from "../render/utils/setters.js";
-  export let initialState;
+    import type { VisualElementOptions } from "../render/types";
+
+  export let initialState: VisualElementOptions<any, any>;
 
   let animationState = initialState;
   const sve = stateVisualElement;
-  $: element = sve({ props: {}, visualState: state });
+  
+  // @ts-expect-error
+  $:( element = sve({ props: {}, visualState: state }));
   onMount(() => {
+    // @ts-expect-error
     element.mount({});
+    // @ts-expect-error
     return () => element.unmount();
   });
   const _afterUpdate = () => {
+    // @ts-expect-error
     element.setProps({
-      onUpdate: (v) => (animationState = { ...v }),
+      onUpdate: (v: VisualElementOptions<any, any>) => (animationState = { ...v }),
     });
   };
 
@@ -68,7 +69,8 @@ Copyright (c) 2018 Framer B.V. -->
       },
     ])
   );
-  let startAnimation = (animationDefinition) => {
+  let startAnimation = (animationDefinition: AnimationDefinition) => {
+    // @ts-expect-error
     return animateVisualElement(element, animationDefinition);
   };
 </script>

package/dist/animation/UseAnimatedState.svelte.d.ts

@@ -0,0 +1,36 @@
+import { type AnimationDefinition } from "../render/utils/animation";
+import type { VisualElementOptions } from "../render/types";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const UseAnimatedState: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    initialState: VisualElementOptions<any, any>;
+}, {
+    default: {
+        animatedState: (VisualElementOptions<any, any> | ((animationDefinition: AnimationDefinition) => Promise<void>))[];
+    };
+}>, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        animatedState: (VisualElementOptions<any, any> | ((animationDefinition: AnimationDefinition) => Promise<void>))[];
+    };
+}, {}, string>;
+type UseAnimatedState = InstanceType<typeof UseAnimatedState>;
+export default UseAnimatedState;
+//# sourceMappingURL=UseAnimatedState.svelte.d.ts.map

package/dist/animation/UseAnimatedState.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseAnimatedState.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/UseAnimatedState.svelte.ts"],"names":[],"mappings":"AA+BA,OAAO,EAAwB,KAAK,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAK3F,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AA8D5D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AACD,KAAK,gCAAgC,CAAC,KAAK,EAAE,KAAK,IAAI,KAAK,GACvD,CAAC,KAAK,SAAS;IAAE,OAAO,EAAE,GAAG,CAAA;CAAE,GACzB,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,GACnC,GAAG,GACH;IAAE,QAAQ,CAAC,EAAE,GAAG,CAAA;CAAE,GAClB,EAAE,CAAC,CAAC;AAId,QAAA,MAAM,gBAAgB;kBAfyC,oBAAoB,CAAC,GAAG,EAAE,GAAG,CAAC;;;gFAlBhD,mBAAmB;;;;;;gFAAnB,mBAAmB;;cAiCyC,CAAC;AACxF,KAAK,gBAAgB,GAAG,YAAY,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAChE,eAAe,gBAAgB,CAAC"}

package/dist/animation/UseAnimation.svelte.d.ts

@@ -0,0 +1,29 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const UseAnimation: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {
+        controls: {
+            subscribe: (visualElement: import("../index.js").VisualElement<any, any>) => () => void;
+            start: (definition: import("./types.js").ControlsAnimationDefinition, transitionOverride?: any) => Promise<any>;
+            set: (definition: import("./types.js").ControlsAnimationDefinition) => void;
+            stop: () => void;
+            mount: () => () => void;
+        };
+    };
+}, {}, string>;
+type UseAnimation = InstanceType<typeof UseAnimation>;
+export default UseAnimation;
+//# sourceMappingURL=UseAnimation.svelte.d.ts.map

package/dist/animation/UseAnimation.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UseAnimation.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/UseAnimation.svelte.ts"],"names":[],"mappings":"AAsEA,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAUD,QAAA,MAAM,YAAY;;;;;;;;;;;;cAAmF,CAAC;AACpF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}

package/{src/animation/animate.ts → dist/animation/animate.d.ts}

@@ -1,78 +1,59 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { ResolvedValueTarget, Spring, Tween } from "../types";
-import { MotionValue } from "../value";
-/**
- * @public
- */
-export interface AnimationPlaybackControls {
-    stop: () => void;
-}
-/**
- * @public
- */
-export interface AnimationPlaybackLifecycles<V> {
-    onUpdate?: (latest: V) => void;
-    onPlay?: () => void;
-    onComplete?: () => void;
-    onRepeat?: () => void;
-    onStop?: () => void;
-}
-/**
- * @public
- */
-export type AnimationOptions<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
-    delay?: number;
-    type?: "tween" | "spring";
-};
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { motionValue } from '../value/index.js';
-import { isMotionValue } from '../value/utils/is-motion-value.js';
-import { startAnimation } from './utils/transitions.js';
-
-/**
- * Animate a single value or a `MotionValue`.
- *
- * The first argument is either a `MotionValue` to animate, or an initial animation value.
- *
- * The second is either a value to animate to, or an array of keyframes to animate through.
- *
- * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
- *
- * Returns `AnimationPlaybackControls`, currently just a `stop` method.
- *
- * ```javascript
- * const x = useMotionValue(0)
- *
- * useEffect(() => {
- *   const controls = animate(x, 100, {
- *     type: "spring",
- *     stiffness: 2000,
- *     onComplete: v => {}
- *   })
- *
- *   return controls.stop
- * })
- * ```
- *
- * @public
- */
-function animate<V>(from: MotionValue<V> | V, to: ResolvedValueTarget, transition?: AnimationOptions<V>) {
-    if (transition === void 0) { transition = {}; }
-    var value = isMotionValue(from) ? from : motionValue(from);
-    startAnimation("", value, to, transition);
-    return {
-        stop: function () { return value.stop(); },
-    } as AnimationPlaybackControls;
-}
-
-export { animate };
-
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValueTarget, Spring, Tween } from "../types";
+import { MotionValue } from "../value";
+/**
+ * @public
+ */
+export interface AnimationPlaybackControls {
+    stop: () => void;
+}
+/**
+ * @public
+ */
+export interface AnimationPlaybackLifecycles<V> {
+    onUpdate?: (latest: V) => void;
+    onPlay?: () => void;
+    onComplete?: () => void;
+    onRepeat?: () => void;
+    onStop?: () => void;
+}
+/**
+ * @public
+ */
+export type AnimationOptions<V> = (Tween | Spring) & AnimationPlaybackLifecycles<V> & {
+    delay?: number;
+    type?: "tween" | "spring";
+};
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+declare function animate<V>(from: MotionValue<V> | V, to: ResolvedValueTarget, transition?: AnimationOptions<V>): AnimationPlaybackControls;
+export { animate };
+//# sourceMappingURL=animate.d.ts.map

package/dist/animation/animate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animate.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/animate.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACvC;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACtC,IAAI,EAAE,MAAM,IAAI,CAAC;CACpB;AACD;;GAEG;AACH,MAAM,WAAW,2BAA2B,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AACD;;GAEG;AACH,MAAM,MAAM,gBAAgB,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,GAAG,2BAA2B,CAAC,CAAC,CAAC,GAAG;IAClF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;CAC7B,CAAC;AAYF;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,iBAAS,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,mBAAmB,EAAE,UAAU,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,GAM9F,yBAAyB,CACjC;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/animation/animate.js

@@ -0,0 +1,46 @@
+import { MotionValue } from "../value";
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { motionValue } from '../value/index.js';
+import { isMotionValue } from '../value/utils/is-motion-value.js';
+import { startAnimation } from './utils/transitions.js';
+/**
+ * Animate a single value or a `MotionValue`.
+ *
+ * The first argument is either a `MotionValue` to animate, or an initial animation value.
+ *
+ * The second is either a value to animate to, or an array of keyframes to animate through.
+ *
+ * The third argument can be either tween or spring options, and optional lifecycle methods: `onUpdate`, `onPlay`, `onComplete`, `onRepeat` and `onStop`.
+ *
+ * Returns `AnimationPlaybackControls`, currently just a `stop` method.
+ *
+ * ```javascript
+ * const x = useMotionValue(0)
+ *
+ * useEffect(() => {
+ *   const controls = animate(x, 100, {
+ *     type: "spring",
+ *     stiffness: 2000,
+ *     onComplete: v => {}
+ *   })
+ *
+ *   return controls.stop
+ * })
+ * ```
+ *
+ * @public
+ */
+function animate(from, to, transition) {
+    if (transition === void 0) {
+        transition = {};
+    }
+    var value = isMotionValue(from) ? from : motionValue(from);
+    startAnimation("", value, to, transition);
+    return {
+        stop: function () { return value.stop(); },
+    };
+}
+export { animate };

package/dist/animation/animation-controls.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @public
+ */
+declare function animationControls(startStopNotifier?: () => () => void): {
+    subscribe: (visualElement: import("..").VisualElement<any, any>) => () => void;
+    start: (definition: import("./types").ControlsAnimationDefinition, transitionOverride?: any) => Promise<any>;
+    set: (definition: import("./types").ControlsAnimationDefinition) => void;
+    stop: () => void;
+    mount: () => () => void;
+};
+export { animationControls };
+//# sourceMappingURL=animation-controls.d.ts.map

package/dist/animation/animation-controls.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-controls.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/animation-controls.ts"],"names":[],"mappings":"AAeA;;GAEG;AACH,iBAAS,iBAAiB,CAAC,iBAAiB,CAAC,EAAE,MAAM,MAAM,IAAI;;4FA4BpB,GAAG;;;;EAmD7C;AAED,OAAO,EAAE,iBAAiB,EAAE,CAAC"}

package/{src/animation/animation-controls.ts → dist/animation/animation-controls.js}

@@ -1,101 +1,89 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { AnimationControls } from "./types";
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-
-import { __read, __spreadArray } from 'tslib';
-// import { invariant } from '../utils/errors.js';
-import { animateVisualElement, stopAnimation } from '../render/utils/animation.js';
-import { setValues } from '../render/utils/setters.js';
-
-/**
- * @public
- */
-function animationControls(startStopNotifier?: () => () => void ) {
-    /**
-     * Track whether the host component has mounted.
-     */
-    var hasMounted = false;
-    /**
-     * Pending animations that are started before a component is mounted.
-     * TODO: Remove this as animations should only run in effects
-     */
-    var pendingAnimations: any[] = [];
-    /**
-     * A collection of linked component animation controls.
-     */
-    var subscribers = new Set<any>();
-    var stopNotification: undefined | (() => void);
-    var controls = {
-        subscribe: function (visualElement) {
-            if (subscribers.size === 0){
-                stopNotification = startStopNotifier?.();
-            }
-            subscribers.add(visualElement);
-            return function () { 
-                subscribers.delete(visualElement); 
-                if (subscribers.size===0){
-                    stopNotification?.()
-                }
-            };
-        },
-        start: function (definition, transitionOverride) {
-            /**
-             * TODO: We only perform this hasMounted check because in Framer we used to
-             * encourage the ability to start an animation within the render phase. This
-             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
-             * we can ditch this.
-             */
-            if (hasMounted) {
-                var animations_1: any[] = [];
-                subscribers.forEach(function (visualElement) {
-                    animations_1.push(animateVisualElement(visualElement, definition, {
-                        transitionOverride: transitionOverride,
-                    }));
-                });
-                return Promise.all(animations_1);
-            }
-            else {
-                return new Promise(function (resolve) {
-                    pendingAnimations.push({
-                        animation: [definition, transitionOverride],
-                        resolve: resolve,
-                    });
-                });
-            }
-        },
-        set: function (definition) {
-            //invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
-            return subscribers.forEach(function (visualElement) {
-                setValues(visualElement, definition);
-            });
-        },
-        stop: function () {
-            subscribers.forEach(function (visualElement) {
-                stopAnimation(visualElement);
-            });
-        },
-        mount: function () {
-            hasMounted = true;
-            pendingAnimations.forEach(function (_a) {
-                var animation = _a.animation, resolve = _a.resolve;
-                controls.start.apply(controls, __spreadArray([], __read(animation))).then(resolve);
-            });
-            return function () {
-                hasMounted = false;
-                controls.stop();
-            };
-        },
-    } as AnimationControls;
-    return controls;
-}
-
-export { animationControls };
-
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+// import { invariant } from '../utils/errors.js';
+import { animateVisualElement, stopAnimation } from '../render/utils/animation.js';
+import { setValues } from '../render/utils/setters.js';
+/**
+ * @public
+ */
+function animationControls(startStopNotifier) {
+    /**
+     * Track whether the host component has mounted.
+     */
+    var hasMounted = false;
+    /**
+     * Pending animations that are started before a component is mounted.
+     * TODO: Remove this as animations should only run in effects
+     */
+    var pendingAnimations = [];
+    /**
+     * A collection of linked component animation controls.
+     */
+    var subscribers = new Set();
+    var stopNotification;
+    var controls = {
+        subscribe: (visualElement) => {
+            if (subscribers.size === 0) {
+                stopNotification = startStopNotifier?.();
+            }
+            subscribers.add(visualElement);
+            return () => {
+                subscribers.delete(visualElement);
+                if (subscribers.size === 0) {
+                    stopNotification?.();
+                }
+            };
+        },
+        start: (definition, transitionOverride) => {
+            /**
+             * TODO: We only perform this hasMounted check because in Framer we used to
+             * encourage the ability to start an animation within the render phase. This
+             * isn't behaviour concurrent-safe so when we make Framer concurrent-safe
+             * we can ditch this.
+             */
+            if (hasMounted) {
+                var animations_1 = [];
+                subscribers.forEach((visualElement) => {
+                    animations_1.push(animateVisualElement(visualElement, definition, {
+                        transitionOverride: transitionOverride,
+                    }));
+                });
+                return Promise.all(animations_1);
+            }
+            else {
+                return new Promise((resolve) => {
+                    pendingAnimations.push({
+                        animation: [definition, transitionOverride],
+                        resolve: resolve,
+                    });
+                });
+            }
+        },
+        set: (definition) => {
+            //invariant(hasMounted, "controls.set() should only be called after a component has mounted. Consider calling within a useEffect hook.");
+            return subscribers.forEach((visualElement) => {
+                setValues(visualElement, definition);
+            });
+        },
+        stop: () => {
+            subscribers.forEach((visualElement) => {
+                stopAnimation(visualElement);
+            });
+        },
+        mount: () => {
+            hasMounted = true;
+            pendingAnimations.forEach((_a) => {
+                var animation = _a.animation, resolve = _a.resolve;
+                controls.start.apply(controls, ...[animation]).then(resolve);
+            });
+            return () => {
+                hasMounted = false;
+                controls.stop();
+            };
+        },
+    };
+    return controls;
+}
+export { animationControls };