diff --git a/build/js/ControlSidebar.js b/build/js/ControlSidebar.js
index 9efa7353e..47f3d2648 100644
--- a/build/js/ControlSidebar.js
+++ b/build/js/ControlSidebar.js
@@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
 const EVENT_EXPANDED = `expanded${EVENT_KEY}`
 
 const SELECTOR_CONTROL_SIDEBAR = '.control-sidebar'
@@ -45,7 +46,8 @@ const Default = {
   controlsidebarSlide: true,
   scrollbarTheme: 'os-theme-light',
   scrollbarAutoHide: 'l',
-  target: SELECTOR_CONTROL_SIDEBAR
+  target: SELECTOR_CONTROL_SIDEBAR,
+  animationSpeed: 300
 }
 
 /**
@@ -79,6 +81,10 @@ class ControlSidebar {
     }
 
     $(this._element).trigger($.Event(EVENT_COLLAPSED))
+
+    setTimeout(() => {
+      $(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
+    }, this._config.animationSpeed)
   }
 
   show() {
diff --git a/build/js/PushMenu.js b/build/js/PushMenu.js
index 04497d542..e4382bd2f 100644
--- a/build/js/PushMenu.js
+++ b/build/js/PushMenu.js
@@ -18,6 +18,7 @@ const EVENT_KEY = `.${DATA_KEY}`
 const JQUERY_NO_CONFLICT = $.fn[NAME]
 
 const EVENT_COLLAPSED = `collapsed${EVENT_KEY}`
+const EVENT_COLLAPSED_DONE = `collapsed-done${EVENT_KEY}`
 const EVENT_SHOWN = `shown${EVENT_KEY}`
 
 const SELECTOR_TOGGLE_BUTTON = '[data-widget="pushmenu"]'
@@ -33,7 +34,8 @@ const CLASS_NAME_CLOSED = 'sidebar-closed'
 const Default = {
   autoCollapseSize: 992,
   enableRemember: false,
-  noTransitionAfterReload: true
+  noTransitionAfterReload: true,
+  animationSpeed: 300
 }
 
 /**
@@ -88,6 +90,10 @@ class PushMenu {
     }
 
     $(this._element).trigger($.Event(EVENT_COLLAPSED))
+
+    setTimeout(() => {
+      $(this._element).trigger($.Event(EVENT_COLLAPSED_DONE))
+    }, this._options.animationSpeed)
   }
 
   toggle() {
diff --git a/docs/javascript/control-sidebar.md b/docs/javascript/control-sidebar.md
index da54809a0..722957eb6 100644
--- a/docs/javascript/control-sidebar.md
+++ b/docs/javascript/control-sidebar.md
@@ -42,6 +42,7 @@ $("#my-toggle-button").ControlSidebar('toggle');
 |scrollbarTheme | Boolean | `os-theme-light` | Scrollbar Theme used while SideBar Fixed
 |scrollbarAutoHide | Boolean | `l` | Scrollbar auto-hide trigger
 |target | String | `.control-sidebar` | Target control-sidebar to handle multiple control-sidebars.
+|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
 {: .table .table-bordered .bg-light}
 
 > ##### Tip!
@@ -59,6 +60,7 @@ $("#my-toggle-button").ControlSidebar('toggle');
 |-|-
 |expanded.lte.controlsidebar | Triggered after a control sidebar expands.
 |collapsed.lte.controlsidebar | Triggered after a control sidebar collapses.
+|collapsed-done.lte.controlsidebar | Triggered after a control sidebar is fully collapsed.
 {: .table .table-bordered .bg-light}
 
 Example: `$('#toggle-button').on('expanded.lte.controlsidebar', handleExpandedEvent)`
diff --git a/docs/javascript/push-menu.md b/docs/javascript/push-menu.md
index 1b0c4fa10..7e5423dfd 100644
--- a/docs/javascript/push-menu.md
+++ b/docs/javascript/push-menu.md
@@ -30,6 +30,7 @@ $('.sidebar-toggle-btn').PushMenu(options)
 |autoCollapseSize | Boolean/Number | FALSE | Screen width in pixels to trigger auto collapse sidebar
 |enableRemember | Boolean | FALSE | Remember sidebar state and set after page refresh.
 |noTransitionAfterReload | Boolean | TRUE | Hold Transition after page refresh.
+|animationSpeed | Boolean | `300` | Set the animation/transition speed equals to the scss transition speed.
 {: .table .table-bordered .bg-light}
 
 > ##### Tip!
@@ -47,6 +48,7 @@ $('.sidebar-toggle-btn').PushMenu(options)
 | Event Type | Description
 |-|-
 |collapsed.lte.pushmenu | Fired when the sidebar collapsed.
+|collapsed-data.lte.pushmenu | Fired when the sidebar is fully collapsed.
 |shown.lte.pushmenu | Fired when the sidebar shown.
 {: .table .table-bordered .bg-light}