diff --git a/animate.js b/animate.js
deleted file mode 100644
index d00d25c..0000000
--- a/animate.js
+++ /dev/null
@@ -1,32 +0,0 @@
-function fadeIn(id, duration) {
-	id.animate([ { opacity: 0 }, { opacity: 1 } ], {
-		duration: duration,
-		easing: 'linear'
-	});
-}
-
-function fadeOut(id, duration) {
-	id.animate([ { opacity: 1 }, { opacity: 0 } ], {
-		duration: duration,
-		easing: 'linear'
-	});
-}
-
-function zoomIn(id) {
-	id.animate(
-		[
-			{
-				opacity: 0,
-				transform: 'translateY(20%) scale(.8)'
-			},
-			{
-				opacity: 1,
-				transform: 'translateY(0) scale(1)'
-			}
-		],
-		{
-			duration: 300,
-			easing: 'linear'
-		}
-	);
-}
\ No newline at end of file
diff --git a/dist/alert.js b/dist/alert.js
index 27ab694..19c8de4 100644
--- a/dist/alert.js
+++ b/dist/alert.js
@@ -1,20 +1,19 @@
-function closeAlert(event){
-  let alert = event.currentTarget.getAttribute("data-target");
-  if(alert){
-    alert = document.querySelectorAll(alert);
-    for (var index = 0; index < alert.length; index++) {
-      alert[index].parentNode.removeChild(alert[index]);
-    }
-  }
-}
-
-function initAlert(){
-  let dataClose = document.querySelectorAll("[data-close='alert']");
-  for (var index = 0; index < dataClose.length; index++) {
-    dataClose[index].addEventListener("click",closeAlert);
-  }
-}
-
-(function () {
-  initAlert();
-}());
+const closeAlert = e => {
+  let alert = e.currentTarget.getAttribute("data-target");
+
+  if (alert) {
+    alert = document.querySelectorAll(alert);
+
+    for (let i of alert) {
+      fadeOut(i);
+      
+      setTimeout(() => i.remove(), 450);
+    }
+  }
+}
+
+const initAlert = () => {
+  const dataClose = document.querySelectorAll("[data-close='alert'");
+
+  for (let i of dataClose) i.addEventListener("click", closeAlert);
+}
\ No newline at end of file
diff --git a/dist/animations.js b/dist/animations.js
new file mode 100644
index 0000000..1e83ecb
--- /dev/null
+++ b/dist/animations.js
@@ -0,0 +1,89 @@
+const fadeIn = (id, duration) => {
+    id.animate([{ opacity: 0 }, { opacity: 1 }], {
+        duration: duration ? duration : 500,
+        easing: "linear"
+    })
+}
+
+const fadeOut = (id, duration) => {
+    id.animate([{ opacity: 1 }, { opacity: 0 }], {
+        duration: duration ? duration : 500,
+        easing: "linear"
+    })
+}
+
+const slideInBottom = id => {
+    id.animate([
+        {
+            opacity: 0,
+            transform: "translateY(25%)"
+        },
+        
+        {
+            opacity: 1,
+            transform: "translateY(0)"
+        }
+    ], 
+    
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
+
+const slideOutBottom = id => {
+    id.animate([
+        {
+            opacity: 1,
+            transform: "translateY(0)"
+        },
+        
+        {
+            opacity: 0,
+            transform: "translateY(25%)"
+        }
+    ], 
+    
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
+
+const dropdownIn = id => {
+    id.animate([
+        {
+            opacity: 0,
+            transform: "translate(0, 50px)"
+        },
+        
+        {
+            opacity: 1,
+            transform: "translate(0, 38px)"
+        }
+    ], 
+    
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
+
+const dropdownOut = id => {
+    id.animate([
+        {
+            opacity: 1,
+            transform: "translate(0, 38px)"
+        },
+        
+        {
+            opacity: 0,
+            transform: "translate(0, 50px)"
+        }
+    ], 
+    
+    {
+        duration: 300,
+        easing: "ease-out"
+    })
+}
\ No newline at end of file
diff --git a/dist/collapse.js b/dist/collapse.js
index 145bf81..1908a56 100644
--- a/dist/collapse.js
+++ b/dist/collapse.js
@@ -1,15 +1,11 @@
-function toggleCollapse(event){
-  let collapseID = event.currentTarget.getAttribute("data-target")
-  document.querySelector(collapseID).classList.toggle("hidden");
-}
-
-function initCollapse(){
-  let dataCollapse = document.querySelectorAll("[data-toggle='collapse']");
-  for (var index = 0; index < dataCollapse.length; index++) {
-    dataCollapse[index].addEventListener("click",toggleCollapse);
-  }
-}
-
-(function () {
-  initCollapse();
-}());
+const toggleCollapse = e => {
+  const collapseID  = e.currentTarget.getAttribute("data-target");
+
+  document.querySelector(collapseID).classList.toggle("hidden");
+}
+
+const initCollapse = () => {
+  const dataCollapse = document.querySelectorAll("[data-toggle='collapse']");
+  
+  for (let i of dataCollapse) i.addEventListener("click",toggleCollapse);
+}
\ No newline at end of file
diff --git a/dist/dropdown.js b/dist/dropdown.js
index 6ea103e..a29f9fa 100644
--- a/dist/dropdown.js
+++ b/dist/dropdown.js
@@ -1,41 +1,48 @@
-function togglePopper(event){
-  let element = event.currentTarget;
-  let popperID = element.getAttribute("data-target");
-  let placement = element.getAttribute("data-placement");
-  let popperElement = document.querySelector(popperID);
-  let popperInnerElement = popperElement.querySelector("div");
-  let popper = Popper.createPopper(element, popperElement, {
-    placement: (placement ? placement : 'bottom')
-  });
-  popperElement.classList.toggle("hidden");
-  placement = popper.state.placement
-  let marginClass;
-  switch (placement) {
-    case "bottom":
-      marginClass = "mt-3"
-      break;
-    case "top":
-      marginClass = "mb-3"
-      break;
-    case "left":
-      marginClass = "mr-3"
-      break;
-    case "right":
-      marginClass = "ml-3"
-      break;
-    default:
-      break;
-  }
-  popperInnerElement.classList.toggle(marginClass);
-}
-
-function initDropdowns(){
-  let dropdownData = document.querySelectorAll("[data-toggle='dropdown']");
-  for (var index = 0; index < dropdownData.length; index++) {
-    dropdownData[index].addEventListener("click",togglePopper);
-  }
-}
-
-(function () {
-  initDropdowns();
-}());
+const toggleDropdown = e => {
+  let marginClass;
+
+  const element             = e.currentTarget;
+  const popperID            = element.getAttribute("data-target");
+  const placement           = element.getAttribute("data-placement");
+  const popperElement       = document.querySelector(popperID);
+  const popperInnerElement  = popperElement.querySelector("div");
+
+  Popper.createPopper(element, popperElement, {
+    placement: (placement ? placement : 'bottom')
+  });
+
+  switch (placement) {
+    case "bottom":
+      marginClass = "mt-3"
+      break;
+    case "top":
+      marginClass = "mb-3"
+      break;
+    case "left":
+      marginClass = "mr-3"
+      break;
+    case "right":
+      marginClass = "ml-3"
+      break;
+  }
+
+  if (popperElement.classList.contains("hidden")) {
+    dropdownIn(popperElement);
+
+    popperElement.classList.remove("hidden");
+    popperInnerElement.classList.add(marginClass);
+  } else {
+    dropdownOut(popperElement);
+    
+    setTimeout(() => {
+      popperElement.classList.add("hidden");
+      popperInnerElement.classList.remove(marginClass);
+    }, 300);
+  }
+}
+
+const initDropdown = () => {
+  const dropdownData = document.querySelectorAll("[data-toggle='dropdown']");
+  
+  for (let i of dropdownData) i.addEventListener("click",toggleDropdown);
+}
\ No newline at end of file
diff --git a/dist/modal.js b/dist/modal.js
index 2611148..58a59ec 100644
--- a/dist/modal.js
+++ b/dist/modal.js
@@ -1,38 +1,41 @@
-function toggleModal(event){
-  let modalID = event.currentTarget.getAttribute("data-target");
-  let modal = document.querySelector(modalID);
-  let modalDialog = document.querySelector(modalID+"-dialog");
-  let modalBackdrop = document.querySelector(modalID+"-backdrop");
-  modalBackdrop.classList.toggle("hidden");
-  modalBackdrop.classList.toggle("flex");
-  if (modal.classList.contains("hidden")) {
-    modal.style.display = "block";
-    setTimeout(()=>{
-      modal.classList.remove("hidden");
-      modal.classList.add("flex");
-      modal.classList.remove("opacity-0");
-      modalDialog.classList.remove("-translate-y-1");
-      modalDialog.classList.add("translate-y-1");
-    },30);
-  } else {
-    modalDialog.classList.remove("translate-y-1");
-    modalDialog.classList.add("-translate-y-1");
-    setTimeout(()=>{
-      modal.style.display = "none";
-      modal.classList.add("hidden");
-      modal.classList.remove("flex");
-      modal.classList.add("opacity-0");
-    },30)
-  }
-}
-
-function initModal(){
-  let dataModal = document.querySelectorAll("[data-toggle='modal']");
-  for (var index = 0; index < dataModal.length; index++) {
-    dataModal[index].addEventListener("click",toggleModal);
-  }
-}
-
-(function () {
-  initModal();
-}());
+const toggleModal = e => {
+  const modalID       = e.currentTarget.getAttribute("data-target");
+  const modal         = document.querySelector(modalID);
+  const modalDialog   = document.querySelector(`${modalID}-dialog`);
+  const modalBackdrop = document.querySelector(`${modalID}-backdrop`);
+
+  modalBackdrop.classList.toggle("hidden");
+  modalBackdrop.classList.toggle("flex");
+
+  if (modal.classList.contains("hidden")) {
+    modal.style.display = "block";
+
+    slideInBottom(modalDialog);
+
+    setTimeout(() => {
+      modal.classList.remove("hidden");
+      modal.classList.add("flex");
+      modal.classList.remove("opacity-0");
+      modalDialog.classList.remove("-translate-y-1");
+      modalDialog.classList.add("translate-y-1");
+    }, 30);
+  } else {
+    modalDialog.classList.remove("translate-y-1");
+    modalDialog.classList.add("-translate-y-1");
+    
+    slideOutBottom(modalDialog);
+
+    setTimeout(() => {
+      modal.style.display = "none";
+      modal.classList.add("hidden");
+      modal.classList.remove("flex");
+      modal.classList.add("opacity-0");
+    }, 300);
+  }
+}
+
+const initModal = () => {
+  const dataModal = document.querySelectorAll("[data-toggle='modal'");
+
+  for (let i of dataModal) i.addEventListener("click", toggleModal);
+}
\ No newline at end of file
diff --git a/dist/popover.js b/dist/popover.js
index b570f08..9205b8e 100644
--- a/dist/popover.js
+++ b/dist/popover.js
@@ -1,41 +1,47 @@
-function togglePopper(event){
-  let element = event.currentTarget;
-  let popperID = element.getAttribute("data-target");
-  let placement = element.getAttribute("data-placement");
-  let popperElement = document.querySelector(popperID);
-  let popperInnerElement = popperElement.querySelector("div");
-  let popper = Popper.createPopper(element, popperElement, {
-    placement: (placement ? placement : 'bottom')
-  });
-  popperElement.classList.toggle("hidden");
-  placement = popper.state.placement
-  let marginClass;
-  switch (placement) {
-    case "bottom":
-      marginClass = "mt-3"
-      break;
-    case "top":
-      marginClass = "mb-3"
-      break;
-    case "left":
-      marginClass = "mr-3"
-      break;
-    case "right":
-      marginClass = "ml-3"
-      break;
-    default:
-      break;
-  }
-  popperInnerElement.classList.toggle(marginClass);
-}
-
-function initPopovers(){
-  let popoverData = document.querySelectorAll("[data-toggle='popover']");
-  for (var index = 0; index < popoverData.length; index++) {
-    popoverData[index].addEventListener("click",togglePopper);
-  }
-}
-
-(function () {
-  initPopovers();
-}());
+const togglePopper = e => {
+  let marginClass;
+
+  const element             = e.currentTarget;
+  const popperID            = element.getAttribute("data-target");
+  let placement             = element.getAttribute("data-placement");
+  const popperElement       = document.querySelector(popperID);
+  const popperInnerElement  = popperElement.querySelector("div");
+
+  Popper.createPopper(element, popperElement, {
+    placement: (placement ? placement : "right")
+  });
+
+  switch (placement) {
+    case "bottom":
+      marginClass = "mt-3";
+      break;
+    case "top":
+      marginClass = "mb-3";
+      break;
+    case "left":
+      marginClass = "mr-3";
+      break;
+    case "right":
+      marginClass = "ml-3";
+      break;
+  }
+
+  if (popperElement.classList.contains("hidden")) {
+    fadeIn(popperElement, 200);
+    popperElement.classList.remove("hidden");
+    popperInnerElement.classList.add(marginClass);
+  } else {
+    fadeOut(popperElement, 200);
+    
+    setTimeout(() => {
+      popperElement.classList.add("hidden");
+      popperInnerElement.classList.remove(marginClass);
+    }, 180);
+  }
+}
+
+const initPopovers = () => {
+  const popoverData = document.querySelectorAll("[data-toggle='popover']");
+
+  for (let i of popoverData) i.addEventListener("click", togglePopper);
+}
\ No newline at end of file
diff --git a/dist/tabs.js b/dist/tabs.js
index b2ee91b..6236a2e 100644
--- a/dist/tabs.js
+++ b/dist/tabs.js
@@ -1,55 +1,52 @@
-function changeAtiveTab(event,activeClasses,normalClasses){
-  event.preventDefault();
-  // prepare classes for querySelectorAll and classList.remove/add
-  normalClasses = normalClasses.split(" ").filter(item => item !== " " && item !== "");
-  activeClasses = activeClasses.split(" ").filter(item => item !== " " && item !== "");
-  let queryActiveClasses = activeClasses.map(item => "." + item);
-  // get the anchor element with the data-toggle="tab" that has been clicked
-  let element = event.currentTarget;
-  let elementID = event.currentTarget.getAttribute("href");
-  // get it's counterpart tab element
-  let tabElement = document.querySelector(elementID);
-  // get the unordered list parent (grand-parent actualy)
-  let ulElement = element.parentNode.parentNode;
-  // get the current active element
-  let activeElement = ulElement.querySelector("li > a" + queryActiveClasses);
-  let activeElementID = activeElement.getAttribute("href");
-  // get the current active tab element
-  let activeTabElement = document.querySelector(activeElementID);
-
-  normalClasses.forEach((item) => {
-    activeElement.classList.add(item);
-    element.classList.remove(item);
-  });
-  activeClasses.forEach((item) => {
-    activeElement.classList.remove(item);
-    element.classList.add(item);
-  });
-
-  activeTabElement.classList.add("hidden");
-  activeTabElement.classList.remove("block");
-  tabElement.classList.remove("hidden");
-  tabElement.classList.add("block");
-}
-
-//  - activeClasses is for setting the classes for the active tab (anchor element)
-//  - normalClasses is for setting the classes for all the tabs (anchor elements) expect the
-// one that is currently active, if they are unset, then the default ones will be choosen
-// activeClasses = "bg-blue-600 text-white"
-// normalClasses = "text-blue-600 bg-transparent"
-function initTabs(activeClasses,normalClasses){
-  let dataTabs = document.querySelectorAll("[data-toggle='tab']");
-  const toggleFunction = (event) => {
-    event.preventDefault();
-    activeClasses = activeClasses ? activeClasses:"bg-blue-600 text-white";
-    normalClasses = normalClasses ? normalClasses:"text-blue-600 bg-white";
-    changeAtiveTab(event,activeClasses,normalClasses)
-  }
-  for (var index = 0; index < dataTabs.length; index++) {
-    dataTabs[index].addEventListener("click",toggleFunction);
-  }
-}
-
-(function () {
-  initTabs();
-}());
+const changeAtiveTab = (e, activeClasses, normalClasses) => {
+  e.preventDefault();
+
+  normalClasses = normalClasses.split(" ").filter(item => item !== " " && item !== "");
+  activeClasses = activeClasses.split(" ").filter(item => item !== " " && item !== "");
+
+  let queryActiveClasses  = activeClasses.map(item => "." + item);
+  let element             = e.currentTarget;
+  let elementID           = e.currentTarget.getAttribute("href");
+  let tabElement          = document.querySelector(elementID);
+  let ulElement           = element.parentNode.parentNode;
+  let activeElement       = ulElement.querySelector("li > a" + queryActiveClasses);
+  let activeElementID     = activeElement.getAttribute("href");
+  let activeTabElement    = document.querySelector(activeElementID);
+
+  normalClasses.forEach(item => {
+    activeElement.classList.add(item);
+    element.classList.remove(item);
+  });
+
+  activeClasses.forEach(item => {
+    activeElement.classList.remove(item);
+    element.classList.add(item);
+  });
+
+  activeTabElement.classList.add("hidden");
+  activeTabElement.classList.remove("block");
+  tabElement.classList.remove("hidden");
+  tabElement.classList.add("block");
+}
+
+const initTabs = (activeClasses, normalClasses) => {
+  const dataTabs = document.querySelectorAll("[data-toggle='tab']");
+
+  const toggleFunction = e => {
+    e.preventDefault();
+
+    activeClasses = activeClasses ? activeClasses:"bg-blue-600 text-white";
+    normalClasses = normalClasses ? normalClasses:"text-blue-600 bg-white";
+
+    changeAtiveTab(e, activeClasses, normalClasses);
+  }
+
+  const toggleAnimation = () => {
+    Array.from(dataTabs).forEach(el => fadeIn(document.querySelector(el.attributes.href.value), 300));
+  }
+
+  for (let i of dataTabs) {
+    i.addEventListener("click", toggleFunction);
+    i.addEventListener("click", toggleAnimation);
+  }
+}
\ No newline at end of file
diff --git a/dist/tooltip.js b/dist/tooltip.js
index e17b773..159595d 100644
--- a/dist/tooltip.js
+++ b/dist/tooltip.js
@@ -1,42 +1,50 @@
-function togglePopper(event){
-  let element = event.currentTarget;
-  let popperID = element.getAttribute("data-target");
-  let placement = element.getAttribute("data-placement");
-  let popperElement = document.querySelector(popperID);
-  let popperInnerElement = popperElement.querySelector("div");
-  let popper = Popper.createPopper(element, popperElement, {
-    placement: (placement ? placement : 'bottom')
-  });
-  popperElement.classList.toggle("hidden");
-  placement = popper.state.placement
-  let marginClass;
-  switch (placement) {
-    case "bottom":
-      marginClass = "mt-3"
-      break;
-    case "top":
-      marginClass = "mb-3"
-      break;
-    case "left":
-      marginClass = "mr-3"
-      break;
-    case "right":
-      marginClass = "ml-3"
-      break;
-    default:
-      break;
-  }
-  popperInnerElement.classList.toggle(marginClass);
-}
-
-function initTooltips(){
-  let tooltipData = document.querySelectorAll("[data-toggle='tooltip']");
-  for (var index = 0; index < tooltipData.length; index++) {
-    tooltipData[index].addEventListener("mouseenter",togglePopper);
-    tooltipData[index].addEventListener("mouseleave",togglePopper);
-  }
-}
-
-(function () {
-  initTooltips();
-}());
+const toggleTooltips = e => {
+  let marginClass;
+
+  const element             = e.currentTarget;
+  const popperID            = element.getAttribute("data-target");
+  const placement           = element.getAttribute("data-placement");
+  const popperElement       = document.querySelector(popperID);
+  const popperInnerElement  = popperElement.querySelector("div");
+
+  popper = Popper.createPopper(element, popperElement, {
+    placement: (placement ? placement : 'bottom')
+  });
+
+  switch (placement) {
+    case "bottom":
+      marginClass = "mt-3"
+      break;
+    case "top":
+      marginClass = "mb-3"
+      break;
+    case "left":
+      marginClass = "mr-3"
+      break;
+    case "right":
+      marginClass = "ml-3"
+      break;
+  }
+
+  if (popperElement.classList.contains("hidden")) {
+    fadeIn(popperElement, 200);
+    popperElement.classList.remove("hidden");
+    popperInnerElement.classList.add(marginClass);
+  } else {
+    fadeOut(popperElement, 200);
+    
+    setTimeout(() => {
+      popperElement.classList.add("hidden");
+      popperInnerElement.classList.remove(marginClass);
+    }, 180);
+  }
+}
+
+const initTooltips = () => {
+  const tooltipData = document.querySelectorAll("[data-toggle='tooltip'");
+
+  for (let i of tooltipData) {
+    i.addEventListener("mouseenter", toggleTooltips);
+    i.addEventListener("mouseleave", toggleTooltips);
+  }
+}
\ No newline at end of file