Vanta.js animation stops on scroll-CodePudding

I am using Vanta.js (https://www.vantajs.com/?effect=birds) library and I am able to run it in my code. However, the animation effect pauses when I scroll down the page. Why does this happen and can I fix this?

        VANTA.BIRDS({
            el: "#intro",
            mouseControls: true,
            touchControls: true,
            gyroControls: true,
            minHeight: 1920.00,
            minWidth: 1080.00,
            scale: 1.00,
            scaleMobile: 1.00,
            color1: 0xde0707,
            color2: 0x7c0eb,
            birdSize: 0.60,
            separation: 14.00,
            alignment: 26.00,
            backgroundAlpha: 0
        })

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My first vanto.js app</title>
</head>

<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
  
<div  id="intro">

</div>

</body>

</html>

CodePudding user response：

I just added a forceAnimate option. If you set that to true, it'll always animate.

I think it will help you:

    VANTA.BIRDS({
                el: "#intro",
                mouseControls: true,
                touchControls: true,
                gyroControls: true,
                forceAnimate: true,
                minHeight: 1920.00,
                minWidth: 1080.00,
                scale: 1.00,
                scaleMobile: 1.00,
                color1: 0xde0707,
                color2: 0x7c0eb,
                birdSize: 0.60,
                separation: 14.00,
                alignment: 26.00,
                backgroundAlpha: 0
            })

<!-- language: lang-html -->

    <!DOCTYPE html>
    <html>

    <head>
        <meta charset="utf-8">
        <title>My first vanto.js app</title>
    </head>

    <body>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
      
    <div  id="intro">

    </div>

    </body>

    </html>