ScrollReveal element disappears in a certain resolution
Author: tiagogdaCreated Sep 18, 2023Updated Sep 18, 2023
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.
```@for $i from 1 through 7 {
.reveal-#{$i} {
visibility: hidden;
}
}
```
My HTML example:
```
Example
> > >Example
> > ``` My JS: ```document.addEventListener("DOMContentLoaded", function () { 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?Source: jlmakes/scrollreveal