doorman-with-scrollmonitor.html

<style>
.section {
  height: 100vh;
}
[data-doorman] {
  display: inline-block;
  visibility: hidden;
}
</style>

<div id="section1" class="section">
  <div data-doorman>section1</div>
</div>
<div id="section2" class="section">
  <div data-doorman>section2</div>
</div>
<div id="section3" class="section">
  <div data-doorman>section3</div>
</div>

<script src="https://unpkg.com/scrollmonitor@1.2.2"></script>
<script src="https://unpkg.com/doorman-effect/umd/doorman.min.js"></script>
<script>
  const sections = [
    document.getElementById('section1'),
    document.getElementById('section2'),
    document.getElementById('section3')
  ]
  Array.prototype.forEach.call(sections, (section) => {
    const elementWatcher = scrollMonitor.create(section, -200)
    elementWatcher.enterViewport(() => {
      const elements = section.querySelectorAll('[data-doorman]')
      Array.prototype.forEach.call(elements, (el) => {
        const doorman = new Doorman(el)
        doorman.start()
      })
      elementWatcher.destroy()
    })
  })
</script>