motion-start 0.0.1 → 0.0.3

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

@@ -1,83 +1,84 @@
-/** 
-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;
-}
+/**
+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;
+}
+//# sourceMappingURL=types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/types.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,OAAO,KAAK,EAAE,mBAAmB,EAAE,cAAc,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAChF;;GAEG;AACH,MAAM,MAAM,2BAA2B,GAAG,MAAM,GAAG,MAAM,EAAE,GAAG,mBAAmB,GAAG,cAAc,CAAC;AACnG;;GAEG;AACH,MAAM,MAAM,iBAAiB,GAAG;IAC5B,SAAS,EAAE,CAAC,2BAA2B,EAAE,UAAU,GAAG,SAAS,CAAC,CAAC;IACjE,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB,CAAC;AACF;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAC9B;;;;;;;OAOG;IACH,SAAS,CAAC,aAAa,EAAE,aAAa,GAAG,MAAM,IAAI,CAAC;IACpD;;;;;;;;;;;;;;;;;;OAkBG;IACH,KAAK,CAAC,UAAU,EAAE,2BAA2B,EAAE,kBAAkB,CAAC,EAAE,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,CAAC;IAC9F;;;;;;;;;;;;;;;;;;;OAmBG;IACH,GAAG,CAAC,UAAU,EAAE,2BAA2B,GAAG,IAAI,CAAC;IACnD;;;;;;;;OAQG;IACH,IAAI,IAAI,IAAI,CAAC;IACb,KAAK,IAAI,MAAM,IAAI,CAAC;CACvB"}

package/dist/animation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/animation/use-animated-state.d.ts

@@ -0,0 +1,2 @@
+export { default as UseAnimatedState } from './UseAnimatedState.svelte';
+//# sourceMappingURL=use-animated-state.d.ts.map

package/dist/animation/use-animated-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-animated-state.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/use-animated-state.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,OAAO,IAAI,gBAAgB,EAAC,MAAM,2BAA2B,CAAC"}

package/dist/animation/use-animated-state.js

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

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

@@ -0,0 +1,62 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * 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 declare const useAnimation: () => {
+    subscribe: (visualElement: import("..").VisualElement<any, any>) => () => void;
+    start: (definition: import("./types").ControlsAnimationDefinition, transitionOverride: import("..").Transition | undefined) => Promise<any>;
+    set: (definition: import("./types").ControlsAnimationDefinition) => void;
+    stop: () => void;
+    mount: () => () => void;
+};
+export { default as UseAnimation } from "./UseAnimation.svelte";
+//# sourceMappingURL=use-animation.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"use-animation.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/animation/use-animation.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAKF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,eAAO,MAAM,YAAY;;;;;;CAYxB,CAAA;AAID,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC"}

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

@@ -1,74 +1,66 @@
-/** 
-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";
+/**
+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 = {};
+        tick().then(v => cleanup.clean = controls.mount());
+        return () => {
+            cleanup.clean?.();
+        };
+    });
+    return controls;
+};
+export { default as UseAnimation } from "./UseAnimation.svelte";

package/dist/animation/utils/default-transitions.d.ts

@@ -0,0 +1,27 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { PopmotionTransitionProps, ValueTarget, SingleTarget } from "../../types";
+declare var underDampedSpring: () => {
+    type: string;
+    stiffness: number;
+    damping: number;
+    restDelta: number;
+    restSpeed: number;
+};
+declare var criticallyDampedSpring: (to: SingleTarget) => {
+    type: string;
+    stiffness: number;
+    damping: number;
+    restDelta: number;
+    restSpeed: number;
+};
+declare var linearTween: () => {
+    type: string;
+    ease: string;
+    duration: number;
+};
+declare var getDefaultTransition: (valueKey: string, to: ValueTarget) => PopmotionTransitionProps;
+export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };
+//# sourceMappingURL=default-transitions.d.ts.map

package/dist/animation/utils/default-transitions.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"default-transitions.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/animation/utils/default-transitions.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,wBAAwB,EAAE,WAAW,EAAE,YAAY,EAAmB,MAAM,aAAa,CAAC;AAWxG,QAAA,IAAI,iBAAiB;;;;;;CAMhB,CAAC;AACN,QAAA,IAAI,sBAAsB,OAAiB,YAAY;;;;;;CAMlD,CAAC;AACN,QAAA,IAAI,WAAW;;;;CAIV,CAAC;AAwBN,QAAA,IAAI,oBAAoB,aAAuB,MAAM,MAAM,WAAW,KAAG,wBAUxE,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/animation/utils/default-transitions.js

@@ -0,0 +1,67 @@
+/**
+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) {
+    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) {
+    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, to) {
+    var transitionFactory;
+    if (isKeyframesTarget(to)) {
+        transitionFactory = keyframes;
+    }
+    else {
+        transitionFactory =
+            defaultTransitions[valueKey] || defaultTransitions.default;
+    }
+    return __assign({ to: to }, transitionFactory(to));
+};
+export { criticallyDampedSpring, getDefaultTransition, linearTween, underDampedSpring };

package/dist/animation/utils/easing.d.ts

@@ -0,0 +1,9 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { Easing, EasingFunction } from "../../types";
+declare var easingDefinitionToFunction: (definition: Easing) => EasingFunction;
+declare const isEasingArray: (ease: any) => ease is Easing[];
+export { easingDefinitionToFunction, isEasingArray };
+//# sourceMappingURL=easing.d.ts.map

package/dist/animation/utils/easing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"easing.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/animation/utils/easing.ts"],"names":[],"mappings":"AAAA;;;EAGE;AAEF,OAAO,KAAK,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AA8B1D,QAAA,IAAI,0BAA0B,eAAyB,MAAM,KAAG,cAa/D,CAAC;AACF,QAAA,MAAM,aAAa,SAAU,GAAG,KAAG,IAAI,IAAI,MAAM,EAEhD,CAAC;AAEF,OAAO,EAAE,0BAA0B,EAAE,aAAa,EAAE,CAAC"}

package/{src/animation/utils/easing.ts → dist/animation/utils/easing.js}

@@ -1,55 +1,43 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-// TODO: import type { EasingFunction } from "svelte/transition"; future idea, maybe use svelte built in easing function...
-import type { Easing, EasingFunction } from "../../types";
-// export declare const easingDefinitionToFunction: (definition: Easing) => import("../../types").EasingFunction;
-// export declare const isEasingArray: (ease: any) => ease is Easing[];
-
-
-
-/** 
-based on framer-motion@4.0.3,
-Copyright (c) 2018 Framer B.V.
-*/
-import { anticipate, backIn, backInOut, backOut, bounceIn, bounceInOut, bounceOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut, linear } from 'popmotion';
-import { __read } from 'tslib';
-// import { invariant } from '../../utils/errors.js';
-
-var easingLookup = {
-    linear: linear,
-    easeIn: easeIn,
-    easeInOut: easeInOut,
-    easeOut: easeOut,
-    circIn: circIn,
-    circInOut: circInOut,
-    circOut: circOut,
-    backIn: backIn,
-    backInOut: backInOut,
-    backOut: backOut,
-    anticipate: anticipate,
-    bounceIn: bounceIn,
-    bounceInOut: bounceInOut,
-    bounceOut: bounceOut,
-};
-var easingDefinitionToFunction = function (definition: Easing): EasingFunction {
-    if (Array.isArray(definition)) {
-        // If cubic bezier definition, create bezier curve
-        //invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values.");
-        var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
-        return cubicBezier(x1, y1, x2, y2);
-    }
-    else if (typeof definition === "string") {
-        // Else lookup from table
-        //invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
-        return easingLookup[definition];
-    }
-    return definition;
-};
-const isEasingArray = (ease: any): ease is Easing[] => {
-    return Array.isArray(ease) && typeof ease[0] !== "number";
-};
-
-export { easingDefinitionToFunction, isEasingArray };
-
+// export declare const easingDefinitionToFunction: (definition: Easing) => import("../../types").EasingFunction;
+// export declare const isEasingArray: (ease: any) => ease is Easing[];
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { anticipate, backIn, backInOut, backOut, bounceIn, bounceInOut, bounceOut, circIn, circInOut, circOut, cubicBezier, easeIn, easeInOut, easeOut, linear } from 'popmotion';
+import { __read } from 'tslib';
+// import { invariant } from '../../utils/errors.js';
+var easingLookup = {
+    linear: linear,
+    easeIn: easeIn,
+    easeInOut: easeInOut,
+    easeOut: easeOut,
+    circIn: circIn,
+    circInOut: circInOut,
+    circOut: circOut,
+    backIn: backIn,
+    backInOut: backInOut,
+    backOut: backOut,
+    anticipate: anticipate,
+    bounceIn: bounceIn,
+    bounceInOut: bounceInOut,
+    bounceOut: bounceOut,
+};
+var easingDefinitionToFunction = function (definition) {
+    if (Array.isArray(definition)) {
+        // If cubic bezier definition, create bezier curve
+        //invariant(definition.length === 4, "Cubic bezier arrays must contain four numerical values.");
+        var _a = __read(definition, 4), x1 = _a[0], y1 = _a[1], x2 = _a[2], y2 = _a[3];
+        return cubicBezier(x1, y1, x2, y2);
+    }
+    else if (typeof definition === "string") {
+        // Else lookup from table
+        //invariant(easingLookup[definition] !== undefined, "Invalid easing type '" + definition + "'");
+        return easingLookup[definition];
+    }
+    return definition;
+};
+const isEasingArray = (ease) => {
+    return Array.isArray(ease) && typeof ease[0] !== "number";
+};
+export { easingDefinitionToFunction, isEasingArray };

package/dist/animation/utils/is-animatable.d.ts

@@ -0,0 +1,17 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { ResolvedValueTarget } from "../../types";
+/**
+ * Check if a value is animatable. Examples:
+ *
+ * ✅: 100, "100px", "#fff"
+ * ❌: "block", "url(2.jpg)"
+ * @param value
+ *
+ * @internal
+ */
+declare var isAnimatable: (key: string, value: ResolvedValueTarget) => boolean;
+export { isAnimatable };
+//# sourceMappingURL=is-animatable.d.ts.map

package/dist/animation/utils/is-animatable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-animatable.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/animation/utils/is-animatable.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAC;AAUvD;;;;;;;;GAQG;AACH,QAAA,IAAI,YAAY,QAAkB,MAAM,SAAS,mBAAmB,YAgBnE,CAAC;AAEF,OAAO,EAAE,YAAY,EAAE,CAAC"}