Init ScrollMonitor after ajax page load

[proov]

Hello,

I set up a little script to init ScrollMonitor with Masonry and ImagesLoaded to have a full Lazy Loaded Masonry. Everything works as expected when the page loads :)

But, when i navigate to an another page, then i go back to the curent masonry/scrollmonitor page, all watchers are OK, but elementWatcher.enterViewport() does not fire anything. I have to scroll to launch elementWatcher.enterViewport, i tried elementWatcher.update() and elementWatcher.triggerCallbacks() as well, but both methods doesn't do anything.

I'm using Barba.js to handle ajax pages. Here is a look of what i've done:

masonry.js https://gist.github.com/proov/94c3955de351bff8cfb45d38a84d11b2
ajax-pages.js https://gist.github.com/proov/eff481d5fd6156c7753ade272343a146

I'm a designer, not a developper, be indulgent with my code :D

Any Idea ?

Many thanks! :)

[stutrek]

are you destroying then recreating the elements? If so you'll also need to destroy and recreate the watchers.

[proov]

As i can see, the problem does not come from ScrollMonitor but from Barba.js. If i reinit the function a bit later when the view is ready (after transition ended), then it's working as expected :)

I'm gonna ask some help from the author of Barba.js :D

Thanks again for scrollMonitor, it's really easy to use, even for a newbie developper like me :D