Reading the material 3 guidelines, I want to mimic this effect:
Material 3 fix tab transition

The effect: when moving the container below tab using swipe gesture, the fix tab moves, and not just changes but has a smooth swipe that goes along with content movement, pixel by pixel.

The same effect can be seen in Google Tasks app.

I have used material components with Hammer JS and more info about it can be seen here:
https://material-web.dev/components/tabs/

The Code with my current progress:
https://codepen.io/driftblaze/pen/NWZJvgG
I know of ways of using scroll snap behaviour to make the content swipe. But that doesn’t make the underline of the tab swipe the way we can in Google Task.

<md-tabs id="my-tabs">
  <md-primary-tab>Video</md-primary-tab>
  <md-primary-tab>Photos</md-primary-tab>
  <md-primary-tab>Audio</md-primary-tab>
</md-tabs>
<div class="tab-content">
  <div class="tab-panel" id="video-content">Content for Video</div>
  <div class="tab-panel" id="photos-content">Content for Photos</div>
  <div class="tab-panel" id="audio-content">Content for Audio</div>
</div>

.tab-content {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.tab-panel {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: none; /* Hide all panels by default */
  padding: 16px; /* Adjust padding as needed */
}
.tab-panel.active {
  display: block; /* Show active panel */
}

import "https://esm.sh/@material/web/all.js";
import { styles as typescaleStyles } from "https://esm.sh/@material/web/typography/md-typescale-styles.js";
document.adoptedStyleSheets.push(typescaleStyles.styleSheet);
document.addEventListener("DOMContentLoaded", () => {
  const tabs = document.querySelector("#my-tabs");
  const tabBar = tabs.querySelectorAll("md-primary-tab");
  const panels = document.querySelectorAll(".tab-panel");
  let activeIndex = 0;
  // Update active tab and panel
  function updateActiveTab(index) {
    activeIndex = index;
    tabBar.forEach((tab, i) => {
      if (i === index) tab.setAttribute("active", i === index);
      else tab.removeAttribute("active");
    });
    panels.forEach((panel, i) => {
      panel.classList.toggle("active", i === index);
    });
  } // Click event to switch tabs
  tabs.addEventListener("click", (e) => {
    if (e.target.tagName === "MD-PRIMARY-TAB") {
      const index = Array.from(tabBar).indexOf(e.target);
      updateActiveTab(index);
    }
  });
  // Initialize Hammer.js
  const content = document.querySelector(".tab-content");
  const hammer = new Hammer(content);
  hammer.on("swipeleft swiperight", (e) => {
    if (e.type === "swipeleft") {
      updateActiveTab(Math.min(activeIndex + 1, panels.length - 1));
    } else if (e.type === "swiperight") {
      updateActiveTab(Math.max(activeIndex - 1, 0));
    }
  }); // Initialize the first tab
  updateActiveTab(0);
});

How to achieve that effect using material ui and hammer js.