How to start the animation only when the circle appears in browser's view (on scrolling)?

[asif-jalil]

How can i animate circle while scrolling down to page ? My page is quite long and this plugin come just above the footer, but it animate, when page loads and when scroll down, can not see the circle progress effect ?

[christopher-alves-dev]

I have the same doubt! Want the progressBar start the animation when it appears on the screen.

[roryaherne]

You would need to use an Intersectional Observer

[dearsina]

If you're using jQuery, have a look at the jquery-appear plug-in. It will achieve what you're looking for.

[asif-jalil]

@dearsina

If you're using jQuery, have a look at the jquery-appear plug-in. It will achieve what you're looking for.

I saw the plugin. But i don't understand how to integrate with it. Can you write me the code i need?

[dearsina]

Try something like this:

    // Enable element's appearance to be a triggering event
    $.appear('.progress-bar-class-name');

    // Set up a listener to the load-more-button appearing
    $('.progress-bar-class-name').on('appear', function(event, all_appeared_elements) {
        //Put your progressbar initiate code here. Will only trigger once the bar is visible.
    });

[asif-jalil]

Try something like this:

    // Enable element's appearance to be a triggering event
    $.appear('.progress-bar-class-name');

    // Set up a listener to the load-more-button appearing
    $('.progress-bar-class-name').on('appear', function(event, all_appeared_elements) {
        //Put your progressbar initiate code here. Will only trigger once the bar is visible.
    });

I am failed to work with it.

[dearsina]

This may not be the right forum for it, perhaps ask a question on StackOverflow and list what you tried and what errors you're getting. Feel free to tag me and I will try to help.

[nicolaskopp]

Like this using sal:

import sal from 'sal.js'
    if (document.querySelector('.progress-circle') != null) {

        sal({
            selector: '.progress-circle'
        });

        document.addEventListener('sal:in', ({ detail }) => {
            let circle = new ProgressBar.Circle(detail.target, {
                // options...
                }
            });

            circle.animate();
        });
    }