diff --git a/src/js/worklets/header.js b/src/js/worklets/header.js
deleted file mode 100644
index 89102b911531..000000000000
--- a/src/js/worklets/header.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useDerivedValue, withTiming } from 'react-native-reanimated';
-
-export function headerContentOpacity(scrollY, threshold) {
-  return useDerivedValue(function () {
-    'worklet';
-    if (scrollY.value < threshold) {
-      return withTiming(0);
-    } else {
-      return withTiming(1);
-    }
-  });
-}
-
-export function headerContentPosition(scrollY, threshold, topBarHeight) {
-  return useDerivedValue(function () {
-    'worklet';
-    return scrollY.value < threshold ? withTiming(topBarHeight) : withTiming(0);
-  });
-}
diff --git a/src/js/worklets/profile_header.js b/src/js/worklets/profile_header.js
new file mode 100644
index 000000000000..c6c8980e0fc0
--- /dev/null
+++ b/src/js/worklets/profile_header.js
@@ -0,0 +1,13 @@
+import { useAnimatedStyle, withTiming } from 'react-native-reanimated';
+
+export function profileHeaderAnimation(scrollY, threshold, topBarHeight) {
+  return useAnimatedStyle(() => {
+    const opacity = scrollY.value < threshold ? withTiming(0) : withTiming(1);
+    const translateY = scrollY.value < threshold ? withTiming(topBarHeight) : withTiming(0);
+
+    return {
+      opacity: opacity,
+      transform: [{ translateY: translateY }],
+    };
+  });
+}
diff --git a/src/quo/components/navigation/page_nav/style.cljs b/src/quo/components/navigation/page_nav/style.cljs
index f2966c04ca0e..9be23ab02886 100644
--- a/src/quo/components/navigation/page_nav/style.cljs
+++ b/src/quo/components/navigation/page_nav/style.cljs
@@ -1,7 +1,6 @@
 (ns quo.components.navigation.page-nav.style
   (:require
-    [quo.foundations.colors :as colors]
-    [react-native.reanimated :as reanimated]))
+    [quo.foundations.colors :as colors]))
 
 (defn container
   [margin-top]
@@ -22,16 +21,6 @@
    :justify-content   (if centered? :center :flex-start)
    :opacity           center-opacity})
 
-(defn center-content-container-animation
-  [{:keys [centered? center-opacity has-animations? translate-animation opacity-animation]}]
-  (if has-animations?
-    (reanimated/apply-animations-to-style
-     {:transform [{:translate-y translate-animation}]
-      :opacity   opacity-animation}
-     (center-content-container centered? center-opacity))
-    (center-content-container centered? center-opacity)))
-
-
 (def right-actions-container
   {:flex-direction :row})
 
diff --git a/src/quo/components/navigation/page_nav/view.cljs b/src/quo/components/navigation/page_nav/view.cljs
index c07c9d7b18e9..a317a4ddeee8 100644
--- a/src/quo/components/navigation/page_nav/view.cljs
+++ b/src/quo/components/navigation/page_nav/view.cljs
@@ -13,7 +13,7 @@
     [quo.theme :as theme]
     [react-native.core :as rn]
     [react-native.reanimated :as reanimated]
-    [utils.worklets.header :as header-worklet]))
+    [utils.worklets.profile-header :as header-worklet]))
 
 (def ^:private button-type
   {:white       :grey
@@ -93,18 +93,13 @@
 
 (defn- title-center
   [{:keys [centered? title center-opacity scroll-y]}]
-  (let [translate-animation (when scroll-y
-                              (header-worklet/header-content-position scroll-y
-                                                                      threshold
-                                                                      page-nav-height))
-        opacity-animation   (when scroll-y
-                              (header-worklet/header-content-opacity scroll-y threshold))]
+  (let [animated-style (when scroll-y
+                         (header-worklet/profile-header-animation scroll-y
+                                                                  threshold
+                                                                  page-nav-height))]
     [reanimated/view
-     {:style (style/center-content-container-animation {:has-animations?     (some? scroll-y)
-                                                        :centered?           centered?
-                                                        :center-opacity      center-opacity
-                                                        :translate-animation translate-animation
-                                                        :opacity-animation   opacity-animation})}
+     {:style [(style/center-content-container centered? center-opacity)
+              animated-style]}
      [text/text
       {:weight          :medium
        :size            :paragraph-1
diff --git a/src/utils/worklets/header.cljs b/src/utils/worklets/header.cljs
deleted file mode 100644
index 7ae5d64a1b92..000000000000
--- a/src/utils/worklets/header.cljs
+++ /dev/null
@@ -1,16 +0,0 @@
-(ns utils.worklets.header)
-
-(def ^:private worklets (js/require "../src/js/worklets/header.js"))
-
-(defn header-content-opacity
-  [scroll-y threshold]
-  (.headerContentOpacity ^js worklets
-                         scroll-y
-                         threshold))
-
-(defn header-content-position
-  [scroll-y threshold top-bar-height]
-  (.headerContentPosition ^js worklets
-                          scroll-y
-                          threshold
-                          top-bar-height))
diff --git a/src/utils/worklets/profile_header.cljs b/src/utils/worklets/profile_header.cljs
new file mode 100644
index 000000000000..a5d1fc0a45b6
--- /dev/null
+++ b/src/utils/worklets/profile_header.cljs
@@ -0,0 +1,10 @@
+(ns utils.worklets.profile-header)
+
+(def ^:private worklets (js/require "../src/js/worklets/profile_header.js"))
+
+(defn profile-header-animation
+  [scroll-y threshold top-bar-height]
+  (.profileHeaderAnimation ^js worklets
+                           scroll-y
+                           threshold
+                           top-bar-height))