Search code examples
javascriptjqueryscrollscrollreveal.js

Scroll reveal not working

Im trying to use scrollReveal.js after reading THIS tutorial and using their code, i still cant get my divs to fade in when my viewport is on them.

Html

<head>
<script src="scrollreveal-master/dist/scrollreveal.min.js"></script>
</head>

<div data-sr>This is the first div</div>
<div data-sr>This is the second div</div>
<div data-sr>This is yet another div</div>

javascript

new scrollReveal();

When i view the console on my web page it says

"Uncaught ReferenceError: scrollReveal is not defined"

Solution

  • Try like this to add an animation on scroll using scrollReveal 

    <!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />


</head>

<body>

<div id="main">

<div data-sr> one </div>
<div data-sr> two </div>
<div data-sr> three </div>

</div>

<script src="https://unpkg.com/[email protected]/dist/scrollreveal.min.js"></script>

<script>

// Changing the defaults
window.sr = ScrollReveal({ reset: true });

// Customizing a reveal set
sr.reveal('div', {opacity: 0.9,duration:3000});

</script>

</body>

</html>

    Working example : https://plnkr.co/edit/qC33zle0fafyAL0RjkVl?p=preview