diff --git a/packages/_vue3-migration-test/CHANGELOG.md b/packages/_vue3-migration-test/CHANGELOG.md
index 29d03b8836..ff6d30864e 100644
--- a/packages/_vue3-migration-test/CHANGELOG.md
+++ b/packages/_vue3-migration-test/CHANGELOG.md
@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.0-alpha.8](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.7...vue3-migration-test@1.0.0-alpha.8) (2024-05-13)
+
+
+### Features
+
+* replace `AnimationsMixin` with `useCollapseAnimation` composable (#1468) ([e3ee9d9](https://github.com/empathyco/x/commit/e3ee9d94f9acc4abdcd1c591a754c86d9a6abbb7))
+
+
+
+## [1.0.0-alpha.7](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.6...vue3-migration-test@1.0.0-alpha.7) (2024-05-09)
+
+
+### Features
+
+* Replace FacetsMixin by useFacets composable (#1462) ([bb7e0ce](https://github.com/empathyco/x/commit/bb7e0cede8653d82e436db696e80c1bdbcb9cc41))
+
+
+
 ## [1.0.0-alpha.6](https://github.com/empathyco/x/compare/vue3-migration-test@1.0.0-alpha.5...vue3-migration-test@1.0.0-alpha.6) (2024-05-09)
 
 
diff --git a/packages/_vue3-migration-test/package.json b/packages/_vue3-migration-test/package.json
index d38873328e..d2de40858b 100644
--- a/packages/_vue3-migration-test/package.json
+++ b/packages/_vue3-migration-test/package.json
@@ -1,7 +1,7 @@
 {
   "name": "vue3-migration-test",
   "private": "true",
-  "version": "1.0.0-alpha.6",
+  "version": "1.0.0-alpha.8",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",
diff --git a/packages/_vue3-migration-test/src/components/animations/index.ts b/packages/_vue3-migration-test/src/components/animations/index.ts
index aed10b5c92..4d2c00cf2b 100644
--- a/packages/_vue3-migration-test/src/components/animations/index.ts
+++ b/packages/_vue3-migration-test/src/components/animations/index.ts
@@ -1,2 +1,5 @@
 export { default as TestAnimateWidth } from './test-animate-width.vue';
+export { default as TestCollapseHeight } from './test-collapse-height.vue';
+export { default as TestCollapseWidth } from './test-collapse-width.vue';
+export { default as TestCrossFade } from './test-cross-fade.vue';
 export { default as TestFade } from './test-fade.vue';
diff --git a/packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue b/packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue
new file mode 100644
index 0000000000..42436f70d4
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-collapse-height.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="open = !open">Toggle</button>
+    <CollapseHeight>
+      <p v-if="open">CollapseHeight</p>
+    </CollapseHeight>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import CollapseHeight from '../../../../x-components/src/components/animations/collapse-height.vue';
+
+  const open = ref(true);
+</script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue b/packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue
new file mode 100644
index 0000000000..9b174e3fe6
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-collapse-width.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="open = !open">Toggle</button>
+    <CollapseWidth>
+      <p v-if="open">CollapseWidth</p>
+    </CollapseWidth>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import CollapseWidth from '../../../../x-components/src/components/animations/collapse-width.vue';
+
+  const open = ref(true);
+</script>
diff --git a/packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue b/packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue
new file mode 100644
index 0000000000..2b53a59cd7
--- /dev/null
+++ b/packages/_vue3-migration-test/src/components/animations/test-cross-fade.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <button @click="open = !open">Toggle</button>
+    <CrossFade>
+      <p v-if="open">CrossFade</p>
+    </CrossFade>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import CrossFade from '../../../../x-components/src/components/animations/cross-fade.vue';
+
+  const open = ref(true);
+</script>
diff --git a/packages/_vue3-migration-test/src/router.ts b/packages/_vue3-migration-test/src/router.ts
index d5c5f178f9..9d21e02df0 100644
--- a/packages/_vue3-migration-test/src/router.ts
+++ b/packages/_vue3-migration-test/src/router.ts
@@ -5,6 +5,9 @@ import {
   TestBaseColumnPickerList,
   TestBaseDropdown,
   TestBaseEventButton,
+  TestCollapseHeight,
+  TestCollapseWidth,
+  TestCrossFade,
   TestElementsList,
   TestFacets,
   TestFade,
@@ -21,6 +24,21 @@ const routes = [
     name: 'AnimateWidth',
     component: TestAnimateWidth
   },
+  {
+    path: '/collapse-height',
+    name: 'CollapseHeight',
+    component: TestCollapseHeight
+  },
+  {
+    path: '/collapse-width',
+    name: 'CollapseWidth',
+    component: TestCollapseWidth
+  },
+  {
+    path: '/cross-fade',
+    name: 'CrossFade',
+    component: TestCrossFade
+  },
   {
     path: '/fade',
     name: 'Fade',
diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md
index 2b39a86ca5..9a4aa9dc9a 100644
--- a/packages/x-components/CHANGELOG.md
+++ b/packages/x-components/CHANGELOG.md
@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.0.0-alpha.11](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.10...@empathyco/x-components@5.0.0-alpha.11) (2024-05-13)
+
+
+### Features
+
+* replace `AnimationsMixin` with `useCollapseAnimation` composable (#1468) ([e3ee9d9](https://github.com/empathyco/x/commit/e3ee9d94f9acc4abdcd1c591a754c86d9a6abbb7))
+
+
+
+## [5.0.0-alpha.10](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.9...@empathyco/x-components@5.0.0-alpha.10) (2024-05-09)
+
+
+### Features
+
+* Replace FacetsMixin by useFacets composable (#1462) ([bb7e0ce](https://github.com/empathyco/x/commit/bb7e0cede8653d82e436db696e80c1bdbcb9cc41))
+
+
+
 ## [5.0.0-alpha.9](https://github.com/empathyco/x/compare/@empathyco/x-components@5.0.0-alpha.8...@empathyco/x-components@5.0.0-alpha.9) (2024-05-09)
 
 
diff --git a/packages/x-components/package.json b/packages/x-components/package.json
index 775ede3acf..7f1c4683d9 100644
--- a/packages/x-components/package.json
+++ b/packages/x-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@empathyco/x-components",
-  "version": "5.0.0-alpha.9",
+  "version": "5.0.0-alpha.11",
   "description": "Empathy X Components",
   "author": "Empathy Systems Corporation S.L.",
   "license": "Apache-2.0",
diff --git a/packages/x-components/src/components/animations/animations.mixin.ts b/packages/x-components/src/components/animations/animations.mixin.ts
deleted file mode 100644
index 0fac76726d..0000000000
--- a/packages/x-components/src/components/animations/animations.mixin.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import Vue, { ComponentOptions } from 'vue';
-
-/**
- * Type options for the property that will be animated.
- */
-type AnimatedProperty = 'height' | 'width';
-
-/**
- * Adds parametrized methods to a component to allow the collapsing of the provided property.
- *
- * @param property - The property that will be animated.
- * @returns Mixin for the module.
- * @public
- */
-export function createCollapseAnimationMixin(property: AnimatedProperty): ComponentOptions<Vue> {
-  const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';
-
-  return {
-    methods: {
-      /**
-       * Changes the element's animated property from 0 to the element's content size.
-       *
-       * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be
-       * needed until rendering the content. This behaviour collides with this animation method.
-       * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value
-       * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to
-       * default value, force a layer repaint and then, evaluate the `scrollProperty` value which
-       * now has value. Then we restore the `content-visibility` value to its previous state.
-       *
-       * @param element - The DOM element that is going to be animated.
-       * @internal
-       */
-      expand(element: HTMLElement): void {
-        element.style[property] = '0';
-        const originalValue = (element.style as any)['content-visibility'];
-        (element.style as any)['content-visibility'] = 'visible';
-        element.getBoundingClientRect();
-        element.style[property] = `${element[scrollProperty]}px`;
-        (element.style as any)['content-visibility'] = originalValue;
-      },
-      /**
-       * Removes the animated property from the element.
-       *
-       * @param element - The DOM element that is going to be animated.
-       * @internal
-       */
-      cleanUpAnimationStyles(element: HTMLElement): void {
-        element.style.removeProperty(property);
-      },
-      /**
-       * Changes the element's animated property from the element's content size to 0.
-       *
-       * @param element - The DOM element that is going to be animated.
-       * @internal
-       */
-      collapse(element: HTMLElement): void {
-        element.style[property] = `${element[scrollProperty]}px`;
-        // This is intended. We want to provoke a layer repaint to apply this style.
-        element.getBoundingClientRect();
-        element.style[property] = '0';
-      }
-    }
-  };
-}
diff --git a/packages/x-components/src/components/animations/collapse-height.vue b/packages/x-components/src/components/animations/collapse-height.vue
index 922349f2f3..9ded2cfd63 100644
--- a/packages/x-components/src/components/animations/collapse-height.vue
+++ b/packages/x-components/src/components/animations/collapse-height.vue
@@ -14,9 +14,8 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { createCollapseAnimationMixin } from './animations.mixin';
+  import { defineComponent } from 'vue';
+  import { useCollapseAnimation } from './use-collapse-animation';
 
   /**
    * Renders a transition wrapping the element passed in the default slot and animating
@@ -24,21 +23,23 @@
    *
    * @public
    */
-  @Component({
-    mixins: [createCollapseAnimationMixin('height')],
-    inheritAttrs: false
-  })
-  export default class CollapseHeight extends Vue {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
+  export default defineComponent({
+    name: 'CollapseHeight',
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      return useCollapseAnimation('height');
+    }
     // TODO Add support for extending enter, after-enter and leave transitions
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/animations/collapse-width.vue b/packages/x-components/src/components/animations/collapse-width.vue
index 323d079390..0d9a408d26 100644
--- a/packages/x-components/src/components/animations/collapse-width.vue
+++ b/packages/x-components/src/components/animations/collapse-width.vue
@@ -14,9 +14,8 @@
 </template>
 
 <script lang="ts">
-  import Vue from 'vue';
-  import { Component, Prop } from 'vue-property-decorator';
-  import { createCollapseAnimationMixin } from './animations.mixin';
+  import { defineComponent } from 'vue';
+  import { useCollapseAnimation } from './use-collapse-animation';
 
   /**
    * Renders a transition wrapping the element passed in the default slot and animating
@@ -24,21 +23,23 @@
    *
    * @public
    */
-  @Component({
-    mixins: [createCollapseAnimationMixin('width')],
-    inheritAttrs: false
-  })
-  export default class CollapseWidth extends Vue {
-    /**
-     * Indicates if the transition must be applied on the initial render of the node.
-     */
-    @Prop({
-      type: Boolean,
-      default: true
-    })
-    public appear!: boolean;
+  export default defineComponent({
+    name: 'CollapseWidth',
+    inheritAttrs: false,
+    props: {
+      /**
+       * Indicates if the transition must be applied on the initial render of the node.
+       */
+      appear: {
+        type: Boolean,
+        default: true
+      }
+    },
+    setup: function () {
+      return useCollapseAnimation('width');
+    }
     // TODO Add support for extending enter, after-enter and leave transitions
-  }
+  });
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/x-components/src/components/animations/index.ts b/packages/x-components/src/components/animations/index.ts
index 9b4545fe3a..7f6d8c69d6 100644
--- a/packages/x-components/src/components/animations/index.ts
+++ b/packages/x-components/src/components/animations/index.ts
@@ -6,9 +6,9 @@ export { default as Fade } from './fade.vue';
 export { default as FadeAndSlide } from './fade-and-slide.vue';
 export { default as StaggeredFadeAndSlide } from './staggered-fade-and-slide.vue';
 export { default as StaggeringTransitionGroup } from './staggering-transition-group.vue';
-export { createCollapseAnimationMixin } from './animations.mixin';
 export { default as DisableAnimationMixin } from './disable-animation.mixin';
 export { createDirectionalAnimationFactory } from './create-directional-animation-factory';
 export { animateClipPath } from './animate-clip-path/animate-clip-path.factory';
 export { animateScale } from './animate-scale/animate-scale.factory';
 export { animateTranslate } from './animate-translate/animate-translate.factory';
+export * from './use-collapse-animation';
diff --git a/packages/x-components/src/components/animations/use-collapse-animation.ts b/packages/x-components/src/components/animations/use-collapse-animation.ts
new file mode 100644
index 0000000000..6412cc3eda
--- /dev/null
+++ b/packages/x-components/src/components/animations/use-collapse-animation.ts
@@ -0,0 +1,64 @@
+/**
+ * Type options for the property that will be animated.
+ */
+type AnimatedProperty = 'height' | 'width';
+
+/**
+ * Returns parametrized methods to use in a component to allow the collapsing of the provided
+ * property.
+ *
+ * @param property - The property that will be animated.
+ * @returns Composable for the module.
+ * @public
+ */
+export function useCollapseAnimation(property: AnimatedProperty) {
+  const scrollProperty = property === 'width' ? 'scrollWidth' : 'scrollHeight';
+
+  /**
+   * Changes the element's animated property from 0 to the element's content size.
+   *
+   * @remarks `content-visibility` CSS property boosts the rendering performance waiting to be
+   * needed until rendering the content. This behaviour collides with this animation method.
+   * When the `scrollProperty` is evaluated, the content has not been rendered yet and the value
+   * is 0 so nothing is animated. To avoid this behaviour, we change the `content-visibility` to
+   * default value, force a layer repaint and then, evaluate the `scrollProperty` value which
+   * now has value. Then we restore the `content-visibility` value to its previous state.
+   *
+   * @param element - The DOM element that is going to be animated.
+   */
+  function expand(element: HTMLElement): void {
+    element.style[property] = '0';
+    const originalValue = (element.style as any)['content-visibility'];
+    (element.style as any)['content-visibility'] = 'visible';
+    element.getBoundingClientRect();
+    element.style[property] = `${element[scrollProperty]}px`;
+    (element.style as any)['content-visibility'] = originalValue;
+  }
+
+  /**
+   * Removes the animated property from the element.
+   *
+   * @param element - The DOM element that is going to be animated.
+   */
+  function cleanUpAnimationStyles(element: HTMLElement): void {
+    element.style.removeProperty(property);
+  }
+
+  /**
+   * Changes the element's animated property from the element's content size to 0.
+   *
+   * @param element - The DOM element that is going to be animated.
+   */
+  function collapse(element: HTMLElement): void {
+    element.style[property] = `${element[scrollProperty]}px`;
+    // This is intended. We want to provoke a layer repaint to apply this style.
+    element.getBoundingClientRect();
+    element.style[property] = '0';
+  }
+
+  return {
+    expand,
+    cleanUpAnimationStyles,
+    collapse
+  };
+}