Private: Home › Forums › HTML Templates › Mixed Modern and Professional HTML Template › Start Pie Chart Animation When Visible › Reply To: Start Pie Chart Animation When Visible
February 26, 2015 at 8:36 pm
#2293
Participant
Hello,
To start the animation on browser scroll, you will have to use waypoints.
Find the following jQuery code at the bottom of your .html file where you display the pie charts (inside of the <script>
tag):
if (jQuery('.easy-pie-chart').length) {
$('.easy-pie-chart').each(function () {
var $this, $parent_width, $chart_size, height;
$this = $(this);
$parent_width = $(this).parent().width();
$chart_size = $this.attr('data-size');
if ($parent_width < $chart_size) {
$chart_size = $parent_width;
}
height = parseInt($chart_size) + 30;
$this.css('line-height', $chart_size + "px");
$this.css('height', height + "px");
$this.easyPieChart({
animate: 1300,
lineCap: 'butt',
lineWidth: $this.attr('data-lineWidth'),
size: $chart_size,
barColor: $this.attr('data-barColor'),
trackColor: $this.attr('data-trackColor'),
scaleColor: 'transparent',
onStep: function (from, to, value) {
$(this.el).find('.percent-container .percent').html(Math.ceil(value) + "%");
var $info = $(this.el).find('.info');
$info.css("margin-left", -($info.width() / 2));
}
});
});
}
var canvas_width = $('.easy-pie-chart canvas').width();
$('.easy-pie-chart canvas').css('margin-left', -canvas_width / 2);
Replace the whole code with the following one:
if (jQuery('.easy-pie-chart').length) {
$('.easy-pie-chart').each(function () {
var $this, $parent_width, $chart_size, height;
$this = $(this);
$parent_width = $(this).parent().width();
$chart_size = $this.attr('data-size');
if ($parent_width < $chart_size) {
$chart_size = $parent_width;
}
height = parseInt($chart_size) + 30;
$this.css('line-height', $chart_size + "px");
$this.css('height', height + "px");
$('.easy-pie-chart').waypoint(function() {
$this.easyPieChart({
animate: 1300,
lineCap: 'butt',
lineWidth: $this.attr('data-lineWidth'),
size: $chart_size,
barColor: $this.attr('data-barColor'),
trackColor: $this.attr('data-trackColor'),
scaleColor: 'transparent',
onStep: function (from, to, value) {
$(this.el).find('.percent-container .percent').html(Math.ceil(value) + "%");
var $info = $(this.el).find('.info');
$info.css("margin-left", -($info.width() / 2));
}
});
var canvas_width = $('.easy-pie-chart canvas').width();
$('.easy-pie-chart canvas').css('margin-left', -canvas_width / 2);
}, {
triggerOnce: true,
offset: 'bottom-in-view'
});
});
}
The pie charts should now be animated once you scroll to them.
Robert