diff --git a/.changeset/sixty-trees-press.md b/.changeset/sixty-trees-press.md
new file mode 100644
index 00000000..de86819f
--- /dev/null
+++ b/.changeset/sixty-trees-press.md
@@ -0,0 +1,5 @@
+---
+"@codedazur/react-parallax": patch
+---
+
+The cover scale now takes the factor into account.
diff --git a/packages/react-parallax/hooks/useParallax.tsx b/packages/react-parallax/hooks/useParallax.tsx
index 998c60eb..41d53b3b 100644
--- a/packages/react-parallax/hooks/useParallax.tsx
+++ b/packages/react-parallax/hooks/useParallax.tsx
@@ -1,4 +1,4 @@
-import { Direction, Vector2 } from "@codedazur/essentials";
+import { Direction, Vector2, lerp } from "@codedazur/essentials";
import {
MaybeRef,
ScrollState,
@@ -44,6 +44,14 @@ type ParallaxFactor = PrimitiveParallaxFactor | ParallaxFactorFunction;
* });
*
* return
+ *
+ * @todo If you use this hook with `cover: true`, it causes a repaint on every
+ * scroll event. We should check if there is a more efficient way to calculate
+ * the offset. I suspect it should be possible to use the transform origin in
+ * such a way that that it doesn't need to change on scroll at all. I believe
+ * it might be something close to this, though I think the `factor` should be a
+ * factor as well somehow:
+ * - `50% ${elementHeight * (elementHeight / windowHeight) * index}px`
*/
export function useParallax({
scrollRef,
@@ -56,6 +64,7 @@ export function useParallax({
const windowSize = useRef(Vector2.zero);
const elementSize = useRef(Vector2.zero);
+ // const origin = useRef(Origin.center);
const translation = useRef(Vector2.zero);
const scale = useRef(1);
@@ -79,6 +88,21 @@ export function useParallax({
translation.current = translation.current.add(offset);
}, [factor]);
+ // const setOrigin = useCallback(() => {
+ // if (!ref.current || !cover) {
+ // return;
+ // }
+
+ // console.log(ref.current.parentElement);
+
+ // const offset = getOffset(ref.current.parentElement!);
+
+ // origin.current = new Vector2(
+ // windowSize.current.x / 2 - offset.x,
+ // windowSize.current.y / 2 - offset.y,
+ // );
+ // }, [ref, translation, windowSize, elementSize, factor, cover]);
+
const setTranslation = useCallback(() => {
translation.current = translate(position.current, factor);
@@ -92,11 +116,15 @@ export function useParallax({
return;
}
- scale.current = Math.max(
- windowSize.current.x / elementSize.current.x,
- windowSize.current.y / elementSize.current.y,
+ scale.current = lerp(
+ Math.max(
+ windowSize.current.x / elementSize.current.x,
+ windowSize.current.y / elementSize.current.y,
+ ),
+ 1,
+ typeof factor === "number" ? factor : (factor as Vector2).magnitude,
);
- }, [cover]);
+ }, [cover, factor]);
const applyTransform = useCallback(() => {
const target = resolveMaybeRef(ref);
@@ -106,6 +134,11 @@ export function useParallax({
}
window.requestAnimationFrame(() => {
+ // target.style.transformOrigin = [
+ // `${origin.current.x * 100}%`,
+ // `${origin.current.y * 100}%`,
+ // ].join(" ");
+
target.style.transform = [
`translate3d(${[
`${translation.current.x}px`,
@@ -118,6 +151,7 @@ export function useParallax({
}, []);
const updateTransform = useCallback(() => {
+ // setOrigin();
setTranslation();
setScale();