There are several jQuery-Plugins to check if an element is scrolled into view, e.g. jquery.inview.
Example Setup:
<input type='text' class='dial' value='0' data-number='100' />
<div style="height: 300px">scroll down</div>
<div class="startKnob">start</div>
Initialize the knob and write a function for the animation. Just bind inview
to the element that's out of the viewport and should start the animation as soon as it's in view.
$(function () {
$('.dial').knob({
min: '0',
max: '100',
readOnly: true
});
});
startKnob = function() {
$('.dial').animate({
value: $('.dial').data('number')
},{
duration: 950,
easing: 'swing',
progress: function () {
$('.dial').val(Math.round(this.value)).trigger('change');
}
});
}
$('.startKnob').bind('inview', startKnob);
Working example here: Start knob animation when specific element is in view