diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
index b14d930d65..d0d26c43e5 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
@@ -443,9 +443,11 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage>
           color: Theme.of(context).cardColor,
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(6)),
         ),
-        toolbarBuilder: (context, child, onDismiss) => DesktopFloatingToolbar(
+        toolbarBuilder: (context, child, onDismiss, isMetricsChanged) =>
+            DesktopFloatingToolbar(
           editorState: editorState,
           onDismiss: onDismiss,
+          enableAnimation: !isMetricsChanged,
           child: child,
         ),
         placeHolderBuilder: (_) => customPlaceholderItem,
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart
index 2cc9d700e2..076358034c 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart
+++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/desktop_toolbar/desktop_floating_toolbar.dart
@@ -2,6 +2,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
+import 'toolbar_animation.dart';
 import 'toolbar_cubit.dart';
 
 class DesktopFloatingToolbar extends StatefulWidget {
@@ -10,11 +11,13 @@ class DesktopFloatingToolbar extends StatefulWidget {
     required this.editorState,
     required this.child,
     required this.onDismiss,
+    this.enableAnimation = true,
   });
 
   final EditorState editorState;
   final Widget child;
   final VoidCallback onDismiss;
+  final bool enableAnimation;
 
   @override
   State<DesktopFloatingToolbar> createState() => _DesktopFloatingToolbarState();
@@ -46,7 +49,9 @@ class _DesktopFloatingToolbarState extends State<DesktopFloatingToolbar> {
         left: position!.left,
         top: position!.top,
         right: position!.right,
-        child: widget.child,
+        child: widget.enableAnimation
+            ? ToolbarAnimationWidget(child: widget.child)
+            : widget.child,
       ),
     );
   }
diff --git a/frontend/appflowy_flutter/pubspec.lock b/frontend/appflowy_flutter/pubspec.lock
index d61c5338f5..ea4cb90fe1 100644
--- a/frontend/appflowy_flutter/pubspec.lock
+++ b/frontend/appflowy_flutter/pubspec.lock
@@ -90,8 +90,8 @@ packages:
     dependency: "direct main"
     description:
       path: "."
-      ref: f46e991
-      resolved-ref: f46e991d0a9c5a95bd14be4cc96e68171c9ed9bc
+      ref: "8f314fd"
+      resolved-ref: "8f314fda5981e650a52ba522ba7915e13940d837"
       url: "https://github.com/AppFlowy-IO/appflowy-editor.git"
     source: git
     version: "5.1.0"
diff --git a/frontend/appflowy_flutter/pubspec.yaml b/frontend/appflowy_flutter/pubspec.yaml
index 4710d52b4d..77663760a2 100644
--- a/frontend/appflowy_flutter/pubspec.yaml
+++ b/frontend/appflowy_flutter/pubspec.yaml
@@ -180,7 +180,7 @@ dependency_overrides:
   appflowy_editor:
     git:
       url: https://github.com/AppFlowy-IO/appflowy-editor.git
-      ref: "f46e991"
+      ref: "8f314fd"
 
   appflowy_editor_plugins:
     git: