motion-start 0.0.1 → 0.1.0

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?: any) => 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;AAQxG,QAAA,IAAI,iBAAiB;;;;;;CAMnB,CAAC;AACH,QAAA,IAAI,sBAAsB,OAAQ,YAAY;;;;;;CAM5C,CAAC;AACH,QAAA,IAAI,WAAW;;;;CAIb,CAAC;AAwBH,QAAA,IAAI,oBAAoB,aAAc,MAAM,MAAM,WAAW,KAAG,wBAQ/D,CAAC;AAEF,OAAO,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,WAAW,EAAE,iBAAiB,EAAE,CAAC"}

package/{src/animation/utils/default-transitions.ts → dist/animation/utils/default-transitions.js}

@@ -1,70 +1,57 @@
-/** 
-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 };
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { isKeyframesTarget } from './is-keyframes-target.js';
+var underDampedSpring = () => ({
+    type: 'spring',
+    stiffness: 500,
+    damping: 25,
+    restDelta: 0.5,
+    restSpeed: 10,
+});
+var criticallyDampedSpring = (to) => ({
+    type: 'spring',
+    stiffness: 550,
+    damping: to === 0 ? 2 * Math.sqrt(550) : 30,
+    restDelta: 0.01,
+    restSpeed: 10,
+});
+var linearTween = () => ({
+    type: 'keyframes',
+    ease: 'linear',
+    duration: 0.3,
+});
+var keyframes = (values) => ({
+    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 = (valueKey, to) => {
+    var transitionFactory;
+    if (isKeyframesTarget(to)) {
+        transitionFactory = keyframes;
+    }
+    else {
+        transitionFactory = defaultTransitions[valueKey] || defaultTransitions.default;
+    }
+    return Object.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: Easing[] | 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;AA2C1D,QAAA,IAAI,0BAA0B,eAAgB,MAAM,KAAG,cAYtD,CAAC;AACF,QAAA,MAAM,aAAa,SAAU,MAAM,EAAE,GAAG,GAAG,KAAG,IAAI,IAAI,MAAM,EAE3D,CAAC;AAEF,OAAO,EAAE,0BAA0B,EAAE,aAAa,EAAE,CAAC"}