• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

215
Vistas
barba.js Page reloading when pressing back button

I have a transition from one page to another using barba.js, after visiting that next page if you hit the back button it doesn't go back to the first page. The URL quickly updates to the first, then back the second URL and then it just refreshes the second page.

After one (or more) clicks of the back button, it returns to the first page.

    const mainOverlay = document.querySelector("#main-overlay");
    if (history.scrollRestoration) {
      history.scrollRestoration = "manual";
    }

    barba.init({
      transitions: [
        {
          name: "home",
          leave(data) {
            // Move target element
            const target = data.trigger.closest(".transition-target");
            if (target) {
              const yDistance = target.getBoundingClientRect().top;
              var tl = gsap.timeline();

              tl.to(target, {
                top: -(yDistance - 31) + "px",
                left: "0",
                width: "100%",
                zIndex: 100,
                duration: 0.9,
                ease: "expo.out",
              });
              return tl.play();
            }
          },
          enter(data) {
            window.scrollTo(0, 0);
            const newTarget =
              data.next.container.querySelector(".transition-target");
            var tl = gsap.timeline();


            tl.to(window, { scrollTo: { y: 0 }, duration: 0 })
              .to(newTarget, {
                zIndex: 5,
                duration: 0,
              });
          },
        },
      ],
    });

The expected behaviour is on clicking the back button it just returns to the first page. No transition is expected during that.

HTML if needed:

    <body>
        <div data-barba="wrapper">
            <div class="relative" data-barba="container" data-barba-namespace="home">
                <div id="main-overlay" class="fixed w-full h-full z-40 bg-white hidden opacity-0"></div>
                ...
            </div>
    
        </div>
     </body>
almost 3 years ago · Santiago Gelvez
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda