diff --git a/motion/_animation.scss b/motion/_animation.scss
index b4cf90529..08bc942ef 100644
--- a/motion/_animation.scss
+++ b/motion/_animation.scss
@@ -10,6 +10,7 @@
 
   100% {
     opacity: 1;
+    visibility: visible;
   }
 }
 
@@ -20,23 +21,12 @@
 
   100% {
     opacity: 0;
+    visibility: hidden;
   }
 }
 
 /* Scale */
 @keyframes tds-zoom-in {
-  0% {
-    opacity: 1;
-    transform: scale(0.9);
-  }
-
-  100% {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-
-@keyframes tds-zoom-in-hidden {
   0% {
     transform: scale(0.9);
   }
@@ -59,72 +49,60 @@
 /* Slide */
 @keyframes tds-slide-in-top {
   0% {
-    opacity: 1;
     transform: translateY(-100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes tds-slide-in-bottom {
   0% {
-    opacity: 1;
     transform: translateY(100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes tds-slide-in-left {
   0% {
-    opacity: 1;
     transform: translateX(-100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes tds-slide-in-right {
   0% {
-    opacity: 1;
     transform: translateX(100%);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
 @keyframes tds-slide-out-top {
   0% {
-    opacity: 1;
     transform: translateY(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(-100%);
   }
 }
 
 @keyframes tds-slide-out-bottom {
   0% {
-    opacity: 1;
     transform: translateY(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(100%);
   }
 }
@@ -141,24 +119,20 @@
 
 @keyframes tds-slide-out-left {
   0% {
-    opacity: 1;
     transform: translateX(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(-100%);
   }
 }
 
 @keyframes tds-slide-out-right {
   0% {
-    opacity: 1;
     transform: translateX(0);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(100%);
   }
 }
@@ -166,60 +140,82 @@
 /* Slide short */
 @keyframes tds-slide-top-short {
   0% {
-    opacity: 1;
     transform: translateY(-16px);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
 @keyframes tds-slide-bottom-short {
   0% {
-    opacity: 1;
     transform: translateY(16px);
   }
 
   100% {
-    opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes tds-slide-bottom-short-hidden {
+@keyframes tds-slide-left-short {
   0% {
-    transform: translateY(16px);
+    transform: translateX(-16px);
   }
 
   100% {
-    transform: translateY(0);
+    transform: translateX(0);
   }
 }
 
-@keyframes tds-slide-left-short {
+@keyframes tds-slide-right-short {
   0% {
-    opacity: 1;
-    transform: translateX(-16px);
+    transform: translateX(16px);
   }
 
   100% {
-    opacity: 1;
     transform: translateX(0);
   }
 }
 
-@keyframes tds-slide-right-short {
+@keyframes tds-slide-out-top-short {
   0% {
-    opacity: 1;
-    transform: translateX(16px);
+    transform: translateY(0);
   }
 
   100% {
-    opacity: 1;
+    transform: translateY(-16px);
+  }
+}
+
+@keyframes tds-slide-out-bottom-short {
+  0% {
+    transform: translateY(0);
+  }
+
+  100% {
+    transform: translateY(16px);
+  }
+}
+
+@keyframes tds-slide-out-left-short {
+  0% {
+    transform: translateX(0);
+  }
+
+  100% {
+    transform: translateX(-16px);
+  }
+}
+
+@keyframes tds-slide-out-right-short {
+  0% {
     transform: translateX(0);
   }
+
+  100% {
+    transform: translateX(16px);
+  }
 }
 
 /* Rotate */
@@ -346,74 +342,60 @@
 
 @keyframes tds-collapse-in {
   from {
-    opacity: 1;
-    height: 0%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(0);
   }
 
   to {
-    opacity: 1;
-    height: 100%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(1);
   }
 }
 
 @keyframes tds-collapse-in-hidden {
   from {
-    height: 0%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(0);
   }
 
   to {
-    height: 100%;
-
-    //overflow: hidden;
+    transform-origin: top;
+    transform: scaleY(1);
   }
 }
 
 @keyframes tds-collapse-out {
   0% {
-    height: 100%;
-
-    //overflow: hidden;
+    transform: scaleY(1);
+    transform-origin: top;
   }
 
   100% {
-    height: 0;
-
-    //overflow: hidden;
+    transform: scaleY(0);
+    transform-origin: top;
   }
 }
 
 @keyframes tds-collapse-width-in {
   0% {
-    width: 0;
-    overflow: hidden;
+    transform: scaleX(0);
   }
 
   to {
-    width: 100%;
-    overflow: hidden;
+    transform: scaleX(1);
   }
 }
 
 @keyframes tds-collapse-width-out {
   0% {
-    width: 100%;
-    overflow: hidden;
+    transform: scaleX(1);
   }
 
   to {
-    width: 0;
-    overflow: hidden;
+    transform: scaleX(0);
   }
 }
 
-///
-
 @supports not (
   ((height: 1lh) and (animation-timeline: none)) or ((height: 1lh) and (margin-trim: none))
 ) {
@@ -496,11 +478,3 @@
     stroke-dasharray: 2230px;
   }
 }
-
-.star1 {
-  animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
-  fill: #fff;
-  stroke: #000;
-  stroke-width: 20;
-  stroke-miterlimit: 10;
-}
diff --git a/motion/_motion.scss b/motion/_motion.scss
index 3b64485fc..b02c9935a 100644
--- a/motion/_motion.scss
+++ b/motion/_motion.scss
@@ -42,80 +42,110 @@ html {
   --tds-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
 
   /* ========================================================================
-      Motion Animations Variables
+      Motion Transition Variables
      ======================================================================= */
 
   /* ### Fade ### */
-  --fade-in-animation: tds-fade-in var(--tds-motion-duration-moderate-01)
-    var(--tds-motion-easing-linear) forwards;
-  --fade-out-animation: tds-fade-out var(--tds-motion-duration-moderate-01)
-    var(--tds-motion-easing-linear) forwards;
+  --tds-motion-fade-in: tds-fade-in var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-enter) forwards;
+  --tds-motion-fade-out: tds-fade-out var(--tds-motion-duration-moderate-01)
+    var(--tds-motion-easing-exit) forwards;
 
   /* ### Zoom ### */
-  --zoom-in-animation: tds-zoom-in var(--tds-motion-duration-fast-02) var(--tds-motion-easing-enter)
-    forwards;
-  --zoom-out-animation: tds-zoom-out var(--tds-motion-duration-fast-02)
+  --tds-motion-zoom-in: tds-zoom-in var(--tds-motion-duration-fast-02)
+    var(--tds-motion-easing-enter) forwards;
+  --tds-motion-zoom-out: tds-zoom-out var(--tds-motion-duration-fast-02)
     var(--tds-motion-easing-exit) forwards;
 
   /* ### Slide ### */
-  --slide-in-top-animation: tds-slide-in-top var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-top: tds-slide-in-top var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-in-bottom-animation: tds-slide-in-bottom var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-bottom: tds-slide-in-bottom var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-in-left-animation: tds-slide-in-left var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-left: tds-slide-in-left var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-in-right-animation: tds-slide-in-right var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-right: tds-slide-in-right var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-out-top-animation: tds-slide-out-top var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-out-top: tds-slide-out-top var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-exit) forwards;
-  --slide-out-bottom-animation: tds-slide-out-bottom var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-out-bottom: tds-slide-out-bottom var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-exit) forwards;
-  --slide-out-left-animation: tds-slide-out-left var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-out-left: tds-slide-out-left var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-exit) forwards;
-  --slide-out-right-animation: tds-slide-out-right var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-out-right: tds-slide-out-right var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-exit) forwards;
 
   /* ### Slide Short ### */
-  --slide-top-short-animation: tds-slide-top-short var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-short-top: tds-slide-top-short var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-bottom-short-animation: tds-slide-bottom-short var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-short-right: tds-slide-right-short var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-left-short-animation: tds-slide-left-short var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-short-bottom: tds-slide-bottom-short var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --slide-right-short-animation: tds-slide-right-short var(--tds-motion-duration-slow-02)
+  --tds-motion-slide-in-short-left: tds-slide-left-short var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
+  --tds-motion-slide-out-short-top: tds-slide-out-top-short var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-exit) forwards;
+  --tds-motion-slide-out-short-bottom: tds-slide-out-bottom-short var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-exit) forwards;
+  --tds-motion-slide-out-short-left: tds-slide-out-left-short var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-exit) forwards;
+  --tds-motion-slide-out-short-right: tds-slide-out-right-short var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-exit) forwards;
 
   /* ### Collapse ### */
-  --collapse-in-animation: tds-collapse-in var(--tds-motion-duration-slow-02)
+  --tds-motion-collapse-in: tds-collapse-in var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-enter) forwards;
-  --collapse-out-animation: tds-collapse-out var(--tds-motion-duration-slow-02)
+  --tds-motion-collapse-out: tds-collapse-out var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-exit) forwards;
 
   /* ### Rotate ### */
-  --rotate-animation: tds-rotate var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear)
+  --tds-motion-rotate: tds-rotate var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear)
     forwards;
 
   /* ### Shake ### */
-  --shake-animation: tds-shake var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear)
+  --tds-motion-shake: tds-shake var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear)
     forwards;
 
   /* ### Blink ### */
-  --blink-animation: tds-blink calc(var(--tds-motion-duration-slow-02) * 2)
+  --tds-motion-blink: tds-blink calc(var(--tds-motion-duration-slow-02) * 2)
     var(--tds-motion-easing-scania) infinite;
 
   /* ### Pulse ### */
-  --pulse-animation: tds-pulse calc(var(--tds-motion-duration-slow-02) * 2)
+  --tds-motion-pulse: tds-pulse calc(var(--tds-motion-duration-slow-02) * 2)
     var(--tds-motion-easing-scania) infinite;
 
-  /* ### Elevate ### */
-  --elevate-enter-animation: tds-fade-in var(--tds-motion-duration-slow-02)
+  /* ========================================================================
+        Motion Animation Variables
+       ======================================================================= */
+
+  --tds-motion-zoom-enter: tds-fade-in var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-enter) forwards,
+    tds-zoom-in var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania) forwards;
+  --tds-motion-zoom-exit: tds-fade-out var(--tds-motion-duration-fast-02)
+    var(--tds-motion-easing-exit) forwards,
+    tds-zoom-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) forwards;
+  --tds-motion-collapse-enter: tds-fade-in var(--tds-motion-duration-slow-02)
     var(--tds-motion-easing-linear) forwards,
+    tds-collapse-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania)
+    forwards;
+  --tds-motion-collapse-exit: tds-fade-out var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-exit) forwards,
+    tds-collapse-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards;
+  --tds-motion-slide-enter: tds-fade-in var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-enter) forwards,
+    tds-slide-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter)
+    forwards;
+  --tds-motion-slide-exit: tds-fade-out var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-exit) forwards,
+    tds-slide-out-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit)
+    forwards;
+  --tds-motion-elevate-enter: tds-fade-in var(--tds-motion-duration-slow-02)
+    var(--tds-motion-easing-enter) forwards,
     tds-slide-in-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania)
     forwards,
-    tds-zoom-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards;
-  --elevate-exit-animation: tds-fade-out var(--tds-motion-duration-slow-02)
+    tds-zoom-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards;
+  --tds-motion-elevate-exit: tds-fade-out var(--tds-motion-duration-moderate-01)
     var(--tds-motion-easing-exit) forwards,
-    tds-slide-out-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit)
-    forwards,
-    tds-zoom-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards;
+    tds-zoom-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards;
 }
diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js
index 53e01c7a0..0b16cb6fe 100644
--- a/packages/core/.storybook/preview.js
+++ b/packages/core/.storybook/preview.js
@@ -147,6 +147,7 @@ export const parameters = {
           'Announcements',
           ['Tegel', 'Prefix change'],
         ],
+        'Motions',
         'Foundations',
         'Utilities',
         'Patterns',
diff --git a/packages/core/src/stories/motions/animations/animations-classes.stories.ts b/packages/core/src/stories/motions/animations/animations-classes.stories.ts
new file mode 100644
index 000000000..6f598604e
--- /dev/null
+++ b/packages/core/src/stories/motions/animations/animations-classes.stories.ts
@@ -0,0 +1,221 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Animations/All',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+
+    <h2>Enter</h2>
+    <p>
+      Use these variables in the <code>animation</code> property of your elements to 
+      achieve smooth and uniform animation, as demonstrated below.
+    </p>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <!-- Zoom Animation Box -->
+        <div>
+          <div class="grey-box">
+            <div class="zoom-enter-box"></div>
+          </div>
+          <p>--tds-motion-zoom-enter</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="content">
+              <div class="collapse-enter-box"></div>
+            </div>
+            </div>
+          <p>--tds-motion-collapse-exit</p>
+        </div>
+
+        <div>
+          <div class="grey-box">
+            <div class="slide-enter"></div>
+          </div>
+          <p>--tds-motion-slide-enter</p>
+        </div>
+
+        <div>
+          <div class="grey-box">
+            <div class="elevate-enter-box"></div>
+          </div>
+          <p>--tds-motion-elevate-enter</p>
+        </div>
+
+      </div>
+
+      <h2>Exit</h2>
+      <!-- Collapse Animation Box -->
+      <div class="tds-u-flex-start tds-u-gap4">
+        <div>
+          <div class="grey-box">
+            <div class="zoom-exit-box"></div>
+          </div>
+          <p>--tds-motion-zoom-exit</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="content">
+              <div class="collapse-exit-box"></div>
+            </div>
+          </div>
+          <p>--tds-motion-collapse-exit</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-exit"></div>
+          </div>
+          <p>--tds-motion-slide-exit</p>
+        </div>
+        <div>
+        <div class="grey-box">
+          <div class="content">
+            <div class="elevate-exit-box"></div>
+          </div>
+        </div>
+          <p>--tds-motion-elevate-exit</p>
+        </div>
+      </div>
+    </main>
+
+
+    <style>
+      body, html {
+        margin: 0; /* Remove default margins */
+        padding: 0; /* Remove default padding */
+        height: 100%; /* Ensure body and html take full viewport height */
+        background-color: #121212; /* Set the dark background color */
+        color: #ffffff; /* Adjust text color for dark mode */
+      }
+
+      main {
+        padding: 20px;
+      }
+
+      p {
+        font-size: 12px;
+      }
+      .content {
+        width: 100px;
+        height: 100px;
+      }
+      .grey-box:hover {
+        cursor: pointer;
+      }
+      
+      .content{
+        width: 100px;
+        height: 100px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        border-radius: 5px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0; 
+        box-sizing: border-box;
+        overflow: hidden;
+      }
+
+      .zoom-enter-box,
+      .zoom-exit-box,
+      .collapse-enter-box,
+      .collapse-exit-box,
+      .slide-enter,
+      .elevate-enter-box,
+      .elevate-exit-box, 
+      .slide-exit {
+        width: 100px;
+        height: 100px;
+        background-color: #041E42;
+        border-radius: 5px;
+        position: relative;
+      }
+
+      .zoom-enter-box{
+        opacity: 0;
+      }
+
+      .grey-box:hover .zoom-enter-box {
+        animation: var(--tds-motion-zoom-enter);
+      }
+
+      .zoom-exit-box {
+        opacity: 1;
+      }
+      
+      .grey-box:hover .zoom-exit-box {
+        animation: var(--tds-motion-zoom-exit);
+      }
+
+      .collapse-enter-box {
+        transform: scale(0);
+      }
+      
+      .grey-box:hover .collapse-enter-box {
+        animation: var(--tds-motion-collapse-enter);
+      }
+      
+      .collapse-exit-box {
+        transform: scaleY(1);
+      }
+      
+      .grey-box:hover .collapse-exit-box {
+        animation: var(--tds-motion-collapse-exit);
+      }
+
+      .slide-enter {
+        opacity: 0;
+      }
+
+      .grey-box:hover .slide-enter {
+        animation: var(--tds-motion-slide-enter);
+      }
+
+      .elevate-enter-box {
+        opacity: 0;
+      }
+      
+      .grey-box:hover .elevate-enter-box {
+        animation: var(--tds-motion-elevate-enter);
+      }
+
+      .slide-exit {
+        opacity: 1;
+      }
+      
+      .grey-box:hover .slide-exit {
+        animation: var(--tds-motion-slide-exit);
+      }
+
+      .elevate-exit-box {
+        transform: translateY(0);
+        opacity: 1;
+      }
+
+      .grey-box:hover .elevate-exit-box {
+        animation: var(--tds-motion-elevate-exit);
+      }
+
+      </style>
+  `,
+  );
+
+export const All = Template.bind({});
diff --git a/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx
new file mode 100644
index 000000000..a70349b8b
--- /dev/null
+++ b/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx
@@ -0,0 +1,97 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Transitions/Collapse',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+      <h2>Collapse</h2>
+      
+      <p>
+        Use these variables in the <code>animation</code> property of your elements to 
+        achieve smooth and uniform transitions, as demonstrated below.
+      </p>
+
+      <div class="tds-u-flex-start tds-u-gap4">
+        <div>
+          <div class="grey-box" style="height: 200px;">
+            <div class="content">
+              <div class="collapse-in-box"></div>
+            </div>
+          </div>
+          <p>--tds-motion-collapse-in</p>
+        </div>
+
+        <div>
+          <div class="grey-box" style="height: 200px;">
+            <div class="content">
+              <div class="collapse-out-box"></div>
+            </div>
+          </div>
+          <p>--tds-motion-collapse-out</p>
+        </div>
+      </div>
+    </main>
+
+    <style>
+      main {
+        padding: 20px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .content {
+        width: 100px;
+        height: 100px;
+      }
+
+      .collapse-in-box,
+      .collapse-out-box {
+        border-radius: 4px;
+        width: 100px;
+        height: 100px;
+        background-color: #041E42;
+      }
+
+      .collapse-in-box {
+        transform: scaleY(0);
+      }
+
+      .collapse-out-box {
+        transform: scaleY(0);
+      }
+
+      .grey-box:hover .collapse-in-box {
+        animation: var(--tds-motion-collapse-in);
+      }
+
+      .grey-box:hover .collapse-out-box {
+        animation: var(--tds-motion-collapse-out);
+      }
+    </style>
+    `,
+  );
+
+export const Collapse = Template.bind({});
diff --git a/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx
new file mode 100644
index 000000000..99c67b5c4
--- /dev/null
+++ b/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx
@@ -0,0 +1,86 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Transitions/Fade',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+    <h2>Fade</h2>
+    <p>
+      Use these variables in the <code>animation</code> property of your elements to 
+      achieve smooth and uniform transitions, as demonstrated below.
+    </p>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <div>
+          <div class="grey-box">
+            <div class="fade-in-box"></div>
+          </div>
+          <p>--tds-motion-fade-in</p>
+        </div>
+
+        <div>
+          <div class="grey-box">
+            <div class="fade-out-box"></div>
+          </div>
+          <p>--tds-motion-fade-out</p>
+        </div>
+      </div>
+    </main>
+
+    <style>
+
+      main {
+        padding: 20px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+      }
+
+      .fade-in-box,
+      .fade-out-box {
+        border-radius: 4px;
+        width: 80px;
+        height: 80px;
+        background-color: #041E42;
+      }
+
+      .fade-in-box {
+        opacity: 0;
+      }
+
+      .fade-out-box {
+        opacity: 1;
+      }
+
+      .grey-box:hover .fade-in-box {
+        animation: var(--tds-motion-fade-in);
+      }
+
+      .grey-box:hover .fade-out-box {
+        animation: var(--tds-motion-fade-out);
+      }
+    </style>
+    `,
+  );
+
+export const Fade = Template.bind({});
diff --git a/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx
new file mode 100644
index 000000000..e7332a055
--- /dev/null
+++ b/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx
@@ -0,0 +1,147 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Transitions/Other',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+    <h2>Other</h2>
+    <p>
+      Use these variables in the <code>animation</code> property of your elements to 
+      achieve smooth and uniform transitions, as demonstrated below.
+    </p>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <!-- Rotate -->
+        <div>
+          <div class="grey-box">
+            <div class="rotate-in-box"></div>
+          </div>
+          <p>--tds-motion-rotate</p>
+        </div>
+
+        <!-- Shake -->
+        <div>
+          <div class="grey-box">
+            <div class="shake-box"></div>
+          </div>
+          <p>--tds-motion-shake</p>
+        </div>
+
+        <!-- Pulse -->
+        <div>
+          <div class="grey-box">
+            <div class="pulse-box"></div>
+          </div>
+          <p>--tds-motion-pulse</p>
+        </div>
+
+        <!-- Blink -->
+        <div>
+          <div class="grey-box">
+            <div class="blink-box"></div>
+          </div>
+          <p>--tds-motion-blink</p>
+        </div>
+
+        <!-- Elevate Exit -->
+        <div>
+          <div class="grey-box">
+            <div class="elevate-exit-box"></div>
+          </div>
+          <p>--tds-motion-elevate-exit</p>
+        </div>
+
+      </div>
+    </main>
+
+    <style>
+      main {
+        padding: 20px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .rotate-in-box,
+      .shake-box,
+      .pulse-box,
+      .blink-box,
+      .elevate-exit-box {
+        border-radius: 4px;
+        width: 80px;
+        height: 80px;
+        background-color: #041E42;
+      }
+
+      /* Rotate */
+      .rotate-in-box {
+        transform: rotate(0deg);
+      }
+
+      .grey-box:hover .rotate-in-box {
+        animation: var(--tds-motion-rotate);
+      }
+
+      /* Shake */
+      .shake-box {
+        transform: rotate(0deg);
+      }
+
+      .grey-box:hover .shake-box {
+        animation: var(--tds-motion-shake);
+      }
+
+      /* Pulse */
+      .pulse-box {
+        transform: scale(1);
+      }
+
+      .grey-box:hover .pulse-box {
+        animation: var(--tds-motion-pulse);
+      }
+
+      /* Blink */
+      .blink-box {
+        opacity: 1;
+      }
+
+      .grey-box:hover .blink-box {
+        animation: var(--tds-motion-blink);
+      }
+
+      /* Elevate Exit */
+      .elevate-exit-box {
+        transform: translateY(0);
+      }
+
+      .grey-box:hover .elevate-exit-box {
+        animation: var(--tds-motion-elevate-exit);
+      }
+
+      
+    </style>
+    `,
+  );
+
+export const Other = Template.bind({});
diff --git a/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx
new file mode 100644
index 000000000..0a382f1fd
--- /dev/null
+++ b/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx
@@ -0,0 +1,184 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Transitions/Slide',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+      <h2>Slide</h2>
+      <p>
+        Use these variables in the <code>animation</code> property of your elements to 
+        achieve smooth and uniform transitions, as demonstrated below.
+      </p>
+      <h3>Slide In</h3>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <!-- Slide In -->
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-top-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-top</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-right-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-right</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-bottom-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-bottom</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-left-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-left</p>
+        </div>
+      </div>
+
+      <h3>Slide Out</h3>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <!-- Slide Out -->
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-top-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-top</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-right-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-right</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-bottom-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-bottom</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-left-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-left</p>
+        </div>
+      </div>
+    </main>
+
+    <style>
+      main {
+        padding: 20px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .slide-in-top-box,
+      .slide-in-right-box,
+      .slide-in-bottom-box,
+      .slide-in-left-box,
+      .slide-out-top-box,
+      .slide-out-right-box,
+      .slide-out-bottom-box,
+      .slide-out-left-box {
+        border-radius: 4px;
+        width: 80px;
+        height: 80px;
+        background-color: #041E42;
+      }
+
+      /* Slide In */
+      .slide-in-top-box {
+        transform: translateY(-100%);
+      }
+
+      .grey-box:hover .slide-in-top-box {
+        animation: var(--tds-motion-slide-in-top);
+      }
+
+      .slide-in-right-box {
+        transform: translateX(100%);
+      }
+
+      .grey-box:hover .slide-in-right-box {
+        animation: var(--tds-motion-slide-in-right);
+      }
+
+      .slide-in-bottom-box {
+        transform: translateY(100%);
+      }
+
+      .grey-box:hover .slide-in-bottom-box {
+        animation: var(--tds-motion-slide-in-bottom);
+      }
+
+      .slide-in-left-box {
+        transform: translateX(-100%);
+      }
+
+      .grey-box:hover .slide-in-left-box {
+        animation: var(--tds-motion-slide-in-left);
+      }
+
+      /* Slide Out */
+      .slide-out-top-box {
+        transform: translateY(0);
+      }
+
+      .grey-box:hover .slide-out-top-box {
+        animation: var(--tds-motion-slide-out-top);
+      }
+
+      .slide-out-right-box {
+        transform: translateX(0);
+      }
+
+      .grey-box:hover .slide-out-right-box {
+        animation: var(--tds-motion-slide-out-right);
+      }
+
+      .slide-out-bottom-box {
+        transform: translateY(0);
+      }
+
+      .grey-box:hover .slide-out-bottom-box {
+        animation: var(--tds-motion-slide-out-bottom);
+      }
+
+      .slide-out-left-box {
+        transform: translateX(0);
+      }
+
+      .grey-box:hover .slide-out-left-box {
+        animation: var(--tds-motion-slide-out-left);
+      }
+    </style>
+    `,
+  );
+
+export const Slide = Template.bind({});
diff --git a/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx
new file mode 100644
index 000000000..d6d40b251
--- /dev/null
+++ b/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx
@@ -0,0 +1,184 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Transitions/Slide Short',
+  parameters: {
+    layout: 'fullscreen',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+      <h2>Slide Short</h2>
+      <p>
+        Use these variables in the <code>animation</code> property of your elements to 
+        achieve smooth and uniform transitions, as demonstrated below.
+      </p>
+      <h3>Slide In</h3>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <!-- Slide Short In -->
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-top-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-short-top</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-right-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-short-right</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-bottom-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-short-bottom</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-in-left-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-in-short-left</p>
+        </div>
+      </div>
+
+      <h3>Slide Out</h3>
+      <div class="tds-u-flex-start tds-u-gap4">
+        <!-- Slide Short Out -->
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-top-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-short-top</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-right-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-short-right</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-bottom-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-short-bottom</p>
+        </div>
+        <div>
+          <div class="grey-box">
+            <div class="slide-out-left-short-box"></div>
+          </div>
+          <p>--tds-motion-slide-out-short-left</p>
+        </div>
+      </div>
+    </main>
+
+    <style>
+      main {
+        padding: 20px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .slide-in-top-short-box,
+      .slide-in-right-short-box,
+      .slide-in-bottom-short-box,
+      .slide-in-left-short-box,
+      .slide-out-top-short-box,
+      .slide-out-right-short-box,
+      .slide-out-bottom-short-box,
+      .slide-out-left-short-box {
+        border-radius: 4px;
+        width: 80px;
+        height: 80px;
+        background-color: #041E42;
+      }
+
+      /* Slide Short In */
+      .slide-in-top-short-box {
+        transform: translateY(-16px);
+      }
+
+      .grey-box:hover .slide-in-top-short-box {
+        animation: var(--tds-motion-slide-in-short-top);
+      }
+
+      .slide-in-right-short-box {
+        transform: translateX(16px);
+      }
+
+      .grey-box:hover .slide-in-right-short-box {
+        animation: var(--tds-motion-slide-in-short-right);
+      }
+
+      .slide-in-bottom-short-box {
+        transform: translateY(16px);
+      }
+
+      .grey-box:hover .slide-in-bottom-short-box {
+        animation: var(--tds-motion-slide-in-short-bottom);
+      }
+
+      .slide-in-left-short-box {
+        transform: translateX(-16px);
+      }
+
+      .grey-box:hover .slide-in-left-short-box {
+        animation: var(--tds-motion-slide-in-short-left);
+      }
+
+      /* Slide Short Out */
+      .slide-out-top-short-box {
+        transform: translateY(0);
+      }
+
+      .grey-box:hover .slide-out-top-short-box {
+        animation: var(--tds-motion-slide-out-short-top);
+      }
+
+      .slide-out-right-short-box {
+        transform: translateX(0);
+      }
+
+      .grey-box:hover .slide-out-right-short-box {
+        animation: var(--tds-motion-slide-out-short-right);
+      }
+
+      .slide-out-bottom-short-box {
+        transform: translateY(0);
+      }
+
+      .grey-box:hover .slide-out-bottom-short-box {
+        animation: var(--tds-motion-slide-out-short-bottom);
+      }
+
+      .slide-out-left-short-box {
+        transform: translateX(0);
+      }
+
+      .grey-box:hover .slide-out-left-short-box {
+        animation: var(--tds-motion-slide-out-short-left);
+      }
+    </style>
+    `,
+  );
+
+export const SlideShort = Template.bind({});
diff --git a/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx
new file mode 100644
index 000000000..5d6109769
--- /dev/null
+++ b/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx
@@ -0,0 +1,85 @@
+import formatHtmlPreview from '../../formatHtmlPreview';
+
+export default {
+  title: 'Motions/Transitions/Zoom',
+  parameters: {
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0',
+      },
+    ],
+  },
+};
+
+const Template = () =>
+  formatHtmlPreview(
+    `
+    <main>
+      <h2>Zoom</h2>
+      <p>
+        Use these variables in the <code>animation</code> property of your elements to 
+        achieve smooth and uniform transitions, as demonstrated below.
+      </p>
+
+      <div class="tds-u-flex-start tds-u-gap4">
+        <div>
+          <div class="grey-box">
+            <div class="zoom-in-box"></div>
+          </div>
+          <p>--tds-motion-zoom-in</p>
+        </div>
+
+        <div>
+          <div class="grey-box">
+            <div class="zoom-out-box"></div>
+          </div>
+          <p>--tds-motion-zoom-out</p>
+        </div>
+      </div>
+    </main>
+
+    <style>
+      main {
+        padding: 20px;
+      }
+
+      .grey-box {
+        width: 200px;
+        height: 200px;
+        background-color: #EDEFF3;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+      }
+
+      .zoom-in-box,
+      .zoom-out-box {
+        border-radius: 4px;
+        width: 80px;
+        height: 80px;
+        background-color: #041E42;
+      }
+
+      .zoom-in-box {
+        transform: scale(0.9);
+      }
+
+      .zoom-out-box {
+        transform: scale(1);
+      }
+
+      .grey-box:hover .zoom-in-box {
+        animation: var(--tds-motion-zoom-in);
+      }
+
+      .grey-box:hover .zoom-out-box {
+        animation: var(--tds-motion-zoom-out);
+      }
+    </style>
+    `,
+  );
+
+export const Zoom = Template.bind({});