Jump to content
Search Community

ScrollTrigger + Barba JS. After barba transition scrolltrigger markers does not move with locomotive scroll

DmitriyRogkov test
Moderator Tag

Recommended Posts

Hi all. I've been trying to fix the bug for a couple of days now, searching the web for an answer, but nothing helps. The essence of the problem is as follows - after barba transition scrolltrigger markers does not move with locomotive scroll. I will throw my code below.

Thank you in advance for your kind help in solving this bug! I will be grateful to everyone!

app.js

Link to comment
Share on other sites

Thanks so much!

 

So I don't really know enough about barba or locomotive to help with exactly *why*

But something wonky's happening with the order that things are being called.

 

If I pop a scrollTrigger.refresh() in a delayed call it sorts it out. That's basically saying, hey scrollTrigger, check where are the positions are again and recalculate stuff. I imagine what's happening is that the first time that scrollTrigger is made, the elements are in a slightly different position or don't exist. This is a bit of a band aid, if I were you I'd whack a bunch of console logs in there, look into barba's callbacks and make sure you're calling stuff in a logical order.

https://codesandbox.io/s/young-lake-rmegei?file=/src/js/app.js:1641-1708
 

 

Quote

The example clearly shows that when scrolling on a light section, the class is not added to the header,


Also worth mentioning that the initial call was a ok for me after removing the height on the .dark class in the CSS. That was adding a height to the header when the .dark class was added. Maybe that was confusing you? It baffled me for a little bit!

  • Like 1
Link to comment
Share on other sites

Thank you for your reply! Tried several more options.
 

I realized that I can't use setTimeout here, because it affects the performance of Barba JS a lot. I took it and the header started working normally, the class is added after the barba transition, but now a new problem has appeared, which is directly related to the ScrollTriger. The END marker of the white section should be at the very end, but for some reason it is placed in the middle. How to set the delay, I don't know, because again, it is not desirable to use setTimeout.

image.thumb.png.38a452020ea1d39005117765951bb9be.png

Link to comment
Share on other sites

 

I think the reason for why it doesn't work properly after a page-transition, boils down to the fact, that for a certain period of time within barba's lifecycle, both, the old and the new container will live together in the DOM.

lifecycle.png

 

Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that.

 

You can check the difference between the two elements you are targetting by logging out 

 

console.log(smoothScroll.parentElement.getAttribute('data-barba-namespace'))

 

vs.

 

console.log(document.querySelector('.smooth-scroll').parentElement.getAttribute('data-barba-namespace'))

 

in your initSmoothScroll function.

 

So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway.

 

Both options resolved things for me. Hope they do for you, too. 

 

1 hour ago, Cassie said:

Also worth mentioning that the initial call was a ok for me after removing the height on the .dark class in the CSS. That was adding a height to the header when the .dark class was added. Maybe that was confusing you? It baffled me for a little bit!

 

Thanks for the heads-up btw @Cassie :) - was scratching my head for a minute or two there, before I saw that.

 

  • Like 2
Link to comment
Share on other sites

Quote

Now while you are initiating your new locomotive-scroll instance everytime with reference to the new barba-container, your scrollerProxy is only being created with reference to '.smooth-scroll', which will be available in both, the old and new container at that time - and since the old container sits above the new in the DOM tree at that time, you will be referencing the old container's .smooth-scroll with that.


Genius! That makes so much sense. I'd logged out a ton and couldn't figure out what was going on. 🏆

  • Like 2
Link to comment
Share on other sites

25 minutes ago, akapowl said:

in your initSmoothScroll function.

 

So you can either simply just change the element you are targetting in your scrollerProxy to be the same you are targetting when creating your locomotive-scroll instance, or alternatively just remove the old barba-container at the proper time since you don't need it for your type of page-transition anyway.


Very well! Thanks!

It was a small mistake that I unfortunately failed to notice. I replaced my '.smooth-scroll' with the value smoothScroll. This solved a number of bugs. But the main one remained - the end marker that should have been at the end of the light section is still not correctly placed, namely in the middle of the section.

 

image.png.20a4a5534f7a101999cc297a9af364de.png


Maybe the marker is not placed correctly, because the light section has a block with a horizontal scroll, but the whole block has overflow: hidden. I don't think it should affect the positioning of the pulleys, but it does.

Link to comment
Share on other sites

 

The only thing I can tell you for sure, is that you should call a ScrollTrigger.refresh() after you have created your ScrollTriggers when useing ST with locomotive-scroll, as is also noted in the demo on the .scrollerProxy() docs-page - right now you are only doing it after you created the smooth-scrolling instance and the scrollerProxy().

 

[...]
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();

 

 

 

Apart from that, there can be dozens of reasons for your issue - might be that you need to make sure your images are loaded before you create your ScrollTriggers (or call a .refresh() after they are fully loaded) but it might as well be something very different; possibly not even related to ScrollTrigger.

 

After applying the suggested fixes to your current demo, I can not see the behaviour you mentioned at all. Since we can not really offer advice from looking at screenshots, because there are just too many possible problem-sources in a complex scenario like this, please add a minimal demo showcasing your issue, if you need further assistance on this.

 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...