My current script includes a fadeIn effect on a div when the user scrolls 200px from the top, along with custom circle animations. While it works, I admit it's not the most elegant solution as I had to piece together different scripts to make it function smoothly.
This is my script:
$(window).scroll(function() {
if ($(this).scrollTop() > 200){ // 235
$('.hideme').fadeIn(2000);
}
$('.first.circle').circleProgress({
value: 1,
startAngle: -Math.PI / 1 * 1,
fill: {gradient: [['#ff6600', .3], ['#f2833a', .7]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').html(Math.abs(36 * progress).toFixed(0) + '');
});
$('.second.circle').circleProgress({
fill: {gradient: ['#0681c4', '#0681c4']},
startAngle: -Math.PI / 1 * 2,
value: 1
}).on('circle-animation-progress', function(event, progress) {
$(this).find('strong').html(Math.round(160 * progress) + '');
});
$('.third.circle').circleProgress({
startAngle: -Math.PI / 3 * 3,
value: 1,
fill: {gradient: [['#09c109', .9], ['#298e29', .1]], gradientAngle: Math.PI / 4}
}).on('circle-animation-progress', function(event, progress, stepValue) {
$(this).find('strong').html(Math.abs(9.4 * progress).toFixed(1) + '');
});
})
The issue I'm facing is that the script repeats itself even with minor scroll movements, and I can't pinpoint what's causing this recurring behavior. How can I prevent this?
I've searched through Stackoverflow for solutions but none seem effective in resolving the problem. Does anyone have an alternative script that achieves the same result?
All I want is for the div .hideme to fade in when it enters the viewport of the page and then initiate the circle animation. Any assistance would be greatly appreciated!