More detail on how to use scroll reveal with data attributes in a WordPress theme.

animationsInit.js

/*!
 * Script for initializing globally-used functions and libs.
 *
 * @since 1.0.0
 */
(function($) {

	var theme = {

		// Init functions
		init: function() {
			this.bindEvents();
		},

		// Bind Elements
		bindEvents: function() {
			this.animationsInit();
        },

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

			$('[data-animation]').each( function() {

				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');
				}

				if ( $(this).data('reveal-class') ) {
					var revealClass = $(this).data('reveal-class')
					settings.afterReveal = function(element) {
						$(element).addClass(revealClass);
					}
				}

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

		},

	};

	theme.init();

})(jQuery);