Support Forum

For all questions related to themes and plugins!

Enter search keyword e.g. "footer color".

  • Registration is Required

    Registration is required to post questions to support forum. ThemeForest buyers also need to obtain Purchase code to be able to post on forum.

    Please read here how to obtain Purchase code.

#2293
Robert Kavgić
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