Using Rellax with Barba causes wrapper issues

[idrisdopico]

I'm currently using Rellax for a couple of (reusable) components. The page does not reload since I'm using Barba, I'm trying to check if the component changes. From here I'm starting to see some issues though.

The main issue I'm facing right now is that the element is not bound to the parent container for some reason. This is not consistent though, sometimes, the element does not go out of the parent bounds.

I tried a couple of different solutions, here are 2 examples:

1. Observer

const blockElements = document.querySelectorAll('.push-big-image__block')
let observer = new MutationObserver(() => {
    blockElements.forEach(el => {
      const bigImageRellax = new Rellax(el, {
        relativeToWrapper: true,
        wrapper: el.parentElement,
        round: true,
        speed: 4,
      })

      window.addEventListener('scroll', () => {
        bigImageRellax.refresh();
      })
    })
  })

  observer.observe([...blockElements][0], { childList: true })

2. window.setTimeout

window.setTimeout(() => {
    blockElements.forEach(el => {
      const bigImageRellax = new Rellax(el, {
        relativeToWrapper: true,
        wrapper: el.parentElement,
        round: true,
        speed: 4,
      })

      window.addEventListener('scroll', () => {
        bigImageRellax.refresh();
      })
    })
  }, 500)

Any help is appreciated, thanks in advance.