Apply animation while loading multiple divs

Question

I want to apply animation using either css or JQuery while loading divs.

The divs get loaded this way:

<div>
    <blog_topic_title each="{item , i in data.blogTopicsArr}" index={i} id={item.article_id} topic={item}></blog_topic_title>
</div>

Data:

this.data.blogTopicsArr = [1,2,3];

On page load, we see that there are 3 items in the array, so three tags are created like this:

<blog_topic_title>{opts.topic}</<blog_topic_title>
<blog_topic_title>{opts.topic}</<blog_topic_title>
<blog_topic_title>{opts.topic}</<blog_topic_title>

While the above three divs are created inside the loop, I want to pass in some animation using css or JQuery while looping so it looks like this: https://codepen.io/elmahdim/pen/sGkvH or may be some thing similar.

I tried applying css animation using transitions, but unable to get effect like in the link.

Answer 1

You can use **[wow.js][1]** for this purpose.

  [1]: http://mynameismatthieu.com/WOW/

<blog_topic_title  class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">{opts.topic}</<blog_topic_title>
<blog_topic_title  class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10">{opts.topic}</<blog_topic_title>
<blog_topic_title class="wow bounceInUp">{opts.topic}</<blog_topic_title>