Triggering animations with parent DIV using WOW.js

1.7k views Asked by At

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

Each image is positioned Absolute at different locations.

I was wondering if there is a way to trigger all animations inside the parent DIV using the parent DIV's 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>
1

There are 1 answers

0
HARDIK SHAH On BEST ANSWER

WowJs does not trigger when parent div is appear in ViewPort.you can't do this with WowJs. using ScrollMagicJs library you can easy to do trigger when parent div is appear in ViewPort.