Objects disappearing after second init();

[mclapa]

Hello,

I noticed there's a bug when calling init() for the second time.

I have 2 async ajax calls, I never know which one is first, so my code looks a bit like this

if ( typeof( window.scrollReveal ) != 'object' ) {
  window.scrollReveal = new scrollReveal( { init: false } );
  window.scrollReveal.init();
} else {
window.scrollReveal.init();
}

Now I'm not sure if it has something to do with the animations being mid-way when the second init hits, but the items from the first init animate in, and after complete, their opacity is set to 0 and they disappear.

I have a feeling that it has something to do with the reveal-complete attribute only being set after the animate, and the second init runs before the attribute is set.

I've tried using the v2.0.0-RC branch (ie. Mockingbird) but I'm running into different problems which I'm now debugging.

Thanks!

[mclapa]

Found the solution!

First, use the 2.0.0-RC.

Then at around Line 124, self.data[ i ] should be self.data[ id ]. Same thing goes a few lines down at Line 143, make it id, not i.

Also a few more problems, and their solutions…

Because the JavaScript doesn't kick in right away, you might notice a flicker where all the reveal content appears, disappears, then gets re-animated in. This is because the CSS loads first, then the JS, then the plugin kicks in.

The solution is in your css, do [data-sr] { visibility: hidden; } and at around Line 135, set the style visibility: visible—so in the end, the code in the init looks something like

init: function() {

      var id;

      self.elems = Array.prototype.slice.call( self.docElem.querySelectorAll( '[data-scroll-reveal]' ) );
      self.elems.forEach(function ( el, i ) {

        /**
         * i is 0 initially, so let’s bump it so we start with 1
         */
        i++;

        id = el.getAttribute( 'data-sr-id' );

        /**
         * if id is undefined, assign a new one to self.data and
         * to the DOM element (via the data-sr-style-id attribute)
         */

        if ( !id ) {

          id = self.serial++;


          self.data[ id ] = {};
          self.data[ id ].id = id;

          el.setAttribute( 'data-sr-id', id );

        }
        else {
            return;
        }


        var tempstyle = el.getAttribute( 'style' );
        el.setAttribute('style', tempstyle+';visibility:visible;');


        /**
         * if no style property has been set, create one using the value from
         * the element's existing style tag — otherwise set to false
         */
        if ( !self.data[ id ].style ) {

          self.data[ id ].style = el.getAttribute( 'style' );

          if ( self.data[ id ].style ) {

            self.data[ id ].style += ';';

          } else {

            self.data[ id ].style = '';

          }

        }

        window.addEventListener( 'scroll', _eventHandler, false );
        window.addEventListener( 'resize', _eventHandler, false );

      });

      self.eventBlocked = false;

      self.animate( self.elems );

    },

Note the return in the declaring part, that's so we don't re-init values we've already crawled (causing it to disappear)

You can see a live example at http://rates.ca but won't be available till next launch next week

Thanks for an awesome plugin!

[jlmakes]

Awesome! Thanks @mclapa, I appreciate you taking the time.

I’m working on getting this into the v2.0.0-RC. 🍻

[jlmakes]

@mclapa Boom 💥 I’ve got these changes in the latest RC. Thanks again, and great work!