motion-start 0.0.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2021 Michael Lucht
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# Motion Start
+
+An animation library based on [framer-motion](https://www.framer.com/motion/). 
+
+[Visit Project Page](https://svelte-motion.gradientdescent.de)
+
+## Installation
+
+```bash
+npm install --save-dev motion-start
+```
+
+```bash
+pnpm install --save-dev motion-start
+```
+
+```bash
+yarn install --save-dev motion-start
+```
+
+```bash
+bun install --save-dev motion-start
+```
+
+## Usage
+
+Corresponding to a `MotionDiv` in framer-motion is this:
+
+```javascript
+import { Motion } from 'motion-start'
+
+<Motion let:motion><div use:motion/></Motion>
+```
+For svg elements like 'g', 'path' or 'circle', use:
+
+```javascript
+<Motion let:motion isSVG><g use:motion/></Motion>
+```
+

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "motion-start",
+  "version": "0.0.1",
+  "description": "Svelte animation library based on the React library framer-motion.",
+  "main": "src/index.ts",
+  "files": [
+    "./src"
+  ],
+  "author": "JonathonRP",
+  "license": "MIT",
+  "dependencies": {
+    "@changesets/cli": "^2.27.8",
+    "@types/react": "^18.3.5",
+    "framesync": "^6.1.2",
+    "popmotion": "^11.0.5",
+    "style-value-types": "5.1.2",
+    "tslib": "^2.7.0"
+  },
+  "devDependencies": {
+    "@emotion/is-prop-valid": "^1.3.0",
+    "@sveltejs/package": "^2.3.5",
+    "@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
+    "@tsconfig/svelte": "^5.0.4",
+    "@types/node": "^20.16.5",
+    "@vitest/ui": "latest",
+    "csstype": "^3.1.3",
+    "publint": "^0.2.10",
+    "svelte": "5.0.0-next.252",
+    "typescript": "^5.6.2",
+    "vite": "^5.4.5",
+    "vitest": "latest"
+  },
+  "peerDependencies": {
+    "svelte": ">=3.35.0 || ^4.0.0 || ^5.0.0 || ^5.0.0-next.0"
+  },
+  "type": "module",
+  "engines": {
+    "pnpm": ">=8.7.0",
+    "node": ">=20"
+  },
+  "repository": {
+    "type": "git",
+    "ur": "https://github.com/JonathonRP/motion-start/"
+  },
+  "sideEffects": false,
+  "keywords": [
+    "svelte animation",
+    "svelte",
+    "animation",
+    "gestures",
+    "drag",
+    "spring",
+    "popmotion",
+    "framer-motion"
+  ],
+  "scripts": {
+    "test": "vitest --ui",
+    "test:types": "vitest --typecheck.only --ui",
+    "build": "svelte-package --input ./src && publint --strict",
+    "check": "pnpm build && svelte-check --tsconfig ./tsconfig.json",
+    "ci:version": "changeset version && pnpm -r generate:version && git add --all",
+    "ci:publish": "pnpm build && changeset publish"
+  }
+}

package/src/animation/UseAnimatedState.svelte

@@ -0,0 +1,86 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script module lang="ts">
+  var createObject = function () {
+    return {};
+  };
+  var stateVisualElement = visualElement({
+    build: function () {},
+    measureViewportBox: axisBox,
+    resetTransform: function () {},
+    restoreTransform: function () {},
+    removeValueFromRenderState: function () {},
+    render: function () {},
+    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);
+      checkTargetForNewValues(element, target, origin);
+      return __assign(
+        { transition: transition, transitionEnd: transitionEnd },
+        target
+      );
+    },
+  });
+</script>
+
+<script lang="ts">
+  import { afterUpdate, getContext, onMount } from "svelte";
+  import type { Writable } from "svelte/store";
+  import { __assign, __rest } from "tslib";
+  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 {
+    checkTargetForNewValues,
+    getOrigin,
+  } from "../render/utils/setters.js";
+  export let initialState;
+
+  let animationState = initialState;
+  const sve = stateVisualElement;
+  $: element = sve({ props: {}, visualState: state });
+  onMount(() => {
+    element.mount({});
+    return () => element.unmount();
+  });
+  const _afterUpdate = () => {
+    element.setProps({
+      onUpdate: (v) => (animationState = { ...v }),
+    });
+  };
+
+  afterUpdate(_afterUpdate);
+  const scaleCorrectionParentContext = getContext<Writable<Array<unknown>>>(
+    ScaleCorrectionParentContext
+  );
+  scaleCorrectionParentContext.update((v) =>
+    v.concat([
+      {
+        afterU: _afterUpdate,
+      },
+    ])
+  );
+  let startAnimation = (animationDefinition) => {
+    return animateVisualElement(element, animationDefinition);
+  };
+</script>
+
+<UseVisualState
+  config={{
+    scrapeMotionValuesFromProps: createObject,
+    createRenderState: createObject,
+  }}
+  props={{}}
+  isStatic={false}
+  let:state
+>
+  <slot animatedState={[animationState, startAnimation]} />
+</UseVisualState>

package/src/animation/UseAnimation.svelte

@@ -0,0 +1,61 @@
+<!-- based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V. -->
+
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { animationControls } from "./animation-controls.js";
+  /**
+   * Creates `AnimationControls`, which can be used to manually start, stop
+   * and sequence animations on one or more components.
+   *
+   * The returned `AnimationControls` should be passed to the `animate` property
+   * of the components you want to animate.
+   *
+   * These components can then be animated with the `start` method.
+   *
+   * @library
+   *
+   * ```jsx
+   * import * as React from 'react'
+   * import { Frame, useAnimation } from 'framer'
+   *
+   * export function MyComponent(props) {
+   *    const controls = useAnimation()
+   *
+   *    controls.start({
+   *        x: 100,
+   *        transition: { duration: 0.5 },
+   *    })
+   *
+   *    return <Frame animate={controls} />
+   * }
+   * ```
+   *
+   * @motion
+   *
+   * ```jsx
+   * import * as React from 'react'
+   * import { motion, useAnimation } from 'framer-motion'
+   *
+   * export function MyComponent(props) {
+   *    const controls = useAnimation()
+   *
+   *    controls.start({
+   *        x: 100,
+   *        transition: { duration: 0.5 },
+   *    })
+   *
+   *    return <MotionDiv animate={controls} />
+   * }
+   * ```
+   *
+   * @returns Animation controller with `start` and `stop` methods
+   *
+   * @public
+   */
+  let controls = animationControls();
+  onMount(controls.mount);
+</script>
+
+<slot {controls} />

package/src/animation/animate.ts

@@ -0,0 +1,78 @@
+/** 
+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 };
+

package/src/animation/animation-controls.ts

@@ -0,0 +1,101 @@
+/** 
+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 };
+

package/src/animation/types.ts

@@ -0,0 +1,83 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { VisualElement } from "../render/types";
+import type { TargetAndTransition, TargetResolver, Transition } from "../types";
+/**
+ * @public
+ */
+export type ControlsAnimationDefinition = string | string[] | TargetAndTransition | TargetResolver;
+/**
+ * @public
+ */
+export type PendingAnimations = {
+    animation: [ControlsAnimationDefinition, Transition | undefined];
+    resolve: () => void;
+};
+/**
+ * @public
+ */
+export interface AnimationControls {
+    /**
+     * Subscribes a component's animation controls to this.
+     *
+     * @param controls - The controls to subscribe
+     * @returns An unsubscribe function.
+     *
+     * @internal
+     */
+    subscribe(visualElement: VisualElement): () => void;
+    /**
+     * Starts an animation on all linked components.
+     *
+     * @remarks
+     *
+     * ```jsx
+     * controls.start("variantLabel")
+     * controls.start({
+     *   x: 0,
+     *   transition: { duration: 1 }
+     * })
+     * ```
+     *
+     * @param definition - Properties or variant label to animate to
+     * @param transition - Optional `transtion` to apply to a variant
+     * @returns - A `Promise` that resolves when all animations have completed.
+     *
+     * @public
+     */
+    start(definition: ControlsAnimationDefinition, transitionOverride?: Transition): Promise<any>;
+    /**
+     * Instantly set to a set of properties or a variant.
+     *
+     * ```jsx
+     * // With properties
+     * controls.set({ opacity: 0 })
+     *
+     * // With variants
+     * controls.set("hidden")
+     * ```
+     *
+     * @internalremarks
+     * We could perform a similar trick to `.start` where this can be called before mount
+     * and we maintain a list of of pending actions that get applied on mount. But the
+     * expectation of `set` is that it happens synchronously and this would be difficult
+     * to do before any children have even attached themselves. It's also poor practise
+     * and we should discourage render-synchronous `.start` calls rather than lean into this.
+     *
+     * @public
+     */
+    set(definition: ControlsAnimationDefinition): void;
+    /**
+     * Stops animations on all linked components.
+     *
+     * ```jsx
+     * controls.stop()
+     * ```
+     *
+     * @public
+     */
+    stop(): void;
+    mount(): () => void;
+}

package/src/animation/use-animated-state.ts

@@ -0,0 +1 @@
+export {default as UseAnimatedState} from './UseAnimatedState.svelte';

package/src/animation/use-animation.ts

@@ -0,0 +1,74 @@
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { tick } from "svelte";
+import { animationControls } from "./animation-controls"
+
+/**
+ * Creates `AnimationControls`, which can be used to manually start, stop
+ * and sequence animations on one or more components.
+ *
+ * The returned `AnimationControls` should be passed to the `animate` property
+ * of the components you want to animate.
+ *
+ * These components can then be animated with the `start` method.
+ *
+ * @library
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { Frame, useAnimation } from 'framer'
+ *
+ * export function MyComponent(props) {
+ *    const controls = useAnimation()
+ *
+ *    controls.start({
+ *        x: 100,
+ *        transition: { duration: 0.5 },
+ *    })
+ *
+ *    return <Frame animate={controls} />
+ * }
+ * ```
+ *
+ * @motion
+ *
+ * ```jsx
+ * import * as React from 'react'
+ * import { motion, useAnimation } from 'framer-motion'
+ *
+ * export function MyComponent(props) {
+ *    const controls = useAnimation()
+ *
+ *    controls.start({
+ *        x: 100,
+ *        transition: { duration: 0.5 },
+ *    })
+ *
+ *    return <MotionDiv animate={controls} />
+ * }
+ * ```
+ *
+ * @returns Animation controller with `start` and `stop` methods
+ *
+ * @public
+ */
+export const useAnimation = () =>{
+
+    const controls =  animationControls(()=>{
+
+        const cleanup: any = {}
+        tick().then(v => cleanup.clean = controls.mount());
+        return ()=>{
+            cleanup.clean?.();
+        }
+    });
+
+    return controls;
+}
+
+
+
+export { default as UseAnimation } from "./UseAnimation.svelte";

package/src/animation/utils/default-transitions.ts

@@ -0,0 +1,70 @@
+/** 
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { PopmotionTransitionProps, ValueTarget, SingleTarget, KeyframesTarget } from "../../types";
+
+
+/** 
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+
+import { __assign } from 'tslib';
+import { isKeyframesTarget } from './is-keyframes-target.js';
+
+var underDampedSpring = function () { return ({
+    type: "spring",
+    stiffness: 500,
+    damping: 25,
+    restDelta: 0.5,
+    restSpeed: 10,
+}); };
+var criticallyDampedSpring = function (to: SingleTarget) { return ({
+    type: "spring",
+    stiffness: 550,
+    damping: to === 0 ? 2 * Math.sqrt(550) : 30,
+    restDelta: 0.01,
+    restSpeed: 10,
+}); };
+var linearTween = function () { return ({
+    type: "keyframes",
+    ease: "linear",
+    duration: 0.3,
+}); };
+var keyframes = function (values: KeyframesTarget) { return ({
+    type: "keyframes",
+    duration: 0.8,
+    values: values,
+}); };
+var defaultTransitions = {
+    x: underDampedSpring,
+    y: underDampedSpring,
+    z: underDampedSpring,
+    rotate: underDampedSpring,
+    rotateX: underDampedSpring,
+    rotateY: underDampedSpring,
+    rotateZ: underDampedSpring,
+    scaleX: criticallyDampedSpring,
+    scaleY: criticallyDampedSpring,
+    scale: criticallyDampedSpring,
+    opacity: linearTween,
+    backgroundColor: linearTween,
+    color: linearTween,
+    default: criticallyDampedSpring,
+};
+
+// TODO: need to bring closer to Transition - then can use keyof typeof defaultTransitions.
+var getDefaultTransition = function (valueKey: string, to: ValueTarget): PopmotionTransitionProps {
+    var transitionFactory: (v: any) => any;
+    if (isKeyframesTarget(to)) {
+        transitionFactory = keyframes;
+    }
+    else {
+        transitionFactory =
+            (defaultTransitions as any)[valueKey] || defaultTransitions.default;
+    }
+    return __assign({ to: to }, transitionFactory(to));
+};
+
+export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };