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?
@Mr_Finn Where exactly you put that code in the barba js? I have the same problem not that my new page starts not at the top, more on the position I left the one before.
One other thing worth mentioning, in the first line, you might want to change the 400 to maybe 800 (this is time in milliseconds). Just so that the browser has enough time to scroll all the way up before being revealed, cos it scrolls up fast.
@Mr_Finn Just tried it and now it scrolls up, quickly before the new page fades in. Is that the purspose? I more have a solution in mind that the scroll up is not visible and the new page just starts on top. Is that not possible? Any thoughts on how to achieve that function maybe? Without the “jumping”.
If not, I now have a working solution which is already great, many thanks for that!
Hey man, yeah I didn’t find a way to make it scroll without the “jump”, didn’t really look into it more. But what I did was make the fade longer here (it was 400, made it 800). That way the page scrolls all the way to the top BEFORE appearing (so the jump will not be visible). If you have really long pages then, yeah it might still be an issue. Try 1000? $el.animate({ opacity: 1 }, 800, function()
But yeah, I still didn’t find a solution that makes the page load from the top, without the jump.
Hey, I’ve been having the same issue you mentioned (Problem #1), but on a website I coded myself. Sorry for posting it here; I couldn’t find a solution anywhere else.
Could you please tell me how you fixed it? Only the stuff inside the Barba container gets messed up, and I have no clue why.
@leslier7 For me, there was an unknown conflict with on-load animation that I couldn’t really figure out. I ended up having to remove any animation that is triggered by page load (not ideal, but it was for my own website and I knew I’d update/revamp it later anyway, so I didn’t look into it too much).
The other possible issue I could think of is structural, so maybe double check how the content is nested?
If you want to take a look at the animation thingie, check out the documentation here barba.js
Sorry if I can’t help more, I’m a designer and still very new to the coding side of things.
This may help in the future: I fixed the layout issue by calling all my stylesheets in the of every html file.
But now after a transition, the contents of the next page just appears below the contents of the prev page. I still need to click twice/hit refresh to make the old content disappear.
I’ll try removing page load animations as you suggested. Appreciate your help!