Scroll to active field in form (typeform style animation) using velocity.js

typeform-velocity.js

// Insert into some kind of 'focus' action

var parent = $(this).parent().parent('.fieldWrap'); // Target a wrapper

// Reset active state
$('.fieldWrap').removeClass('active');

// Add active state to current field
parent.addClass('active');

var fieldHeight = parent.outerHeight();
var windowHeight = $(window).height();
var scrollOffset = (windowHeight - fieldHeight)/2;

parent.velocity('scroll', {
  duration: 300,
  offset: -scrollOffset,
  easing: 'easeOutSine'
})