V4 issue in isElementVisible when using Turbolinks

[dylanfisher]

I'm working on a site using Turbolinks 5 in Rails and the V4 branch of scrollreveal. I noticed when navigating quickly back and forth between pages these errors would crop up.

Uncaught TypeError: Cannot read property 'bounds' of undefined Uncaught TypeError: Cannot read property 'geometry' of undefined

Updating the isElementVisible to check for the presence of these elements seems to have fixed the problem:

function isElementVisible(element) {
  if ( !element ) return;
  var container = this.store.containers[element.containerId];
  if ( !container ) return;

[ekfuhrmann]

One of the default properties you can set is useDelay, which has an option of onload. This may save you from needing to run that isElementVisible function.

Example:

// useDelay options:
// 'always' — delay for all reveal animations
// 'once'   — delay only the first time reveals occur
// 'onload' - delay only for animations triggered by first load

sr.reveal('.foo', { useDelay: 'onload' });

[dylanfisher]

Didn't seem to help. Perhaps it's because of the way I'm using the destroy function? My whole initialization looks like this:

App.sr = ScrollReveal();

$(document).on('turbolinks:load', function() {
  App.sr.reveal('.block', {
    duration: 1000,
    scale: 1,
    distance: '60px',
    easing: 'ease'
  });

  $(document).one('turbolinks:before-cache', function() {
    App.sr.destroy();
  });
});

[jlmakes]

Hey Dylan, thanks for raising an issue with a proposed solution!

I've actually seen this error before (#349):

From my tinkering, it seems the ScrollReveal store is being nuked by clean() or destroy() midway through looping over elements, so isElementVisible() attempts to access element and container data that no longer exists.

~I'll give this some attention this week, and make sure a solution goes into the next release.~

Fix landed in beta.32

[dylanfisher]

Hey that's great Julian, I just tested and don't see the errors. 👍