diff --git a/src/components/scroll-fading-title/ScrollFadingTitle.tsx b/src/components/scroll-fading-title/ScrollFadingTitle.tsx
index e53e272..33ff417 100644
--- a/src/components/scroll-fading-title/ScrollFadingTitle.tsx
+++ b/src/components/scroll-fading-title/ScrollFadingTitle.tsx
@@ -1,3 +1,4 @@
+import { cn } from "@/lib/utils";
 import { ComponentProps, useEffect, useRef, useState } from "react";
 
 const easeFade = (x: number) => (
@@ -20,5 +21,5 @@ export const ScrollFadingTitle = (props: ComponentProps<"div">) => {
         return () => window.removeEventListener('scroll', handleScroll);
     }, [elementRef]);
 
-    return <div style={{opacity: 1}} ref={elementRef} {...props}/>
+    return <div style={{opacity: 1}} ref={elementRef} {...props} className={cn("will-change-auto", 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 3d02c0f..fbfc703 100644
--- a/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
+++ b/src/components/sidebar-trigger-adjustable/SidebarTriggerAdjustable.tsx
@@ -31,5 +31,5 @@ export const SidebarTriggerAdjustable = (props: ComponentProps<"div">) => {
         };
     }, [isMobile]);
 
-    return <div data-sidebar-trigger="true" {...props}></div>;
+    return <div data-sidebar-trigger="true" {...props} className={cn("will-change-auto", props.className)}></div>;
 }
\ No newline at end of file