Adding Outview Animation causes unusual behaviour

Wappler General Bugs
1

Wappler 7 B 17
Windows 11
NodeJS

What actually happens?

With Inview Animation already in place, I want to add the Outview Animation event.

This is what happens when I add Outview Animation:

2

Is this in design view only or also in the browser?
Does the problem exist if you scroll the page a bit?
Is this only happening on this page and on this element?

3

I quickly checked using a simpler layout as in:

<section dmx-animate-inview="fadeInUp" dmx-animate-outview="">
    <div class="container mt-5">
        <div class="row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h2 class="card-title text-center mb-4">Card title</h2>
                        <img class="card-img-top mb-4" alt="Card image cap">
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

It shows in both, design view and browser. In the browser if the height of the browser is slightly more than the height of the section.

As you can see, it is not the original page that this is happening on, it also happens in this test project.

5

Ok but you don't have any outview animation set. Does this happen if you adjust the outview animation settings?

Also - i tested the code you pasted and see no such issues, probably it's something related to the specific page layout you're working on.

6

Not sure what else to say, no extra code in the layout page and have added the outview value.