Adding useViewportScroll

dev/examples/viewport-scroll.tsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { motion, useViewportScroll, useTransform } from "@framer"
+
+const Item = motion.div({
+    default: {
+        width: 100,
+        height: 100,
+        marginBottom: 100,
+    },
+})
+
+const ItemColor = ({ i, scrollY }) => {
+    const base = -500 + i * 200
+
+    const backgroundColor = useTransform(
+        scrollY,
+        [base, base + 100, base + 200, base + 300],
+        ["rgba(255, 255, 255, 0.2)", "rgba(255, 255, 255, 1)", "rgba(255, 255, 255, 1)", "rgba(255, 0, 0, 0.2)"]
+    )
+
+    return <Item motionValues={{ backgroundColor }} />
+}
+
+export const App = () => {
+    const viewportScroll = useViewportScroll()
+
+    return (
+        <div>
+            {Array.from(new Array(100), (x, i) => (
+                <ItemColor scrollY={viewportScroll.y} i={i} key={i} />
+            ))}
+        </div>
+    )
+}

package.json

@@ -54,7 +54,7 @@
         "webpack-dev-server": "^3.1.10"
     },
     "dependencies": {
-        "@popmotion/popcorn": "^0.2.0",
+        "@popmotion/popcorn": "^0.3.0",
         "hey-listen": "^1.0.5",
         "popmotion": "8.5.3",
         "style-value-types": "^3.0.7",

src/hooks/use-transform.ts

@@ -46,8 +46,6 @@ import { interpolate } from "@popmotion/popcorn"
  * };
  * ```
  *
- *
- *
  * @param {MotionValue} value - The `MotionValue` to transform
  * @param {number[]} from - A linear numerical sequence.
  * @param {string[] | number[]} to - A series of numbers, colors or
@@ -58,9 +56,9 @@ export const useTransform = (value: MotionValue, from: number[], to: string[] |
     return useMemo(
         () => {
             if (transformedValue.current) transformedValue.current.destroy()
-            transformedValue.current = value.addChild({
-                transformer: interpolate(from, to),
-            })
+
+            const transformer = interpolate(from, to)
+            transformedValue.current = value.addChild({ transformer })
             return transformedValue.current
         },
         [value, ...from, ...to]

src/hooks/use-viewport-scroll.ts

@@ -0,0 +1,25 @@
+import { useMotionValue } from "../motion-value/use-motion-value"
+import { useEvent } from "../events/use-event"
+
+/**
+ * `useViewportScroll` provides `MotionValue`s that update when the viewport scrolls.
+ *
+ * This makes it possible to transform viewport scroll into other values.
+ *
+ * For instance, highlighting different table of contents items to correspond with page scroll.
+ */
+const useViewportScroll = () => {
+    const x = useMotionValue(0)
+    const y = useMotionValue(0)
+
+    const onScroll = () => {
+        x.set(window.pageXOffset)
+        y.set(window.pageYOffset)
+    }
+
+    useEvent("scroll", window, onScroll, { passive: true })
+
+    return { x, y }
+}
+
+export { useViewportScroll }

src/index.ts

@@ -1,9 +1,10 @@
 import { motion } from "./motion"
-import { useMotionValue } from "./hooks/use-motion-value"
+import { useMotionValue } from "./motion-value/use-motion-value"
 import { useTransform } from "./hooks/use-transform"
 import { usePose } from "./hooks/use-pose"
+import { useViewportScroll } from "./hooks/use-viewport-scroll"
 
-export { motion, useMotionValue, useTransform, usePose }
+export { motion, useMotionValue, useTransform, usePose, useViewportScroll }
 
 export { useMouseEvents, useTouchEvents, usePointerEvents } from "./events"
 export { usePanGesture } from "./gestures"

src/hooks/use-motion-value.ts → src/motion-value/use-motion-value.ts

@@ -1,5 +1,5 @@
 import { useMemo } from "react"
-import { motionValue } from "../motion-value"
+import { motionValue } from "."
 
 /**
  * For advanced use-cases, you can assume external control of the motion values used by `motion` components.

src/motion/__tests__/component.test.tsx

@@ -1,7 +1,7 @@
 import { fireEvent, render } from "react-testing-library"
 import { motion } from "../"
 import * as React from "react"
-import { useMotionValue } from "../../hooks/use-motion-value"
+import { useMotionValue } from "../../motion-value/use-motion-value"
 import { useTransform } from "../../hooks/use-transform"
 import { usePose } from "../../hooks/use-pose"
 import styled from "styled-components"

yarn.lock

@@ -79,6 +79,16 @@
     hey-listen "^1.0.5"
     style-value-types "^3.0.7"
 
+"@popmotion/popcorn@^0.3.0":
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.3.0.tgz#d75da7a0def2a949016d1cd3794f36514d69019f"
+  integrity sha512-iTPnu07k8mGBuJEt9NhAJ132sd0dNG9/AwqzJeKHjZA9aqtxnP9X0AFbklJrGc18HdPtdzwvGufpcJerSMGdvQ==
+  dependencies:
+    "@popmotion/easing" "^1.0.1"
+    framesync "^4.0.1"
+    hey-listen "^1.0.5"
+    style-value-types "^3.0.7"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"