svelte-motion - npm Package Compare versions

Comparing version 0.6.0 to 0.6.1

package.json

 {
   "name": "svelte-motion",
-  "version": "0.6.0",
+  "version": "0.6.1",
   "description": "Svelte animstion library baded on the React library framer-motion.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/index.js

@@ -40,4 +40,4 @@ /**
 export { useSpring } from './value/use-spring.js';
-export { UseElementScroll } from './value/scroll/use-element-scroll.js';
-export { UseViewportScroll } from './value/scroll/use-viewport-scroll.js';
+export { useElementScroll } from './value/scroll/use-element-scroll.js';
+export { useViewportScroll } from './value/scroll/use-viewport-scroll.js';
 export { UseReducedMotion } from './utils/use-reduced-motion.js';
@@ -44,0 +44,0 @@ export { UseAnimation, useAnimation } from './animation/use-animation.js';

src/value/scroll/use-element-scroll.js

@@ -1,1 +0,68 @@
-export { default as UseElementScroll } from './UseElementScroll.svelte';
+/** 
+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 { onDestroy, tick } from "svelte"
+
+const getElementScrollOffsets = (element) => () => {
+    return {
+        xOffset: element.scrollLeft,
+        yOffset: element.scrollTop,
+        xMaxOffset: element.scrollWidth - element.offsetWidth,
+        yMaxOffset: element.scrollHeight - element.offsetHeight,
+    }
+}
+
+export const useElementScroll = (ref) => {
+    
+    const values = createScrollMotionValues();
+    let cleanup;
+    const setScroll = ()=>{
+        cleanup?.();
+
+        if ( (!ref || !ref.current) && !values.ref ){
+            return;
+        }
+        const element = (ref && ref.current) ? ref : values.ref;
+
+        const updateScrollValues = createScrollUpdater(
+            values,
+            getElementScrollOffsets(element)
+        )
+
+        const scrollListener = addDomEvent(
+            element,
+            "scroll",
+            updateScrollValues,
+            { passive: true }
+        )
+
+        const resizeListener = addDomEvent(
+            element,
+            "resize",
+            updateScrollValues
+        )
+        cleanup = ()=>{
+            scrollListener && scrollListener()
+            resizeListener && resizeListener()
+        }
+    }
+
+
+    if (ref && ref.current){
+        setScroll()
+    }else{
+        tick().then(setScroll)
+    }
+
+    onDestroy(()=>cleanup?.())
+    
+    return values;
+}
+
+//export { default as UseElementScroll } from './UseElementScroll.svelte';

src/value/scroll/use-viewport-scroll.js

@@ -1,1 +0,90 @@
-export { default as UseViewportScroll } from './UseViewportScroll.svelte';
+/** 
+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.
+ *
+ * @library
+ *
+ * ```jsx
+ * import * as React from "react"
+ * import {
+ *   Frame,
+ *   useViewportScroll,
+ *   useTransform
+ * } from "framer"
+ *
+ * export function MyComponent() {
+ *   const { scrollYProgress } = useViewportScroll()
+ *   return <Frame scaleX={scrollYProgress} />
+ * }
+ * ```
+ *
+ * @motion
+ *
+ * ```jsx
+ * export const MyComponent = () => {
+ *   const { scrollYProgress } = useViewportScroll()
+ *   return <motion.div style={{ scaleX: scrollYProgress }} />
+ * }
+ * ```
+ *
+ * @public
+ */
+export function useViewportScroll() {
+    /**
+     * Lazy-initialise the viewport scroll values
+     */
+    if (!viewportScrollValues) {
+        viewportScrollValues = createScrollMotionValues()
+    }
+
+    tick().then(_=>{
+        !hasListeners && addEventListeners()
+    })
+    
+    return viewportScrollValues
+}

src/value/use-combine-values.js

@@ -13,3 +13,3 @@ /**
 
-  const updateValue = () => {
+  let updateValue = () => {
     value.set(combineValues());
@@ -32,8 +32,10 @@ }
 
-  value.reset = (values, combineValues) => {
+  value.reset = (_values, _combineValues) => {
     //cleanup and reset
     subscriptions.forEach((unsubscribe) => unsubscribe())
-    subscriptions = values.map((val) => val.onChange(handler));
-
-    value.set(combineValues());
+    updateValue = ()=>{
+      value.set(_combineValues())
+    }
+    subscriptions = _values.map((val) => val.onChange(handler));
+    updateValue();
   }
@@ -40,0 +42,0 @@

src/value/use-transform.js

@@ -9,4 +9,6 @@ import { transform } from "../utils/transform"
     options
-)=>{
-    let latest=[];
+) => {
+
+    let latest = [];
+
     const update = (
@@ -16,56 +18,44 @@ input,
         outputRange,
-        options,
-        latest,
-        combined
-        )=>{
+        options
+    ) => {
         const transformer = typeof inputRangeOrTransformer === "function"
-        ? inputRangeOrTransformer
-        : transform(inputRangeOrTransformer, outputRange, options);
-        const values =  Array.isArray(input) ? input : [input];
-        const _transformer = Array.isArray(input) ? transformer : 
-        ([latest]) =>
-              transformer(latest);
+            ? inputRangeOrTransformer
+            : transform(inputRangeOrTransformer, outputRange, options);
+        const values = Array.isArray(input) ? input : [input];
+        const _transformer = Array.isArray(input) ? transformer :
+            ([latest]) =>
+                transformer(latest);
+        return [values, () => {
+            latest.length = 0
+            const numValues = values.length
+            for (let i = 0; i < numValues; i++) {
+                latest[i] = values[i].get()
+            }
 
-        let cmb = combined;
-        if (!cmb){
-            cmb = useCombineMotionValues(values, ()=>{
-                latest.length = 0
-                const numValues = values.length
-                for (let i = 0; i < numValues; i++) {
-                    latest[i] = values[i].get()
-                }
-        
-                return _transformer(latest)
-            })
+            return _transformer(latest)
+        }]
 
-            cmb.updateInner = cmb.reset;
-        } else {
-            cmb.updateInner(values, ()=>{
-                latest.length = 0
-                const numValues = values.length
-                for (let i = 0; i < numValues; i++) {
-                    latest[i] = values[i].get()
-                }
-        
-                return _transformer(latest)
-            })
-        }
-        return cmb;
     }
-    const comb = update( input,
+    const comb = useCombineMotionValues(...update(input,
         inputRangeOrTransformer,
         outputRange,
-        options,
-        latest)
-    comb.reset = (input,
+        options));
+
+    comb.updateInner = comb.reset;
+
+    comb.reset = (
+        input,
         inputRangeOrTransformer,
         outputRange,
-        options) => update(input,
-        inputRangeOrTransformer,
-        outputRange,
-        options,
-        latest,
-        comb)
+        options
+    ) => comb.updateInner(
+        ...update(
+            input,
+            inputRangeOrTransformer,
+            outputRange,
+            options
+        )
+    )
     return comb;
 }
 //export { default as UseTransform } from './UseTransform.svelte';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

33668

increased by0.37%

Worsened metrics

Total package byte prevSize

1354269

decreased by-0.14%

Number of package files

218

decreased by-0.91%

No dependency changes