ScrollReveal element disappears in a certain resolution

[tiagogda]

Hi all. Let me start by saying that i'm a really really junior dev so I'm sorry if I'm not explaining well or doing things correctly!

I'm using ScrollReveal to animate some divs of my html file. It works fine but I've noticed something:

Using Google inspect to check on a mobile view, works fine; Viewing the page my desktop monitor (2560x1440), works fine; But when I move the window to my laptop the .reveal-7 div just disappears. It starts doing the inverse animation. It seams its regarded with the size of the window because opening it on my desktop monitor and the resizing the window does that issue.

Here's my SCSS code.

  .reveal-#{$i} {
    visibility: hidden;
  }
}

My HTML example:

  <h1 class="first-child reveal-1">Example</h1>

  <div class="card_festival ticket dashed-line reveal-2" style="background-image: url(assets/images/brunch.jpg)">
  <!--content here -->>
  </div>

  <!--Venda Final-->
  <div class="info_row reveal-3">
    <!--content here -->>
  </div>

  <!--Saldo Cashless-->
  <div class="info_row reveal-4">
    <!--content here -->>
  </div>

  <h1 class="reveal-5">Example</h1>

  <!--Card Festival-->
  <div class="card_festival reveal-6" style="background-image: url(assets/images/brunch.jpg)">
    <!--content here -->>
  </div>

  <!--Card Festival-->
  <div class="card_festival last-child reveal-7" style="background-image: url(assets/images/somnii_23.jpg)">
    <!--content here -->>
  </div>
</div>

My JS:

    window.sr = ScrollReveal({reset: true});
    for(let i= 1; i <= 7; i++) {
        sr.reveal(`.reveal-${i}`, {duration: i*600});
    }
});

Any idea why is it happen?