search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.3k stars 2.26k forks source link

MP4s being revealed on page load, instead of on scroll #535

Closed alinakrav closed 3 years ago

alinakrav commented 3 years ago

Environment

I have had scrollreveal on my personal website for a while now, and it always worked, except I noticed that right after my commit where I changed my .gif media to .mp4, it only reveals the first 2 or 3 of my videos, out of 7 total. I went back to the last code version that worked properly, and simply changed the format <img src="media/space-game.gif" to <video controls autoplay loop muted type="video/mp4" src="media/space-game.mp4", without changing anything else (this took me 12 hours alone to isolate the issue, I tried every solution proposed on this forum before figuring out it was a gif/mp4 issue).

This makes scrollreveal only work up to the 3rd video, and 2nd paragraph, after which ALL the elements are just static (the \<p> ones don't reveal either). I also noticed if I refresh the page, and scroll to the bottom of my page really fast, the elements reveal how they're supposed to, which means they reveal as soon as the page loads and then don't reveal on scroll. This issue does not occur with GIF images, only with MP4s.

Please tell me if this is a bug or how I can fix it, It's really upsetting because I only noticed this after several updates that changed the rest of my code from the point where it last functioned properly.

jlmakes commented 3 years ago

Oof 12 hours, I know how that can be! 😅

I also noticed if I refresh the page, and scroll to the bottom of my page really fast, the elements reveal how they're supposed to, which means they reveal as soon as the page loads and then don't reveal on scroll.

I think that's the heart of it, ScrollReveal determines that elements "are visible" at page load, triggering reveal animations before those elements have actually been scrolled to. In the past, I've found this can be caused by replaced elements such as a large image that assumes its width/height after the asset has loaded.

One thing you could try to test this hypothesis is to delay your reveal() calls until your assets have finished loading. Have you already tried something like this? (below)

window.addEventListener('load', () => {
  ScrollReveal().reveal('.feature', { ... });
  ScrollReveal().reveal('.scroll-together', { ... });
  // etc...
});

Let me know if and how this changes things.

Also, thanks for a detailed issue with demonstration, and your debugging efforts before opening an issue.

alinakrav commented 3 years ago

Wow, thank you!!! I would have never figured that one out. It completely solved the issue 🚀