Native like page transitions

1

In case any one is interested, native like page transitions.

css

.nsb-form {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
  will-change: transform;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* native easing */
}```

javascript


let currentFormId = "";  // This will track the last shown form

function slideToForm(newForm, direction = "left", pushToHistory = false) {
  let oldForm = NSB.currentForm;
  if (!newForm || oldForm === newForm) return;

  // Setup styles
  [oldForm, newForm].forEach(f => {
    f.style.position = "absolute";
    f.style.top = "0";
    f.style.left = "0";
    f.style.width = "100%";
    f.style.height = "100%";
    f.style.display = "block";
    f.style.transition = "none"; // Reset transition
    f.style.transform = "translateX(0)";
    f.style.boxShadow = "none";
  });

  // Starting position of new form
  const offset = direction === "left" ? "100%" : "-100%";
  newForm.style.transform = `translateX(${offset})`;

  // Force browser to apply transform before animating
  void newForm.offsetWidth; // Force reflow

  // Enable transition
  newForm.style.transition = "transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)";
  oldForm.style.transition = "transform 0.35s cubic-bezier(0.4, 0, 0.2, 1)";

  // Add depth (subtle drop shadow during transition)
  oldForm.style.boxShadow = "0 0 10px rgba(0,0,0,0.1)";
  newForm.style.boxShadow = "0 0 20px rgba(0,0,0,0.2)";

  // Slide both forms
  requestAnimationFrame(() => {
    newForm.style.transform = "translateX(0)";
    oldForm.style.transform = direction === "left" ? "translateX(-100%)" : "translateX(100%)";
  });

  // Cleanup after animation
  setTimeout(() => {
    oldForm.style.display = "none";
    oldForm.style.transform = "";
    newForm.style.position = "relative";
    newForm.style.boxShadow = "";
    oldForm.style.boxShadow = "";

    NSB.currentForm = newForm;

    if (pushToHistory) {
      history.pushState({ form: newForm.id }, null, "#" + newForm.id);
    }
  }, 400); // Slightly longer than transition to be safe
}


function goToForm(newForm) {
  if (NSB.currentForm === newForm) return;
  slideToForm(newForm, "left", true);
}

window.addEventListener("popstate", function (event) {
  if (event.state && event.state.form) {
    const targetForm = window[event.state.form];
    if (targetForm && targetForm !== NSB.currentForm) {
      slideToForm(targetForm, "right", false);
    }
  }
});

Form1 (your first form, replace ‘Form1’ with the name of your first form)

Form1.onshow = function () {
  if (!history.state || history.state.form !== Form1.id) {
    history.replaceState({ form: Form1.id }, null, "#" + Form1.id);
    NSB.currentForm = Form1;
  }
}

Note: In the Properties window you will need to ensure “enableBrowserArrows“ is set to false.

Also in your app Replace ChangeForm(form name) with goToForm(form name), and to navigate backwards use window.history.back() (instead of change form())

1 Like