From 88a2f05b267d6a71f368ee34d8e3a7581f05b59f Mon Sep 17 00:00:00 2001
From: jaydevelopsstuff <70743392+jaydevelopsstuff@users.noreply.github.com>
Date: Wed, 21 Aug 2024 10:38:39 -0700
Subject: [PATCH 1/3] Initial attempt at adding useScroll hook

---
 src/index.tsx     |  2 +-
 src/primitives.ts | 30 +++++++++++++++++++++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/src/index.tsx b/src/index.tsx
index 8485c64..4c3206a 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,4 +1,4 @@
 export * from "./types.js"
 export {Motion} from "./motion.jsx"
 export {Presence, PresenceContext} from "./presence.jsx"
-export {createMotion, motion} from "./primitives.js"
+export {createMotion, motion, useScroll} from "./primitives.js"
diff --git a/src/primitives.ts b/src/primitives.ts
index 84e7a33..225f5f1 100644
--- a/src/primitives.ts
+++ b/src/primitives.ts
@@ -1,8 +1,17 @@
-import {createMotionState, createStyles, MotionState, style} from "@motionone/dom"
+import {
+	AxisScrollInfo,
+	createMotionState,
+	createStyles,
+	MotionState,
+	style,
+	scroll,
+	ScrollOptions,
+} from "@motionone/dom"
 import {Accessor, createEffect, onCleanup, useContext} from "solid-js"
 
 import {PresenceContext, PresenceContextState} from "./presence.jsx"
 import {Options} from "./types.js"
+import {createStore, produce} from "solid-js/store"
 
 /** @internal */
 export function createAndBindMotionState(
@@ -65,6 +74,25 @@ export function createMotion(
 	return state
 }
 
+type MotionOneScrollContext = {
+	scrollX?: AxisScrollInfo
+	scrollY?: AxisScrollInfo
+}
+export function useScroll(options?: ScrollOptions): MotionOneScrollContext {
+	const [scrollStore, setScrollStore] = createStore<MotionOneScrollContext>()
+
+	scroll(({x, y}) => {
+		setScrollStore(
+			produce(scrollStore => {
+				scrollStore.scrollX = x
+				scrollStore.scrollY = y
+			}),
+		)
+	}, options)
+
+	return scrollStore
+}
+
 /**
  * motion is a Solid directive that makes binding to elements easier.
  *

From f725171bd030e069aeac8d563e3c4138a6db1b5a Mon Sep 17 00:00:00 2001
From: jaydevelopsstuff <70743392+jaydevelopsstuff@users.noreply.github.com>
Date: Thu, 22 Aug 2024 22:16:16 -0700
Subject: [PATCH 2/3] Working impl

---
 src/primitives.ts | 51 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/primitives.ts b/src/primitives.ts
index 225f5f1..ac74bf7 100644
--- a/src/primitives.ts
+++ b/src/primitives.ts
@@ -7,7 +7,7 @@ import {
 	scroll,
 	ScrollOptions,
 } from "@motionone/dom"
-import {Accessor, createEffect, onCleanup, useContext} from "solid-js"
+import {Accessor, batch, createEffect, createSignal, onCleanup, onMount, useContext} from "solid-js"
 
 import {PresenceContext, PresenceContextState} from "./presence.jsx"
 import {Options} from "./types.js"
@@ -74,23 +74,42 @@ export function createMotion(
 	return state
 }
 
-type MotionOneScrollContext = {
-	scrollX?: AxisScrollInfo
-	scrollY?: AxisScrollInfo
-}
-export function useScroll(options?: ScrollOptions): MotionOneScrollContext {
-	const [scrollStore, setScrollStore] = createStore<MotionOneScrollContext>()
+export function useScroll(options?: ScrollOptions): {
+	time: Accessor<number>
+	scrollX: AxisScrollInfo
+	scrollY: AxisScrollInfo
+} {
+	const [time, setTime] = createSignal(0)
+	const [scrollX, setScrollX] = createStore<AxisScrollInfo>({
+		current: 0,
+		offset: [],
+		progress: 0,
+		scrollLength: 0,
+		velocity: 0,
+		targetOffset: 0,
+		targetLength: 0,
+		containerLength: 0,
+	})
+	const [scrollY, setScrollY] = createStore<AxisScrollInfo>({
+		current: 0,
+		offset: [],
+		progress: 0,
+		scrollLength: 0,
+		velocity: 0,
+		targetOffset: 0,
+		targetLength: 0,
+		containerLength: 0,
+	})
 
-	scroll(({x, y}) => {
-		setScrollStore(
-			produce(scrollStore => {
-				scrollStore.scrollX = x
-				scrollStore.scrollY = y
-			}),
-		)
-	}, options)
+	onMount(() =>
+		scroll(({time, x, y}) => {
+			setTime(time)
+			setScrollX(x)
+			setScrollY(y)
+		}, options),
+	)
 
-	return scrollStore
+	return {time, scrollX, scrollY}
 }
 
 /**

From a52f45795d12912965eb460bc735cc343d80d819 Mon Sep 17 00:00:00 2001
From: J <70743392+jaydevelopsstuff@users.noreply.github.com>
Date: Fri, 6 Sep 2024 22:24:06 -0700
Subject: [PATCH 3/3] Add useScroll to README

---
 README.md | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/README.md b/README.md
index 2399ffc..9388855 100644
--- a/README.md
+++ b/README.md
@@ -163,3 +163,19 @@ function App() {
   </Show>
 </Presence>
 ```
+
+## Scroll-Linked Animations
+
+`useScroll` provides reactive values based on Motion One's original [`scroll`](https://motion.dev/docs/scroll) function.
+
+```ts
+import { useScroll } from "solid-motionone"
+
+// ...
+
+const { time, scrollX, scrollY } = useScroll()
+
+createEffect(() => console.log(scrollY.progress))
+```
+
+These values can be used in coordination with Motion animation properties to create scroll-linked/parallax animations.