0

Using scrollReveal.js inside WordPress, enqueued via CDN. Retaining zero console errors but the data-sr values do not animate the front-end. Typing scrollReveal inside Chrome's inspect console shows it is initializing but will not parse animation effects.

app.js:

$ = jQuery.noConflict( true );

(function( $ ) {
    // init scroll-reveal
    var config = {
        easing: 'hustle',
        reset:  true,
        delay:  'onload',
        vFactor: 0.90
    }
    window.sr = new scrollReveal( config );
})(jQuery);

Chrome Console:

scrollReveal input:

function e(e){this.docElem=t.document.documentElement,this.options=this.extend(this.defaults,e),this.styleBank=[],1==this.options.init&&this.init()}

Great, it's initialized, but when I append the necessary data-sr, or it's key values, to the front-end HTML it reports no error and yet doesn't animate.

Enqueue:

wp_enqueue_script( 'foundation', 'https://cdn.jsdelivr.net/g/foundation@5.5.3(js/foundation.min.js+js/vendor/jquery.js+js/vendor/modernizr.js),scrollreveal.js@0.1.2', array(), '', true );

Init:

add_action( 'init', 'source_enqueue' , 999 );

HTML:

<div role="front" data-sr>
    <main>
        <article>
            <?php
                if ( have_posts() ) :
                    while ( have_posts() ) : the_post();
                        the_content();
                    endwhile;
                    else:
                endif;
            ?>
        </article>
    </main>
</div>

Is it because I'm using init? Wrong jquery? I've getting zero console errors and am indeed lost. What am I doing wrong?

jlmakes
  • 2,945
  • 1
  • 26
  • 38
Alexander Graham
  • 407
  • 1
  • 3
  • 10

1 Answers1

0

Turns out the jsdelivr CDN package is outdated, not only on that CDN but on all CDN sites. CDN's queue 0.1.2 whereas the package uses 2.1, so please use bower and enqueue through those mediums.

CDN has been updated! The following wp_enqueue_script works properly, along with the noConflict() JS file and init. Thanks to the owner of scrollReveal.js for assisting with the CDN error!

Enqueue:

wp_enqueue_script( 'scroll-reveal', 'https://cdn.jsdelivr.net/scrollreveal.js/2.3.2/scrollReveal.min.js', array(), '', true );

App.js:

$ = jQuery.noConflict( true );

(function( $ ) {

    // init scroll-reveal
    window.sr = new scrollReveal();

})(jQuery);
Alexander Graham
  • 407
  • 1
  • 3
  • 10
  • I updated scrollreveal on jsDelivr and enabled auto-updates http://www.jsdelivr.com/projects/scrollreveal.js – Jim Oct 20 '15 at 19:30
  • 1
    Oh my goodness! Thank you! I can see the version is different. When did you take care of this, yesterday? Let me do some testing! – Alexander Graham Oct 21 '15 at 13:03