Shows how to set up Scroll Reveal to use data attributes to override settings for individual elements.

functions.php

<?php
wp_enqueue_script(
	'prefix-scrollreveal',
	get_template_directory_uri() . '/js/scrollreveal.min.js',
	array(),
	'1.0.0',
	true
);

markup.html

<div class="product" data-animation="true" data-duration="1000" data-scale="0.9" data-opacity=".8" data-distance="40px">
    <img src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/product.png">
</div>

theme.js

// Initialize Animations
// https://github.com/jlmakes/scrollreveal
animationsInit: function() {
	window.scrollreveal = ScrollReveal();

	$('[data-animation]').each( function() {
		console.log( $(this) );

		var settings = {
			'origin' : 'bottom',
			'distance' : '0',
			'duration': 500,
			'delay': 0,
			'opacity': 0,
			'scale': 1,
			'reset': false
		}

		if ( $(this).data('distance') ) {
			settings.distance = $(this).data('distance');
		}

		if ( $(this).data('duration') ) {
			settings.duration = $(this).data('duration');
		}

		if ( $(this).data('delay') ) {
			settings.delay = $(this).data('delay');
		}

		if ( $(this).data('opacity') ) {
			settings.scale = $(this).data('opacity');
		}

		if ( $(this).data('scale') ) {
			settings.scale = $(this).data('scale');
		}

		scrollreveal.reveal( $(this), settings );
	});

}