Running animation using parent div using WOW.js

Question

I have a parent DIV (.wrap) with several images that fadeIn use WOW.js / Animate.css.

Each image is positioned Absolute in different places.

I was wondering if there is a way to initiate all animations inside the parent DIV using the parental DIV offset rather than the offset of each individual image.

<div class="wrap">

    <div class="calculator">
        <div class="wow fadeInDown" data-wow-delay="600ms" data-wow-offset="200">
            <img src="img/overlay-calculator.png" alt="">
        </div>
    </div>

    <div class="coffee">
        <div class="wow fadeInDown" data-wow-delay="800ms" data-wow-offset="200">
            <img src="img/overlay-coffee.png" alt="">
        </div>
    </div>

    <div class="file1">
        <div class="wow fadeInUp" data-wow-delay="1200ms" data-wow-offset="200">
            <img src="img/overlay-file-1.png" alt="">
        </div>
    </div>

    <div class="file2">
        <div class="wow fadeInUp" data-wow-delay="600ms" data-wow-offset="200">
            <img src="img/overlay-file-2.png" alt="">
        </div>
    </div>

    <div class="keyboard">
        <div class="wow fadeInDown" data-wow-delay="100ms" data-wow-offset="200">
            <img src="img/overlay-keyboard.png" alt="">
        </div>
    </div>

    <div class="marker">
        <div class="wow fadeInUp" data-wow-delay="1200ms" data-wow-offset="200">
            <img src="img/overlay-marker.png" alt="">
        </div>
    </div>

    <div class="mobile">
        <div class="wow fadeInUp" data-wow-delay="1000ms" data-wow-offset="200">
            <img src="img/overlay-mobile.png" alt="">
        </div>
    </div>

    <div class="mouse">
        <div class="wow fadeInDown" data-wow-delay="500ms" data-wow-offset="200">
            <img src="img/overlay-mouse.png" alt="">
        </div>
    </div>
</div>

Answer 1

WowJs does not start when the parent div appears in ViewPort.you cannot do this with WowJs. using the ScrollMagicJs library, you can easily execute a trigger when the parent div appears in the ViewPort.