Reply To: Start Pie Chart Animation When Visible

[Robert Kavgić]

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