ScrollReveal Not Working in Custom Viewport

Question

I've read many tutorials, but I'm struggling to get ScrollReveal to work. I have two major columns, with the left using a scroll bar, and the right with no scrolling.

There are no errors in the console, and I get this when I inspect the div element that I want revealed:

<div class="foo" data-sr-id="1" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
    text1
</div>

Here is what's in the head section:

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
    window.sr = ScrollReveal();
</script>
<style>
    /* Ensure elements load hidden before ScrollReveal runs */
    .sr .fooReveal {
        visibility: hidden;
    }
</style>

Right before the closing body tag, I have this:

<script>
    // window.sr = ScrollReveal();
    // as a DOM node...
    var fooContainer = document.getElementById('fooContainer');

    sr.reveal('.foo', {
        container: fooContainer
    });
    console.log(fooContainer)

    // as a selector...
    sr.reveal('.bar', {
        container: '#barContainer'
    });
</script>

Finally, when I type ScrollReveal into the console, I get this:

ScrollReveal 15:10:28.907 ƒ e(n){return"undefined"==typeof this||Object.getPrototypeOf(this)!==e.prototype?new e(n):(O=this,O.version="3.3.6",O.tools=new E,O.isSupported()?(O.tools.extend(O.defaults,n||{}),O.defaults.container=…

Any ideas what I'm doing wrong?

This is my live site.

I have a decent jQuery reveal on scroll function if you wanna see that, without an extra plugin. Well, I do use jQuery.fn but that's not an extra plugin. Works in all browsers and devises flawlessly. There is also the greensock library, but that's is an extra request every time and I am not that impressed once you look past the selective demos out there. And the licence(lol) — ptts, Dec 20 '17 at 10:39

score 0 · Answer 1 · answered Dec 20 '17 at 12:58

I will explain this functions steps:

 jQuery(window).on('load',function() {
  var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0;  // init where we are

  function calcScrollValues() {
    windowHeight = jQuery(window).height();
    windowScrollPosTop = jQuery(window).scrollTop();
    windowScrollPosBottom = windowHeight + windowScrollPosTop;
}
  jQuery.fn.revealOnScroll = function(direction, speed) {
    return this.each(function() {

        var objectOffset = jQuery(this).offset();
        var objectOffsetTop = objectOffset.top;

        if (!jQuery(this).hasClass("hidden")) {

            // if argument is "right"
            if (direction == "right") {
                jQuery(this).css({
                    "opacity"   : 0,
                    "right"     : "700px",
                    "position"  : "relative"
                });
            // if argument is "left"
            } else {
                jQuery(this).css({
                    "opacity"   : 0,
                    "right"     : "-700px",
                    "position"  : "relative"
                });

            }
                jQuery(this).addClass("hidden");    


                        }

        if (!jQuery(this).hasClass("animation-complete")) {

            // if the page has been scrolled far enough to reveal the element
            if (windowScrollPosBottom > objectOffsetTop) {
                jQuery(this).animate({"opacity" : 1, "right" : 0}, speed).addClass("animation-complete");
            } // end if the page has scrolled enough check

        } // end only reveal the element once

    });
}

  function revealCommands() {




    jQuery("h1").revealOnScroll("left", 1500);
      jQuery("li:odd").revealOnScroll("left", 1500);
      jQuery("li:even").revealOnScroll("left", 1500);
      jQuery("s").revealOnScroll("left", 1500);
      jQuery("div").revealOnScroll("right", 900);


}
  calcScrollValues();
revealCommands();

// run the following on every scroll event
jQuery(window).scroll(function() {
    calcScrollValues()
    revealCommands();
 }); // end on scroll

 });

Just make sure you have jQuery loaded and then add the above function to the script. I have to go now, but this function is way extensible, I will update it later.

Here is a link with a demo:

https://codepen.io/damianocel/pen/pjdrWr

ScrollReveal Not Working in Custom Viewport

1 Answers1