feat(parallax): child horizontal prop defaults to parent's (#1458)

* fix(parallax): child horizontal default to parents * fix: remove translate rule of number layers * refactor: replace reassignment with new const Co-authored-by: Josh <[email protected]>
pmndrs · Apr 25, 2021 · 9568020 · 9568020
1 parent 0206409
commit 9568020
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/demo/src/sandboxes/parallax/src/styles.module.css b/demo/src/sandboxes/parallax/src/styles.module.css
@@ -20,7 +20,6 @@
 .number span {
   display: inline-block;
   position: relative;
-  transform: translate3d(-35%, 0, 0);
 }
 
 .slopeBegin {

diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx
@@ -24,6 +24,7 @@ export interface IParallaxLayer {
 
 export interface IParallax {
   config: ConfigProp
+  horizontal: boolean
   busy: boolean
   space: number
   offset: number
@@ -101,8 +102,12 @@ export const ParallaxLayer = React.memo(
         }
       })
 
+      // Layer's horizontal defaults to parent's horizontal if not set.
+      const scrollHorizontal =
+        horizontal === undefined ? parent.horizontal : horizontal
+
       const translate3d = ctrl.springs.translate.to(
-        horizontal
+        scrollHorizontal
           ? x => `translate3d(${x}px,0,0)`
           : y => `translate3d(0,${y}px,0)`
       )
@@ -115,8 +120,8 @@ export const ParallaxLayer = React.memo(
             backgroundSize: 'auto',
             backgroundRepeat: 'no-repeat',
             willChange: 'transform',
-            [horizontal ? 'height' : 'width']: '100%',
-            [horizontal ? 'width' : 'height']: ctrl.springs.space,
+            [scrollHorizontal ? 'height' : 'width']: '100%',
+            [scrollHorizontal ? 'width' : 'height']: ctrl.springs.space,
             WebkitTransform: translate3d,
             msTransform: translate3d,
             transform: translate3d,
@@ -155,6 +160,7 @@ export const Parallax = React.memo(
     const state: IParallax = useMemoOne(
       () => ({
         config,
+        horizontal,
         busy: false,
         space: 0,
         current: 0,