Triggering animations with parent DIV using WOW.js

Question

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>

Upvoted. Did you find the answer to your question? – Vadim Feb 25 '15 at 06:18 — Vadim, Feb 25 '15 at 06:18

score 1 · Accepted Answer · answered Aug 09 '15 at 08:00

1

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.

answered Aug 09 '15 at 08:00

HARDIK SHAH

163
1
14

Triggering animations with parent DIV using WOW.js

1 Answers1