Not working with onComplete call back function in Firefox

[dsamardjiev]

I am using a preloader from Code Canyon: http://codecanyon.net/item/melonhtml5-royal-preloader/3746554

And I am using its built in call back function to run some animations after the preloader is finished:

Royal_Preloader.config({
    onComplete: function() {
        window.sr = ScrollReveal();
        sr.reveal('#bottomReveal', {
            origin: 'bottom',
            duration: 1500,
            delay: 50
        });
        sr.reveal('#leftReveal', {
            origin: 'left',
            duration: 1500,
            delay: 50
        });
        sr.reveal('#rightReveal', {
            origin: 'right',
            duration: 1500,
            delay: 50
        });
        sr.reveal('#topReveal', {
            origin: 'top',
            duration: 1500,
            delay: 50
        });
        sr.reveal('#rotateBottomReveal', {
            origin: 'bottom',
            duration: 1500,
            rotate: {
                x: 90,
                y: 0,
                z: 0
            },
            delay: 50
        });
        sr.reveal('#rotateLeftReveal', {
            origin: 'left',
            duration: 1500,
            rotate: {
                x: 90,
                y: 0,
                z: 0
            },
            delay: 50
        });
        sr.reveal('#rotateRightReveal', {
            origin: 'right',
            duration: 1500,
            rotate: {
                x: 90,
                y: 0,
                z: 0
            },
            delay: 50
        });
        sr.reveal('#rotateTopReveal', {
            origin: 'top',
            duration: 1500,
            rotate: {
                x: 90,
                y: 0,
                z: 0
            },
            delay: 50
        });
        sr.reveal('#scaleReveal', {
            origin: 'top',
            duration: 1500,
            delay: 50,
            scale: 0.6
        });
    }
});

But for some reason this is only working in Chrome and IE (latest versions) but not the latest version of Firefox, nothing that is animated shows up. I cannot pinpoint if this is an issue from the preloader or scrollReveal if I can get a point in the right direction!

You can see this issue demonstrated here: www.aliensix.com/particle/

[jlmakes]

Hey @ve1jdramas :wave: Could you post what is logged in the console in your version of Firefox?

I only have Firefox Developer Edition installed, and everything works fine. So I don’t see any error messages related to ScrollReveal, except a harmless warning:

ScrollReveal: reveal on "#rotateRightReveal" failed, no elements found.

[dsamardjiev]

Hi @jlmakes, so the weird thing is the issue only occurs SOMETIMES, I cannot for the life of me pinpoint it. And it also occurs in Chrome but much less frequently.

This is the error I am getting when it does occur:

TypeError: t is undefined
s()
 scrollreveal.min.js:1
this.ScrollReveal</i.prototype.reveal()
 scrollreveal.min.js:1
.onComplete()
 part:1245
Royal_Preloader._loadFinish()
 royal_preloader.min.js:32
Royal_Preloader._animatePercentage()
 royal_preloader.min.js:31
Royal_Preloader._animatePercentage/<()
 royal_preloader.min.js:31

Thanks for the help!

[jlmakes]

Okay @ve1jdramas,

First tip, you should not use minified packages during development—because for example TypeError: t is undefined is not helpful, whereas in the non-minified package that object will have a normal name, making debugging far easier. Once everything is working, you can replace your scripts with minified versions—or better yet, combine them all into one minified file yourself.

"...so the weird thing is the issue only occurs SOMETIMES, I cannot for the life of me pinpoint it. And it also occurs in Chrome but much less frequently."

Sounds like a race condition. Something is happening simultaneously, but completing in the wrong order occasionally. Make sure ScrollReveal is loaded (and instantiated) before your progress bar scripts, see the README section 4.2. Improve User Experience for an example of correct implementation of ScrollReveal.

Third, below is a revised snippet which you can try; I’ve moved ScrollReveal instantiation outside of the callback and executing the triggerReveals method inside of an anonymous function.

// this should be in the <head> as shown in section 4.2. linked above
window.sr = ScrollReveal({
    duration: 1500,
    delay: 50
});

// Your pre-loader configuration
Royal_Preloader.config({
    onComplete: function () {
        triggerReveals();
    }
});

function triggerReveals() {
    if (sr) {
        // default reveals
        sr.reveal('#bottomReveal', {
            origin: 'bottom'
        }).reveal('#leftReveal', {
            origin: 'left'
        }).reveal('#rightReveal', {
            origin: 'right'
        }).reveal('#topReveal', {
            origin: 'top'
        });

        // rotation reveals
        sr.reveal('#rotateBottomReveal', {
            origin: 'bottom',
            rotate: { x: 90 }
        }).reveal('#rotateLeftReveal', {
            origin: 'left',
            rotate: { x: 90 }
        }).reveal('#rotateRightReveal', {
            origin: 'right',
            rotate: { x: 90 }
        }).reveal('#rotateTopReveal', {
            origin: 'top',
            rotate: { x: 90 }
        })

        // scale reveals
        sr.reveal('#scaleReveal', {
            origin: 'top',
            scale: 0.6
        });
    }
}