Load animation when I enter into the section

Question

I am using a skill progress in my site. It is a circular progress bar. It has a small animation when it loads, the effect is like fill up the border. but the animation runs immediately when the page load. I want to make a way if I scroll to that section only then the animation will run.

I am using the circliful plugin for the progress bar.

score 1 · Accepted Answer · edited May 23 '17 at 12:26

1

You need to initialize animation if the element is in viewport. Check isElementInViewport function on window scroll.

Sample js

function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );

}

var isAnimated = false;
window.onscroll = function(){
    if(isElementInViewport($('#myStat')) && !isAnimated){
        $('#myStat').circliful();
        isAnimated = true;
    }
}

How to tell if a DOM element is visible in the current viewport?

edited May 23 '17 at 12:26

Community

1
1

answered Dec 12 '15 at 13:52

Shishir Morshed

797
8
21

It is working but it is cloning each progress bar 3 times. What is the reason? Thanks – user3396867 Dec 12 '15 at 14:36
you need to check the element is already animated or not. if only not then run `$('#myStat').circliful();` – Shishir Morshed Dec 12 '15 at 14:43
how can i check if it is animated or now. the class of the element is .circlestat . with your If i scroll on that area the .circlestat is cloning multiple times. thanks – user3396867 Dec 12 '15 at 14:48
Great your new code working perfectly. Thank you very much for your help. – user3396867 Dec 12 '15 at 14:50

Load animation when I enter into the section

1 Answers1