motion-start 0.0.1 → 0.1.0

package/{src/value/scroll/use-viewport-scroll.ts → dist/value/scroll/use-viewport-scroll.js}

@@ -1,81 +1,59 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import type { ScrollMotionValues } from "./utils";
-
-
-/** 
-based on framer-motion@4.1.16,
-Copyright (c) 2018 Framer B.V.
-*/
-import {
-    createScrollMotionValues,
-    createScrollUpdater,
-} from "./utils"
-import { addDomEvent } from "../../events/use-dom-event"
-import { tick } from "svelte"
-
-let viewportScrollValues
-
-
-function getViewportScrollOffsets() {
-    return {
-        xOffset: window.pageXOffset,
-        yOffset: window.pageYOffset,
-        xMaxOffset: document.body.clientWidth - window.innerWidth,
-        yMaxOffset: document.body.clientHeight - window.innerHeight,
-    }
-}
-
-let hasListeners = false
-
-function addEventListeners() {
-    hasListeners = true
-    if (typeof window === "undefined") return
-
-    const updateScrollValues = createScrollUpdater(
-        viewportScrollValues,
-        getViewportScrollOffsets
-    )
-
-    addDomEvent(window, "scroll", updateScrollValues, { passive: true })
-    addDomEvent(window, "resize", updateScrollValues)
-}
-
-/**
- * Returns MotionValues that update when the viewport scrolls:
- *
- * - `scrollX` — Horizontal scroll distance in pixels.
- * - `scrollY` — Vertical scroll distance in pixels.
- * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
- * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
- *
- * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
- * values as this breaks the browser's capability to accurately measure the page length.
- *
- * @motion
- *
- * ```jsx
- * export const MyComponent = () => {
- *   const { scrollYProgress } = useViewportScroll()
- *   return <MotionDiv style={{ scaleX: scrollYProgress }} />
- * }
- * ```
- *
- * @public
- */
-export function useViewportScroll() {
-    /**
-     * Lazy-initialise the viewport scroll values
-     */
-    if (!viewportScrollValues) {
-        viewportScrollValues = createScrollMotionValues()
-    }
-
-    tick().then(_=>{
-        !hasListeners && addEventListeners()
-    })
-    
-    return viewportScrollValues as ScrollMotionValues
-}
+/**
+based on framer-motion@4.1.16,
+Copyright (c) 2018 Framer B.V.
+*/
+import { createScrollMotionValues, createScrollUpdater, } from "./utils";
+import { addDomEvent } from "../../events/use-dom-event";
+import { tick } from "svelte";
+let viewportScrollValues;
+function getViewportScrollOffsets() {
+    return {
+        xOffset: window.pageXOffset,
+        yOffset: window.pageYOffset,
+        xMaxOffset: document.body.clientWidth - window.innerWidth,
+        yMaxOffset: document.body.clientHeight - window.innerHeight,
+    };
+}
+let hasListeners = false;
+function addEventListeners() {
+    hasListeners = true;
+    if (typeof window === "undefined")
+        return;
+    const updateScrollValues = createScrollUpdater(viewportScrollValues, getViewportScrollOffsets);
+    addDomEvent(window, "scroll", updateScrollValues, { passive: true });
+    addDomEvent(window, "resize", updateScrollValues);
+}
+/**
+ * Returns MotionValues that update when the viewport scrolls:
+ *
+ * - `scrollX` — Horizontal scroll distance in pixels.
+ * - `scrollY` — Vertical scroll distance in pixels.
+ * - `scrollXProgress` — Horizontal scroll progress between `0` and `1`.
+ * - `scrollYProgress` — Vertical scroll progress between `0` and `1`.
+ *
+ * **Warning:** Setting `body` or `html` to `height: 100%` or similar will break the `Progress`
+ * values as this breaks the browser's capability to accurately measure the page length.
+ *
+ * @motion
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const { scrollYProgress } = useViewportScroll()
+ *   return <MotionDiv style={{ scaleX: scrollYProgress }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+export function useViewportScroll() {
+    /**
+     * Lazy-initialise the viewport scroll values
+     */
+    if (!viewportScrollValues) {
+        viewportScrollValues = createScrollMotionValues();
+    }
+    tick().then(_ => {
+        !hasListeners && addEventListeners();
+    });
+    return viewportScrollValues;
+}

package/dist/value/scroll/utils.d.ts

@@ -0,0 +1,25 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionValue } from '../index.js';
+/**
+ * @public
+ */
+export interface ScrollMotionValues {
+    scrollX: MotionValue<number>;
+    scrollY: MotionValue<number>;
+    scrollXProgress: MotionValue<number>;
+    scrollYProgress: MotionValue<number>;
+}
+export interface ScrollOffsets {
+    xOffset: number;
+    yOffset: number;
+    xMaxOffset: number;
+    yMaxOffset: number;
+}
+export type GetScrollOffsets = () => ScrollOffsets;
+declare function createScrollMotionValues(startStopNotifier?: () => Promise<() => void>): ScrollMotionValues;
+declare function createScrollUpdater(values: ScrollMotionValues, getOffsets: GetScrollOffsets): () => void;
+export { createScrollMotionValues, createScrollUpdater };
+//# sourceMappingURL=utils.d.ts.map

package/dist/value/scroll/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/motion-start/value/scroll/utils.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC/C;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAClC,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,OAAO,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,eAAe,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;CACrC;AACD,MAAM,WAAW,aAAa;IAC7B,OAAO,EAAE,MAAM,CAAC;IAChB,OAAO,EAAE,MAAM,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACnB;AACD,MAAM,MAAM,gBAAgB,GAAG,MAAM,aAAa,CAAC;AAQnD,iBAAS,wBAAwB,CAAC,iBAAiB,CAAC,EAAE,MAAM,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,kBAAkB,CA2BnG;AAMD,iBAAS,mBAAmB,CAAC,MAAM,EAAE,kBAAkB,EAAE,UAAU,EAAE,gBAAgB,cAgBpF;AAED,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,CAAC"}

package/dist/value/scroll/utils.js

@@ -0,0 +1,48 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import { motionValue } from '../index.js';
+function createScrollMotionValues(startStopNotifier) {
+    const hasListener = { x: false, y: false, xp: false, yp: false };
+    let stop;
+    const jointNotifier = startStopNotifier
+        ? (type) => () => {
+            if (!hasListener.x && !hasListener.y && !hasListener.xp && !hasListener.yp) {
+                stop = startStopNotifier();
+            }
+            hasListener[type] = true;
+            return () => {
+                hasListener[type] = false;
+                if (!hasListener.x && !hasListener.y && !hasListener.xp && !hasListener.yp) {
+                    if (stop) {
+                        stop.then((v) => v());
+                    }
+                }
+            };
+        }
+        : () => void {};
+    return {
+        scrollX: motionValue(0, jointNotifier('x')),
+        scrollY: motionValue(0, jointNotifier('y')),
+        scrollXProgress: motionValue(0, jointNotifier('xp')),
+        scrollYProgress: motionValue(0, jointNotifier('yp')),
+    };
+}
+function setProgress(offset, maxOffset, value) {
+    value.set(!offset || !maxOffset ? 0 : offset / maxOffset);
+}
+function createScrollUpdater(values, getOffsets) {
+    var update = () => {
+        var _a = getOffsets(), xOffset = _a.xOffset, yOffset = _a.yOffset, xMaxOffset = _a.xMaxOffset, yMaxOffset = _a.yMaxOffset;
+        // Set absolute positions
+        values.scrollX.set(xOffset);
+        values.scrollY.set(yOffset);
+        // Set 0-1 progress
+        setProgress(xOffset, xMaxOffset, values.scrollXProgress);
+        setProgress(yOffset, yMaxOffset, values.scrollYProgress);
+    };
+    update();
+    return update;
+}
+export { createScrollMotionValues, createScrollUpdater };

package/dist/value/use-combine-values.d.ts

@@ -0,0 +1,9 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { MotionValue } from '.';
+export declare const useCombineMotionValues: <R>(values: (MotionValue | (() => R))[], combineValues: () => R) => MotionValue<R> & {
+    reset: (values: MotionValue[], combineValues: () => R) => void;
+};
+//# sourceMappingURL=use-combine-values.d.ts.map

package/dist/value/use-combine-values.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-combine-values.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/value/use-combine-values.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AASrC,eAAO,MAAM,sBAAsB,GAAI,CAAC,UAAU,CAAC,WAAW,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,iBAAiB,MAAM,CAAC;WAiBpE,CAAC,MAAM,EAAE,WAAW,EAAE,EAAE,aAAa,EAAE,MAAM,CAAC,KAAK,IAAI;CAqBvF,CAAC"}

package/dist/value/use-combine-values.js

@@ -0,0 +1,41 @@
+/**
+based on framer-motion@4.0.3,
+Copyright (c) 2018 Framer B.V.
+*/
+import sync from 'framesync';
+import { motionValue } from '.';
+export const useCombineMotionValues = (values, combineValues) => {
+    let subscriptions = [];
+    let vals = values;
+    const unsubscribe = () => {
+        for (const unsubscribe of subscriptions) {
+            unsubscribe();
+        }
+    };
+    const subscribe = () => {
+        subscriptions = vals.map((val) => val.onChange(handler));
+        updateValue();
+    };
+    const value = motionValue(combineValues(), () => {
+        unsubscribe();
+        subscribe();
+        return unsubscribe;
+    });
+    let updateValue = () => {
+        value.set(combineValues());
+    };
+    const handler = () => {
+        sync.update(updateValue, false, true);
+    };
+    value.reset = (_values, _combineValues) => {
+        vals = _values;
+        //cleanup and reset
+        unsubscribe();
+        updateValue = () => {
+            value.set(_combineValues());
+        };
+        subscribe();
+    };
+    return value;
+};
+// export { default as UseCombineMotionValues } from "./UseCombineValues.svelte";

package/dist/value/use-motion-template.d.ts

@@ -0,0 +1,31 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from ".";
+/**
+ * Combine multiple motion values into a new one using a string template literal.
+ *
+ * ```jsx
+ * import {
+ *   motion,
+ *   useSpring,
+ *   useMotionValue,
+ *   useMotionTemplate
+ * } from "framer-motion"
+ *
+ * function Component() {
+ *   const shadowX = useSpring(0)
+ *   const shadowY = useMotionValue(0)
+ *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
+ *
+ *   return <MotionDiv style={{ filter: shadow }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+export declare const useMotionTemplate: (fragments: TemplateStringsArray, ...values: MotionValue[]) => MotionValue<string> & {
+    reset: (fragments: TemplateStringsArray, ...values: MotionValue[]) => void;
+};
+//# sourceMappingURL=use-motion-template.d.ts.map

package/dist/value/use-motion-template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion-template.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/value/use-motion-template.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAIhC;;;;;;;;;;;;;;;;;;;;;GAqBG;AAEH,eAAO,MAAM,iBAAiB,cAAe,oBAAoB,aAAa,WAAW,EAAE,KAwBvE,WAAW,CAAC,MAAM,CAAC,GAAG;IAAE,KAAK,EAAE,CAAC,SAAS,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,WAAW,EAAE,KAAK,IAAI,CAAA;CACrH,CAAA"}

package/{src/value/use-motion-template.ts → dist/value/use-motion-template.js}

@@ -1,57 +1,51 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-import { MotionValue } from ".";
-
-import { useCombineMotionValues } from "./use-combine-values"
-
-/**
- * Combine multiple motion values into a new one using a string template literal.
- *
- * ```jsx
- * import {
- *   motion,
- *   useSpring,
- *   useMotionValue,
- *   useMotionTemplate
- * } from "framer-motion"
- *
- * function Component() {
- *   const shadowX = useSpring(0)
- *   const shadowY = useMotionValue(0)
- *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
- *
- *   return <MotionDiv style={{ filter: shadow }} />
- * }
- * ```
- *
- * @public
- */
-
-export const useMotionTemplate = (fragments: TemplateStringsArray, ...values: MotionValue[]) => {
-    /**
-    * Create a function that will build a string from the latest motion values.
-    */
-    let numFragments = fragments.length;
-    const buildValue = () => {
-        let output = ``
-
-        for (let i = 0; i < numFragments; i++) {
-            output += fragments[i]
-            const value = values[i]
-            if (value) output += values[i].get()
-        }
-
-        return output
-    }
-    const value = useCombineMotionValues(values, buildValue) as any;
-    value.resetInner = value.reset;
-
-    value.reset = (f: TemplateStringsArray, ...vs: MotionValue[]) => {
-        numFragments = f.length;
-        value.resetInner(vs,buildValue)
-    }
-
-    return value as MotionValue<string> & { reset: (fragments: TemplateStringsArray, ...values: MotionValue[]) => void };
-}
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import { MotionValue } from ".";
+import { useCombineMotionValues } from "./use-combine-values";
+/**
+ * Combine multiple motion values into a new one using a string template literal.
+ *
+ * ```jsx
+ * import {
+ *   motion,
+ *   useSpring,
+ *   useMotionValue,
+ *   useMotionTemplate
+ * } from "framer-motion"
+ *
+ * function Component() {
+ *   const shadowX = useSpring(0)
+ *   const shadowY = useMotionValue(0)
+ *   const shadow = useMotionTemplate`drop-shadow(${shadowX}px ${shadowY}px 20px rgba(0,0,0,0.3))`
+ *
+ *   return <MotionDiv style={{ filter: shadow }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+export const useMotionTemplate = (fragments, ...values) => {
+    /**
+    * Create a function that will build a string from the latest motion values.
+    */
+    let numFragments = fragments.length;
+    const buildValue = () => {
+        let output = ``;
+        for (let i = 0; i < numFragments; i++) {
+            output += fragments[i];
+            const value = values[i];
+            if (value)
+                output += values[i].get();
+        }
+        return output;
+    };
+    const value = useCombineMotionValues(values, buildValue);
+    value.resetInner = value.reset;
+    value.reset = (f, ...vs) => {
+        numFragments = f.length;
+        value.resetInner(vs, buildValue);
+    };
+    return value;
+};

package/dist/value/use-motion-value.d.ts

@@ -0,0 +1,27 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * @motion
+ *
+ * ```jsx
+ * <script>
+ *   const scale = useMotionValue(1)
+ * </script
+ *
+ * <Motion let:motion>
+ *  <div style={{scale}} use:motion/>
+ * </Motion>
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+export { motionValue as useMotionValue } from './index.js';
+//# sourceMappingURL=use-motion-value.d.ts.map

package/dist/value/use-motion-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-motion-value.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/value/use-motion-value.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,OAAO,EAAE,WAAW,IAAI,cAAc,EAAE,MAAM,YAAY,CAAC"}

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

@@ -1,27 +1,27 @@
-/** 
-based on framer-motion@4.1.17,
-Copyright (c) 2018 Framer B.V.
-*/
-/**
- * Creates a `MotionValue` to track the state and velocity of a value.
- *
- * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
- *
- * @motion
- *
- * ```jsx
- * <script>
- *   const scale = useMotionValue(1)
- * </script
- * 
- * <Motion let:motion>
- *  <div style={{scale}} use:motion/>
- * </Motion>
- * ```
- * 
- * @param initial - The initial state.
- *
- * @public
- */
-export { motionValue as useMotionValue } from './index.js';
-// export { default as UseMotionValue } from './UseMotionValue.svelte';
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+/**
+ * Creates a `MotionValue` to track the state and velocity of a value.
+ *
+ * Usually, these are created automatically. For advanced use-cases, like use with `useTransform`, you can create `MotionValue`s externally and pass them into the animated component via the `style` prop.
+ *
+ * @motion
+ *
+ * ```jsx
+ * <script>
+ *   const scale = useMotionValue(1)
+ * </script
+ *
+ * <Motion let:motion>
+ *  <div style={{scale}} use:motion/>
+ * </Motion>
+ * ```
+ *
+ * @param initial - The initial state.
+ *
+ * @public
+ */
+export { motionValue as useMotionValue } from './index.js';
+// export { default as UseMotionValue } from './UseMotionValue.svelte';

package/dist/value/use-spring.d.ts

@@ -0,0 +1,29 @@
+/**
+based on framer-motion@4.1.17,
+Copyright (c) 2018 Framer B.V.
+*/
+import type { SpringOptions } from "popmotion";
+import { MotionValue } from ".";
+/**
+ * Creates a `MotionValue` that, when `set`, will use a spring animation to animate to its new state.
+ *
+ * It can either work as a stand-alone `MotionValue` by initialising it with a value, or as a subscriber
+ * to another `MotionValue`.
+ *
+ * @remarks
+ *
+ * ```jsx
+ * const x = useSpring(0, { stiffness: 300 })
+ * const y = useSpring(x, { damping: 10 })
+ * ```
+ *
+ * @param inputValue - `MotionValue` or number. If provided a `MotionValue`, when the input `MotionValue` changes, the created `MotionValue` will spring towards that value.
+ * @param springConfig - Configuration options for the spring.
+ * @returns `MotionValue`
+ *
+ * @public
+ */
+export declare const useSpring: (source: MotionValue | number, config?: SpringOptions, isCustom?: boolean) => MotionValue<any> & {
+    reset: (_: any, config: SpringOptions) => void;
+};
+//# sourceMappingURL=use-spring.d.ts.map

package/dist/value/use-spring.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-spring.d.ts","sourceRoot":"","sources":["../../../../src/lib/motion-start/value/use-spring.ts"],"names":[],"mappings":"AAAA;;;EAGE;AACF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,WAAW,EAAE,MAAM,GAAG,CAAC;AAehC;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,SAAS,WAAY,WAAW,GAAG,MAAM,WAAU,aAAa;WAMgC,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,aAAa,KAAK,IAAI;CAoCnJ,CAAA"}