FloatBackOfffice/assets/js/pages/animations_velocity_examples.js

/* ------------------------------------------------------------------------------
*
*  # Advanced Velocity.js examples
*
*  Specific JS code additions for extension_velocity_examples.html page
*
*  Version: 1.0
*  Latest update: Aug 1, 2015
*
* ---------------------------------------------------------------------------- */

$(function() {


    // Animation options
    // ------------------------------

	// Properties animation
	$('.velocity-properties').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next().find('.panel').velocity({
			marginLeft: 20,
			marginRight: 20,
			opacity: 0.5
		}).velocity('reverse', {
			delay: 1000,
	    	complete: function() {
	    		$(this).removeAttr('style');
	    	}
		})
	});


	// Chained animation
	$('.velocity-chained').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next().find('.panel').velocity({
			marginLeft: 20
		}).velocity('reverse', {
			delay: 1000
		}).velocity({
			marginRight: 20 
		}).velocity('reverse', {
			delay: 1000
		}).velocity({
			opacity: 0.5
		}).velocity('reverse', {
			delay: 1000,
	    	complete: function() {
	    		$(this).removeAttr('style');
	    	}
		})
	});


	// Stagger animation
	$('.velocity-stagger').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next().find('.panel').velocity('transition.slideUpIn', {
			stagger: 500
		});
	});


	// Drag animation
	$('.velocity-drag').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next().find('.panel').velocity('transition.slideUpBigIn', {
			duration: 1000,
			drag: true
		});
	});


	// Backwards animation
	$('.velocity-backwards').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next().find('.panel').velocity('transition.slideDownOut', {
			stagger: 400,
			backwards: true
		})
	    .velocity({ opacity: 1 }, {
	      duration: 500,
	      display: "block"
	    });
	});



    // Animation callbacks
    // ------------------------------

	// Begin callback
	$('.velocity-begin').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next('.row').velocity({
			marginLeft: 20,
			marginRight: 20,
			opacity: 0.5
		}, {
			begin: function() {
				alert('Begin callback example');
			}
		}).velocity('reverse', {
			delay: 1000,
	    	complete: function() {
	    		$(this).removeAttr('style');
	    	}
		})
	});


	// Complete callback
	$('.velocity-complete').on('click', function (e) {
		e.preventDefault();

		$(this).parent().next('.row').velocity({
			marginLeft: 20,
			marginRight: 20,
			opacity: 0.5
		}, {
			complete: function() {
				alert('Complete callback example');
			}
		}).velocity('reverse', {
			delay: 1000,
	    	complete: function() {
	    		$(this).removeAttr('style');
	    	}
		})
	});


	// Progress callback animation
	$('.velocity-progress').on('click', function (e) {
		e.preventDefault();

		var $percentComplete = $("#percentComplete"),
		    $timeRemaining = $("#timeRemaining");

		$(this).parent().next('.row').velocity({
			marginLeft: 20,
			marginRight: 20,
			opacity: 0.5
		}, {
			duration: 1000,
			progress: function(elements, percentComplete, timeRemaining, timeStart) {
				$percentComplete.html(Math.round(percentComplete * 100) + "% complete.");
				$timeRemaining.html(timeRemaining + "ms remaining.");
			}
		}).velocity('reverse', {
			delay: 1000,
	    	complete: function() {
	    		$(this).removeAttr('style');
	    	}
		})
	});



    // Animate layout on page load
    // ------------------------------

	// Hide elements first
	$(".sidebar, .navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
		.css('opacity', 0);


	// Animate when Pace loading is done
    Pace.on('done', function () {

		// Layout parts
		$(".navbar, .navbar-brand, .navbar-text, .navbar-nav > li, .page-header, .page-title, .page-header .heading-elements, .breadcrumb, .breadcrumb-elements > li, .content > .panel, .content .row > [class*=col-], .footer")
			.css('opacity', 1)
			.velocity("transition.slideDownIn", {
				stagger: 200,
				duration: 200,
				complete: function(elements) {
					$(this).removeAttr('style');
				}
		});


		// Sidebar
		$(".sidebar")
			.css({opacity: 0, borderColor: 'transparent'})
			.velocity("transition.slideUpIn", {
				delay: 100,
				duration: 500,
				display: 'table-cell',
				complete: function(elements) {
					$(this).removeAttr('style');
				}
		});


		// Navigation list on load
		$(".navigation > li")
			.css('opacity', 0)
			.velocity("transition.slideLeftIn", {
				delay: 500,
				stagger: 75,
				duration: 200,
				complete: function(elements) {
					$(this).removeAttr('style')
				}
		});


		// Navigation list on click
		$(".navigation .has-ul").on('click', function() {
			if ($(this).parent('li').hasClass('active')) {
				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.fadeIn", {
					delay: 150,
					stagger: 30,
					duration: 200,
					complete: function(elements) {
						$(this).removeAttr('style')
					}
				});
			} else {
				$(this).next('ul').children('li').css('opacity', 0).velocity("transition.slideLeftOut", {
					duration: 200,
					complete: function(elements) {
						$(this).removeAttr('style')
					}
				});
			}
		});
    });

});