How to use a JavaScript animation effect inside a loop?

Question

I'm trying to add a JavaScript animation effect using the wow.js so I initialize it:

<head>
  <link rel="stylesheet" href="css/animate.css">
  <script src="js/wow.min.js"></script>
  <script>
     new WOW().init();
  </script>
</head>

and I placed the class effect(wow slideInRight) inside my div:

<div class="row row-sm padder-lg ">

        <?php
        foreach ($top->tracks->track as $key => $value) 
        {
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[3]->text;
                if($image == '')
            $image = $value->image[2]->text;
                if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        ?>       
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <div class="item wow slideInRight">
                <img style="background:url('<?php echo $image; ?>')"/>  
            </div>
        </div>
        <?php
        }
        ?>
</div>

The problem is that instead of showing the effect for each single item, this JavaScript shows the effect at the same time for all the items. What's the right way to use this JavaScript on a loop?

uraimo · Accepted Answer · 2015-03-17T13:36:13.427

1

WOW.js initialization should be put at the end of your <body> not in <head>, something like this:

   <script src="js/wow.min.js"></script>
   <script>
     new WOW().init();
   </script>
  </body>
</html>

Other than this, remember that wowjs starts animation when you reach the objects while scrolling, all your item are on the same row so at the same height, it's correct that the animations start all together.

If you need that they start in sequence (i.e. the left-most first and then the others going on until you reach the last one on the right) add a proper data-wow-delay="<number_of_seconds>s" to you divs, with and increasing number_of_seconds.

EDIT:

You can do something along these lines:

<div class="row row-sm padder-lg ">

        <?php

        $delay=0;

        foreach ($top->tracks->track as $key => $value) 
        {
            if($key >= $this->config->item("items_top"))
                return false;
            $image = $value->image[3]->text;
                if($image == '')
            $image = $value->image[2]->text;
                if($image == '')
            $image = base_url()."assets/images/no-cover.png";
        ?>       
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <div class="item wow slideInRight" data-wow-delay="<?php echo $delay; ?>s">
                <img style="background:url('<?php echo $image; ?>')"/>  
            </div>
        </div>
        <?php
            $delay+=0.5;
        }
        ?>
</div>

Is this what you needed?

edited Mar 17 '15 at 13:36

answered Mar 17 '15 at 13:03

uraimo

19,081
8
48
55

but how could I use this on a loop? The delay data I mean – NineCattoRules Mar 17 '15 at 13:31
after my try...the wow.js must be initialized before the loop otherwise it doesn't work, but the main problem is that on scrolling down no items are shown, and I don't understand the reason. – NineCattoRules Mar 17 '15 at 15:06
1

Nope, i've never tried putting it inside head, but it could work, don't know. Why do you put the image as background of img and not just as `src=""`? If you put it as background you should also set width and height in that style... otherwise you'll get an image with size 0,0. Try using src, more straightforward in my opinion or setting width and height(and maybe display:block too). – uraimo Mar 17 '15 at 15:15
I was referring to `new WOW().init();` &co. Btw, you have nothing against it, use src="" instead of styling the img tag. – uraimo Mar 17 '15 at 15:24
Nothing has changed...all items are hidden and not reveal on scroll down – NineCattoRules Mar 17 '15 at 15:38
What does that "item" class do? – uraimo Mar 17 '15 at 15:41
only this `` ...the `$image` is an album picture from itunes feeds – NineCattoRules Mar 17 '15 at 15:45
1

Check this fiddle: https://jsfiddle.net/e1varnL8/ , ignore the wrong placement, it's jsfiddle fault, but the images are animated with the right timing. Are you using chrome? Can you open developer tools, do a right click, Inspect Element and verify if you have a display:none on that div or img? – uraimo Mar 17 '15 at 16:08
1

This thing must work. There is something wrong in that boatload of style, one of them is hiding or resizing to 0 the div or the img. – uraimo Mar 17 '15 at 16:09
1

Please also check the html generated by that php to see if there is something unexpected, checking just the source php makes no sense, what matter is the generated html. A maybe while you are trying to solve this, remove some less useful style, like r, r-2x, img-full, to verify that they are not the cause of this. – uraimo Mar 17 '15 at 16:12
as I wrote before, all items are retrieved but I can see only those inside my window, when I scroll down all others are display:hidden – NineCattoRules Mar 17 '15 at 16:12
1

Try this: http://pastebin.com/9fWaHYzt , does this do what you'd like to see? scroll a bit... – uraimo Mar 17 '15 at 16:22
Regarding the divs remaining hidden, that the initial status and then the js of wow displays them once they are reached while scrolling, it's nothing complicated. But you must be 100% sure that there are no other styles that are hiding the img o its enclosing div. – uraimo Mar 17 '15 at 16:27

How to use a JavaScript animation effect inside a loop?

1 Answers1