Search code examples
jquerygoogle-swiffy

how to stop google swiffy animation on click of a button


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.


Solution

  • 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