From 3ca9238e008923096e17c70e534a218e739faf25 Mon Sep 17 00:00:00 2001 From: Lewis Date: Sat, 24 Apr 2021 11:51:54 -0400 Subject: [PATCH 1/3] fix(parallax): child horizontal default to parents --- packages/parallax/src/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx index c3df4756f5..45259f475b 100644 --- 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 @@ -53,6 +54,9 @@ export const ParallaxLayer = React.memo( // Our parent controls our height and position. const parent = useContext(ParentContext) + // Layer's horizontal defaults to parent's horizontal if not set. + if (horizontal === undefined) horizontal = parent.horizontal + // This is how we animate. const ctrl = useMemoOne(() => { const targetScroll = Math.floor(offset) * parent.space @@ -155,6 +159,7 @@ export const Parallax = React.memo( const state: IParallax = useMemoOne( () => ({ config, + horizontal, busy: false, space: 0, current: 0, From fe8ded02710ecd2383cb994f917ec1cb721d8b53 Mon Sep 17 00:00:00 2001 From: Lewis Date: Sat, 24 Apr 2021 11:53:18 -0400 Subject: [PATCH 2/3] fix: remove translate rule of number layers --- demo/src/sandboxes/parallax/src/styles.module.css | 1 - 1 file changed, 1 deletion(-) diff --git a/demo/src/sandboxes/parallax/src/styles.module.css b/demo/src/sandboxes/parallax/src/styles.module.css index 726da2241c..a591b9b28e 100644 --- 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 { From 9f920a690d56d53501ca018fb98e77a9dec62c21 Mon Sep 17 00:00:00 2001 From: Lewis Date: Sat, 24 Apr 2021 16:02:15 -0400 Subject: [PATCH 3/3] refactor: replace reassignment with new const --- packages/parallax/src/index.tsx | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/parallax/src/index.tsx b/packages/parallax/src/index.tsx index 45259f475b..586a31d425 100644 --- a/packages/parallax/src/index.tsx +++ b/packages/parallax/src/index.tsx @@ -54,9 +54,6 @@ export const ParallaxLayer = React.memo( // Our parent controls our height and position. const parent = useContext(ParentContext) - // Layer's horizontal defaults to parent's horizontal if not set. - if (horizontal === undefined) horizontal = parent.horizontal - // This is how we animate. const ctrl = useMemoOne(() => { const targetScroll = Math.floor(offset) * parent.space @@ -105,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)` ) @@ -119,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,