Skills loading

CCristianSep 22, 2016

How do I make this skills meniu to display the animation start automatically when user comes on the page not when the user scrolls :
<ul class="skills">
<h4>Aptitudini</h4>
<li data-percent="60">
<span>Google AdWords</span>
<div class="progress">
<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="80" data-to="60" data-refresh-interval="30" data-speed="1000"></span>%</div></div>
</div>

<li data-percent="80">
<span>SEO</span>
<div class="progress">
<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="80" data-to="80" data-refresh-interval="30" data-speed="1000"></span>%</div></div>
</div>

<li data-percent="70">
<span>Facebook Marketing</span>
<div class="progress">
<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="0" data-to="70" data-refresh-interval="30" data-speed="1000"></span>%</div></div>
</div>

<li data-percent="80">
<span>Consultanta Online</span>
<div class="progress">
<div class="progress-percent"><div class="counter counter-inherit counter-instant"><span data-from="0" data-to="80" data-refresh-interval="30" data-speed="1000"></span>%</div></div>
</div>

SSemicolon WebSTAFFSep 24, 2016

Hello,

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

element.appear( function(){
	if (!skillsBar.hasClass('skills-animated')) {
		element.find('.counter-instant span').countTo();
		skillsBar.find('.progress').css({width: skillValue + "%"}).addClass('skills-animated');
	}
},{accX: 0, accY: -120},'easeInCubic');

and replace it with:

if (!skillsBar.hasClass('skills-animated')) {
	element.find('.counter-instant span').countTo();
	skillsBar.find('.progress').css({width: skillValue + "%"}).addClass('skills-animated');
}

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