Velocity experiments

// Velocity Animation

function initVelocity () {
	
	var  pos = 0,
	delay = 200,
 	delayLong = 400,
 	duration = 500,
 	home = $('.is-front-page');
 	landing = $('.page-we-do-landing, .page-we-are-landing');
  
 	// front page 
     
 	if (home.length) {
     
      //home.find('.process-item, .venn-item').css('opacity', 0);

      	$('.banner').find('.content').velocity({
            opacity: [1, 0],
            translateY: [0, '-15px']
        }, duration);
        
        // how to chain this animation to start only once above is finished? 
        
        $('.banner').find('aside').delay(pos++ * delayLong).velocity ({
             opacity: [1, 0],
            translateY: [0, '-15px']
        }, duration);
        
		/*
		$('#offcanvas').velocity({ 
		        translateX: 0
		    }, {
		        duration: 300,
		    }, function() {
		    $('.widgets').VelocityJS({
		        translateX: 0,
		        opacity: 0
		    }, {
		        duration: 300,
		    }, function() {
		        $('#close').VelocityJS({
		            translateY: 0,
		        rotateZ: 0
		        }, {
		            duration: 150
		        });
		  });
		});
		*/
        
        // what exaclty is going on here?
        // .delay(pos++ * delay)
       
        $('.process-wrapper').waypoint(function() {

            $(this.element).find('.process-item').each(function() {
                $(this).delay(pos++ * delay).velocity({
                    opacity: [1, 0],
                }, duration)
            });

            this.destroy()
        }, {
            offset: '85%'
        }); 
        
        // how to target each item individually (but in sequence)?
        // and add easing?
        
        $('.our-approach').waypoint(function() {
            
            $(this.element).find('.venn-item').each(function() {
                $(this).delay(pos++ * delay).velocity ({
                    opacity: [1, 0, ['spring'] ],
                    scale: [1, 0.9],
                }, duration)
            });

            this.destroy()
        }, {
            offset: '85%'
        });  
                                
    }
     
    // landing pages
     
    if (landing.length) {
	      
		landing.find('section.col').css('opacity', 0);
		
		$('.banner').find('.content').velocity({
		    opacity: [1, 0],
		    translateY: [0, '-15px']
		}, duration);
		
		$('.services-grid-wrapper').waypoint(function() {
		
		    $(this.element).find('section.col').each(function() {
		        $(this).delay(pos++ * delay).velocity({
		            opacity: [1, 0],
		        }, duration)
		    });
		
		    this.destroy()
		}, {
		    offset: '85%'
		}); 
    }
}