At the start of the override, I set up the easing curve and transition. I defined the easing numbers and duration in a component first, then copied them into the override for consistency. From there, I established the base values for scale, x position, and rotation (starting with one scale, no offset, and no rotation).

Then, I set up multiple overrides. The target element override is applied to the main container of the website, which is the element we want to move away during the menu animation. The trigger element override is applied to the menu button wrapper in Framer. On click, it triggers an offset and rotation: scale is set to 1, the offset shifts 50% to the right, and rotation is set to -12 degrees. I also transformed the <chl>-12 degrees</chl> origin of the main container to get the right effect and disabled scrolling while the menu is open.

Lastly, I created a reset override for the close button. This returns the scale to 1, moves the offset back to 0, resets rotation to 0, and re-enables scrolling.

For optimization, I tweaked the override so that on desktop and tablet, the offset is 50%, while on phones (screens smaller than 810px), the offset becomes 100%. That’s the complete setup for the navigation’s animation.

Create a code override in your project by going to the assets panel on the left, then scroll down to "code". Click the "+" button to create a new override. Replace the auto-generated code with the code below, press ⌘ + S to save it, and apply it to any layer.

Then, I set up multiple overrides. The target element override is applied to the main container of the website, which is the element we want to move away during the menu animation. The trigger element override is applied to the menu button wrapper in Framer. On click, it triggers an offset and rotation: scale is set to 1, the offset shifts 50% to the right, and rotation is set to -12 degrees. I also transformed the <chl>-12 degrees</chl> origin of the main container to get the right effect and disabled scrolling while the menu is open.

Lastly, I created a reset override for the close button. This returns the scale to 1, moves the offset back to 0, resets rotation to 0, and re-enables scrolling.

For optimization, I tweaked the override so that on desktop and tablet, the offset is 50%, while on phones (screens smaller than 810px), the offset becomes 100%. That’s the complete setup for the navigation’s animation.

window.Webflow ||= [];

function tagAndSetupVideos(scope = document) {
  const videos = scope.querySelectorAll("video.cmp_cover-video");

  videos.forEach(video => {
    if (video.dataset.processed === "true") return;

    video.muted = true;
    video.playsInline = true;
    video.dataset.processed = "true";

    const item = video.closest(".cmp_item");
    if (item && !item.dataset.hoverBound) {
      item.setAttribute("tabindex", "0");

      const playOnHover = () => {
        if (video.readyState >= 2) {
          video.loop = true;
          video.currentTime = 0;
          video.play().catch(err => {
            if (err.name !== "AbortError") console.warn("Hover play failed:", err);
          });
        }
      };

      const stopOnHover = () => {
        video.loop = false;
        video.pause();
        video.currentTime = 0;
      };

      item.addEventListener("mouseenter", playOnHover);
      item.addEventListener("mouseleave", stopOnHover);
      item.addEventListener("focus", playOnHover);
      item.addEventListener("blur", stopOnHover);

      item.dataset.hoverBound = "true";
    }
  });
}

Webflow.push(() => {
  tagAndSetupVideos();
});

const observer = new MutationObserver(mutations => {
  for (const { addedNodes } of mutations) {
    addedNodes.forEach(node => {
      if (!(node instanceof HTMLElement)) return;
      if (node.querySelector("video.cmp_cover-video")) {
        tagAndSetupVideos(node);
      }
    });
  }
});

observer.observe(document.body, { childList: true, subtree: true });

Lastly, I created a reset override for the close button. This returns the scale to 1, moves the offset back to 0, resets rotation to 0, and re-enables scrolling.