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?