about summary refs log tree commit diff
path: root/src/lib/hooks/useMinimalShellTransform.ts
diff options
context:
space:
mode:
authorPaul Frazee <pfrazee@gmail.com>2024-11-23 16:20:24 -0800
committerGitHub <noreply@github.com>2024-11-23 16:20:24 -0800
commit32bf8122e8c8a0fbadd53b8a015cfbc9014519a2 (patch)
tree55bd24596e6fadadbf4326b26e3d14e418c5c7bb /src/lib/hooks/useMinimalShellTransform.ts
parent523d1f01a51c0e85e49916fb42b204f7004ffac1 (diff)
parentb4d07c4112b9a62b5380948051aa4a7fd391a2d4 (diff)
downloadvoidsky-32bf8122e8c8a0fbadd53b8a015cfbc9014519a2.tar.zst
Merge branch 'main' into main
Diffstat (limited to 'src/lib/hooks/useMinimalShellTransform.ts')
-rw-r--r--src/lib/hooks/useMinimalShellTransform.ts20
1 files changed, 11 insertions, 9 deletions
diff --git a/src/lib/hooks/useMinimalShellTransform.ts b/src/lib/hooks/useMinimalShellTransform.ts
index 678776755..6f16fa0f9 100644
--- a/src/lib/hooks/useMinimalShellTransform.ts
+++ b/src/lib/hooks/useMinimalShellTransform.ts
@@ -10,15 +10,16 @@ export function useMinimalShellHeaderTransform() {
   const {headerHeight} = useShellLayout()
 
   const headerTransform = useAnimatedStyle(() => {
+    const headerModeValue = headerMode.get()
     return {
-      pointerEvents: headerMode.value === 0 ? 'auto' : 'none',
-      opacity: Math.pow(1 - headerMode.value, 2),
+      pointerEvents: headerModeValue === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - headerModeValue, 2),
       transform: [
         {
           translateY: interpolate(
-            headerMode.value,
+            headerModeValue,
             [0, 1],
-            [0, -headerHeight.value],
+            [0, -headerHeight.get()],
           ),
         },
       ],
@@ -33,15 +34,16 @@ export function useMinimalShellFooterTransform() {
   const {footerHeight} = useShellLayout()
 
   const footerTransform = useAnimatedStyle(() => {
+    const footerModeValue = footerMode.get()
     return {
-      pointerEvents: footerMode.value === 0 ? 'auto' : 'none',
-      opacity: Math.pow(1 - footerMode.value, 2),
+      pointerEvents: footerModeValue === 0 ? 'auto' : 'none',
+      opacity: Math.pow(1 - footerModeValue, 2),
       transform: [
         {
           translateY: interpolate(
-            footerMode.value,
+            footerModeValue,
             [0, 1],
-            [0, footerHeight.value],
+            [0, footerHeight.get()],
           ),
         },
       ],
@@ -58,7 +60,7 @@ export function useMinimalShellFabTransform() {
     return {
       transform: [
         {
-          translateY: interpolate(footerMode.value, [0, 1], [-44, 0]),
+          translateY: interpolate(footerMode.get(), [0, 1], [-44, 0]),
         },
       ],
     }