Canvas Support

Animated pie charts in slider

3 replies · opened Oct 7, 2016

IinertiahzOct 7, 2016

I am trying to put some animated pie charts in the flex slider. Is there a way of stopping the pie charts animating until the slide is in focus?

Thank you.

SSemicolon WebSTAFFOct 12, 2016

Hello,

This is Definitely Possible. Please find the following code in the js/functions.js File: 

element.css({'width':roundSkillSize+'px','height':roundSkillSize+'px','line-height':roundSkillSize+'px'}).animate({opacity:0}, 10);
element.appear( function(){
	if (!element.hasClass('skills-animated')) {
		var t = setTimeout( function(){ element.css({opacity: 1}); }, 100 );
		SEMICOLON.widget.runRoundedSkills( element, properties );
		element.addClass('skills-animated');
	}
},{accX: 0, accY: -120},'easeInCubic');

and replace it with: 

element.css({'width':roundSkillSize+'px','height':roundSkillSize+'px','line-height':roundSkillSize+'px'});
SEMICOLON.widget.runRoundedSkills( element, properties );

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

IinertiahzOct 17, 2016

Hi,

All that does is not have the pie charts animate. I want them to animate but only when the slide is visible.

SSemicolon WebSTAFFOct 18, 2016

Hello,

We Really Apologize about the misunderstanding! Unfortunately, this currently is not supported Out of the Box and will require some JS Customization. We will definitely try implementing this in the next 48 hours and will get back to you. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard