Streaming live at 10am (PST)

Barba.js Transition not working properly

Hello guys.
I was trying to implement the smooth barba transition into my project. I copied the code snippets from here https://barba-js-base-transition-webflow-reinit.webflow.io/ (shoutout to @HappyDigital!).

The problem:
In theory, the transition seems to be working, however it requires two clicks to work properly. On first click, the page seems to change, but the layout gets all buggy and/or messy. Sometimes it loads the page without the header, and loads it scrolled halfway through. Once I click again on the same link, it works fine.

UPDATE:
I think I have figured out half the issue: Page load animations were conflicting with the transition, and were only activating on second click (I guess the browser only reads page load triggers if page actually loads, maybe the barba “tricks” the browser and doesn’t allow it to read a page load).

But the second issue remains: All pages load from a scrolled position. Example, if I scroll halfway through one page, and go to another page, the new page will load from the middle, as if scrolled halfway through. Any thoughts?


Here is my public share link: https://preview.webflow.com/preview/parabolae?utm_medium=preview_link&utm_source=designer&utm_content=parabolae&preview=4230f2bf87945feb81d3ec12ff917336&mode=preview
And here is the live test link: https://test.parabolae.co/index.html

Solved with this piece of code added to the original one:

$("html, body").animate({ scrollTop: 0 }, "slow");