I'm showing a circular progress bar that when animated spins around a circular axis from 0 - 1000 so if I set the function at 913 then it spins to 91.3% of the full circle. All this works great BUT it's low down on the page so I need it to start when it reaches the div holding it.
I have tried and here is what I have but at the moment the function does not even run.
$("body").scroll(function() {
var scrolledpx = parseInt($("body").scrollTop());
var p = $("#housePoints");
var offset = p.offset();
if(scrolledpx == offset.top )
{
// function for progress bar
var bar = new ProgressBar.Circle(oak, {
color: '#E44024',
// This has to be the same size as the maximum width to
// prevent clipping
strokeWidth: 4,
trailWidth: 1,
easing: 'easeInOut',
duration: 1400,
text: {
autoStyleContainer: false
},
from: { color: '#e3ebf7', width: 1 },
to: { color: '#E44024', width: 4 },
// Set default step function for all animate calls
step: function(state, circle) {
circle.path.setAttribute('stroke', state.color);
circle.path.setAttribute('stroke-width', state.width);
var value = Math.round(circle.value() * 1000);
if (value === 0) {
circle.setText('');
} else {
circle.setText(value);
}
}
});
bar.animate(0.913); // Number from 0.000 to 1.000
}
})
As I say, the ID of the container is #housePoints and I'd like this animation to run when it comes into view. Maybe even as far as it reaches the bottom of the div in view and their is some padding on the div of 100px top and bottom so might still run when just the top is reached and the user still misses it.
Thanks for any help. gb
