Move from translate to translate3d (for better performance)

react-just-parallax/declarations.d.ts

@@ -0,0 +1,4 @@
+declare module "prefix" {
+  export default function prefix(action: string): string;
+  export default function prefix(action: "transform"): "transform";
+}

react-just-parallax/package.json

@@ -35,23 +35,24 @@
     "react": ">=16.8 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^22.0.1",
-    "@rollup/plugin-node-resolve": "^13.3.0",
-    "@rollup/plugin-typescript": "^8.3.3",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/react": "^18.0.15",
-    "postcss": "^8.4.14",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.76.0",
-    "rollup-plugin-dts": "^4.2.2",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "tslib": "^2.4.0",
-    "typescript": "^4.7.4"
+    "@rollup/plugin-commonjs": "22.0.1",
+    "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-typescript": "8.3.3",
+    "@types/lodash.debounce": "4.0.7",
+    "@types/react": "18.0.15",
+    "postcss": "8.4.14",
+    "rimraf": "3.0.2",
+    "rollup": "2.76.0",
+    "rollup-plugin-dts": "4.2.2",
+    "rollup-plugin-peer-deps-external": "2.2.4",
+    "rollup-plugin-postcss": "4.0.2",
+    "rollup-plugin-terser": "7.0.2",
+    "tslib": "2.4.0",
+    "typescript": "4.7.4"
   },
   "dependencies": {
     "framesync": "6.1.0",
-    "lodash.debounce": "4.0.8"
+    "lodash.debounce": "4.0.8",
+    "prefix": "1.0.0"
   }
 }

react-just-parallax/src/components/MouseParallax/MouseParallax.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useRef } from "react";
 import sync, { cancelSync, FrameData, Process } from "framesync";
 import debounce from "lodash.debounce";
+import Prefix from "prefix";
 
 import { useWindowSize } from "../../hooks/useWindowSize";
 import { lerp } from "../../utils/lerp";
@@ -64,6 +65,7 @@ export const MouseParallax = (props: MouseParallaxProps) => {
   const parallaxContainerRefRect = useRef<Rect>(defaultRect);
   const mouseMove = useRef(new MouseMove());
   const observer = useRef<null | IntersectionObserver>(null);
+  const transformPrefix = useRef(Prefix("transform"));
 
   const resumeAppFrame = () => {
     if (!shouldUpdate.current) return;
@@ -100,9 +102,9 @@ export const MouseParallax = (props: MouseParallaxProps) => {
     xMultiplier *= strength;
     yMultiplier *= strength;
 
-    parallaxSpanRef.current.style.transform = `translate(${
+    parallaxSpanRef.current.style[transformPrefix.current] = `translate3d(${
       currentX.current * xMultiplier
-    }px, ${currentY.current * yMultiplier}px)`;
+    }px, ${currentY.current * yMultiplier}px, 0px)`;
   };
   const syncOnUpdate = ({ delta }: FrameData) => {
     const diffX = Math.abs(targetX.current - currentX.current);

react-just-parallax/src/components/ScrollParallax/ScrollParallax.tsx

@@ -6,6 +6,7 @@ import React, {
 } from "react";
 import sync, { cancelSync, FrameData, Process } from "framesync";
 import debounce from "lodash.debounce";
+import Prefix from "prefix";
 
 import { lerp } from "../../utils/lerp";
 import { isTouchDevice } from "../../utils/isTouchDevice";
@@ -68,6 +69,7 @@ export const ScrollParallax = forwardRef<
   const parentOffsetX = useRef(1);
   const parentOffsetY = useRef(1);
   const { windowSizeRef } = useWindowSize();
+  const transformPrefix = useRef(Prefix("transform"));
 
   const resumeAppFrame = () => {
     if (!parallaxSpanRef.current) return;
@@ -92,9 +94,9 @@ export const ScrollParallax = forwardRef<
 
     let isHorizontalValue = isHorizontal ? 1 : 0;
 
-    parallaxSpanRef.current.style.transform = `translate(${
+    parallaxSpanRef.current.style[transformPrefix.current] = `translate3d(${
       currentX.current * strength * isHorizontalValue
-    }px, ${currentY.current * strength * (1 - isHorizontalValue)}px)`;
+    }px, ${currentY.current * strength * (1 - isHorizontalValue)}px, 0px)`;
   };
   const syncOnUpdate = ({ delta }: FrameData) => {
     if (!shouldUpdate.current) return;

react-just-parallax/yarn.lock

@@ -478,7 +478,7 @@ eventemitter3@^4.0.4:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
-framesync@^6.1.0:
+[email protected]:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.1.0.tgz#b22cf9afba52a9a895668b09e033b6a61e901c41"
   integrity sha512-aBX+hdWAvwiJYeQlFLY2533VxeL6OEu71CAgV4GGKksrj6+dE6i7K86WSSiRBEARCoJn5bFqffhg4l07eA27tg==
@@ -628,7 +628,7 @@ lodash.camelcase@^4.3.0:
   resolved "https://registry.yarnpkg.com/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz#b28aa6288a2b9fc651035c7711f65ab6190331a6"
   integrity sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==
 
-lodash.debounce@^4.0.8:
+[email protected]:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -1017,6 +1017,11 @@ postcss@^8.4.14:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+prefix@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/prefix/-/prefix-1.0.0.tgz#f12bcaea03e580be7929fb365c301184558a0356"
+  integrity sha512-KtGt8TV4nQkYgO6wJ5phkBGAECZW5cs5vQhqnz1LlxGGd8y4LwpW3Bq5pofULjdiMXACDCxisDUhwtFXb7vHfQ==
+
 promise.series@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/promise.series/-/promise.series-0.2.0.tgz#2cc7ebe959fc3a6619c04ab4dbdc9e452d864bbd"