Support » Plugin: Powerful Gutenberg Blocks and Templates - Ghost Kit » Change speed of Progress Bar

  • Resolved vlidi

    (@vlidi)


    Hi nK, and congrats for this great plugin!
    I am trying to change the speed of progress bar animation (to make it slower).
    What should I target, and how?
    Thanks!

    • This topic was modified 2 months, 2 weeks ago by vlidi.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author nK

    (@nko)

    Hey.

    You can change it using custom CSS variables. https://ghostkit.io/docs/css-variables/

    See here used variable for transition https://github.com/nk-o/ghostkit/blob/master/src/gutenberg/blocks/progress/styles/variables.scss#L31

    Try to overwrite it. Example with 2 seconds transition duration:

    .ghostkit-progress {
        --gkt-progress__transition-duration: 2s;
    }
    

    Regards, nK.

    Hey nK, thanks!

    Unfortunately, I can’t make it work, and my fault I guess.

    The CSS you have sent doesn’t trigger anything (tried in GK Custom CSS block section, general GK CSS & JavaScript tab and in the main CSS sheet).

    Tried also to declare it as global variable in GK CSS & JavaScript tab like this:

    :root {
    –gkt-progress__transition-duration: 2s;
    }

    …and then to call it from the main CSS with this:

    .ghostkit-progress {
    transition-duration: var(–2s);
    }

    Surely I am doing something wrong.
    Can you point me in the right direction?

    Thanks again!

    Plugin Author nK

    (@nko)

    Hey.

    Ah, shame on me… You can’t change it with CSS. I’ll let you know how to change it when it will be possible in the next plugin update.

    Regards, nK.

    Plugin Author nK

    (@nko)

    Hey.

    In the latest version you can change counters duration using jQuery event. Example:

    jQuery( document ).on( 'prepareCounters.ghostkit', function( event, classObject, itemData ) {
        if ( 'ghostkit' !== event.namespace ) {
            return;
        }
    
        itemData.duration = 2000;
    } );
    

    Regards, nK.

    Thanks nK, good news!
    Just gave it a go, works great.
    Thanks for this nice plugin once again,
    cheers,
    vlidi

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.