how to stop google swiffy animation on click of a button

Question

I am using https://www.gstatic.com/swiffy/v5.4/runtime.js for some animation in website with play and skip button.All is working fine but now I need a skip button such that when I click it the animation or the above js which I am loading should stop. I just am not able to stop the animation. How am I supposed to do this. I tried the following.

<script type="text/javascript">
    var stage = '';
    $('div#processing_load').hide();
    $(document).on('click', 'div#play', function(){
        $(this).hide();
        $('div#stop').css('display', 'block');
        $('div#processing_load').show();
        var url = 'https://www.gstatic.com/swiffy/v5.4/runtime.js';
        $.getScript(url)
            .done(function(){
                $('div#processing_load').hide();
                $('#swiffycontainer').css('display', 'block');
                $('.landing-banner').css('display', 'none');
                stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
                stage.start();
                stage.setBackground(null); 
            })
    })
    $(document).on('click', 'div#stop', function(){
        $(this).hide();
        $('div#play').css('display', 'block');
        stage.stop();
    })
</script>

any help and or suggestion is welcome.Thanks in advancce.

Answer 1

I also wanted to to play pause the animation

so i edited the runtime.js

I added function name is "myfun" in runtime.js

so you can refer

You can download the example here.

thanks

And let me know if it worked for you or not

Answer 2

You can use stage.destroy(); to kill it completely, but in order to pause/resume you would need to edit the runtime as suggested by pareshm.

Note that editing the runtime is not reliable if future updates are a concern as the swiffy code is obfuscated anew on each release.