diff --git a/src/components/scroll-fading-title/ScrollFadingTitle.tsx b/src/components/scroll-fading-title/ScrollFadingTitle.tsx
index 0690c9a..8f5af25 100644
--- a/src/components/scroll-fading-title/ScrollFadingTitle.tsx
+++ b/src/components/scroll-fading-title/ScrollFadingTitle.tsx
@@ -18,10 +18,10 @@ export const ScrollFadingTitle = (props: ComponentProps<"div">) => {
         };
 
         handleScroll();
-        window.addEventListener('scroll', handleScroll);
+        window.addEventListener('scroll', handleScroll, {passive: true});
 
         return () => window.removeEventListener('scroll', handleScroll);
     }, [elementRef]);
 
-    return <div style={{opacity: 1}} ref={elementRef} {...props} className={cn("will-change-auto", props.className)}/>
+    return <div style={{opacity: 1}} ref={elementRef} {...props} className={props.className}/>
 };
\ No newline at end of file
diff --git a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
index 3df3eec..1c53662 100644
--- a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
+++ b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
@@ -1,12 +1,21 @@
 "use client";
 import { useIsMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
+import { sign } from "crypto";
 import { ComponentProps, useEffect, useState } from "react";
 
 const easeSlide = (x: number) => (
     1 - Math.pow(1 - x, 3)
 );
 
+const lerp = (a: number, b: number, t: number) => (
+    a * t + b * (1 - t)
+);
+const cssLerp = (a: string, b: string, t: string) => (
+    `${a} * ${t} + ${b} * (1 - ${t})`
+);
+
+
 export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
     const isMobile = useIsMobile();
 
@@ -22,10 +31,12 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
             const slideAmount = easeSlide(
                 Math.max(0, Math.min(1, window.scrollY / (window.innerHeight / 20)))
             );
-            triggerDiv.style.marginLeft = `calc(var(--spacing) *  ${12 * slideAmount})`;
+            triggerDiv.style.transform = `translateX(calc(var(--spacing) * ${12 * slideAmount}))`;
             triggerDiv.style.paddingTop = `calc(var(--spacing) * ${(isMobile ? 1 : 3) * slideAmount})`;
+            triggerDiv.style.width = `calc(100% - var(--spacing) * ${lerp(0, 12, 1 - slideAmount)})`;
         };
 
+        handleScroll();
         window.addEventListener('scroll', handleScroll, {passive: true});
 
         return () => {
@@ -33,5 +44,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
         };
     }, [isMobile]);
 
-    return <div data-sidebar-trigger="true" {...props} className={cn("will-change-auto", props.className)}></div>;
+    return <div data-sidebar-trigger="true" {...props} className={props.className}></div>;
 }
\ No newline at end of file