jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.34k stars 2.26k forks source link

afterReveal doesn't fire in time (Chrome, SR beta) #442

Closed ugrupp closed 6 years ago

ugrupp commented 6 years ago

Hey, loving the script, thanks! I'm using the beta so I can get the nice sequencer animations.

One problem though: On Chrome, the sequence sometimes gets stuck in the middle, leaving the screen half-empty for several seconds. It doesn't seem to happen on other browsers. I activated the callbacks and I noticed that afterReveal fires way too late. When it finally fires, the sequence continues. In other words, the time between beforeReveal and its corresponding afterReveal sometimes is way longer that the specified duration.

Here's a gif illustrating the problem: sequencebug2

Thanks for looking into it!

Config:

{
    duration: 750,
    delay: 0,
    distance: '3rem',
    scale: 1,
    interval: 100,
    viewFactor: 0.1,
    useDelay: 'onload',

    // Demo/debug callbacks
    beforeReveal: function (domEl) {
      console.log('beforeReveal', domEl);
    },
    beforeReset: function (domEl) {
      console.log('beforeReset', domEl);
    },
    // Callbacks that fire for each completed element reveal, and reset.
    afterReveal: function (domEl) {
      console.log('afterReveal', domEl);
    },
    afterReset: function (domEl) {
      console.log('afterReset', domEl);
    }
  }
ugrupp commented 6 years ago

I managed to narrow it down to the setTimeout call in the cue function. For some reason, it behaves like it's running in a background tab, as described here: https://stackoverflow.com/questions/5927284/how-can-i-make-setinterval-also-work-when-a-tab-is-inactive-in-chrome

One of the solutions there is to defer setTimeout calls into WebWorkers, having them executed inside a different Thread. There's a library for that, taking quite a radical approach, deferring all timeouts into a WebWorker: https://github.com/turuslan/HackTimer

Including the library worked for me, the sequences now run without getting stuck.

Perhaps, this functionality could be integrated into SR itself?

jlmakes commented 6 years ago

Hey @ugrupp, thanks for all the info!

Getting the sequences to behave intuitively has been a real pain, but I haven't encountered the bug you describe where the sequence stalls for moment before continuing. Do you think you could recreate it in an isolated fashion?

I wonder if there are other Chrome Developer Tools that could help us identify why the "throttling" would occur (if you're not burying the tab).

Just to make sure it wasn't introduced in an update to Chrome, I checked my local development environment for sequence debugging, and did not find any abnormal timing.

lubomirblazekcz commented 5 years ago

I am having this issue on older version Safari 10.1.2, but it works in latest version and any other browser, so nothing breaking. (sr version 4.0.4)