Search code examples
javascripthtmlcssscrollreveal.js

ScrollReveal 'no elements found'?

I've been messing around with a few javascript libraries that might aid me in the creation of a portfolio website I look forward to creating. However, I have ran into an issue with the scrollreveal.js library. When I load the site (testing locally), I get this in the console ScrollReveal: reveal on ".example" failed, no elements found.

Here is my code

HTML:

<div id="mainContent1">

<div class="example" data-scroll></div>

</div>

CSS:

.example {
    height: 150px;
    width: 150px;
    background-color: #000000;
    display: block;
    margin-top: 150vh; //just to be able to scroll down for sr effect
}

Javascript:

window.sr = ScrollReveal ();
sr.reveal('.example');

I simply cannot get it to work, and would appreciate any help. Thanks!

Solution

  • Make sure the link to the ScrollReveal library is just before your closing tag. And make sure your script is after that.

    If your script is at the top, it will be looking for elements that are not yet on the page.