Animation with greensock, JS

Hi dcooney,
Great job with your plugin,i love it. Everything is working perfectly. There is only one problem i got into. I am trying to do some complex animation with greensock script. But I just cant figure out how to get my posts in repeater work with me.

Ive noticed that you pointed many users trubled with JS to work with

jQuery(document).on('click', 'a.video-page-play', function(){
// Code here
});

In my case i just cant figure it out. Appreciated any help.

JS

$(".portfolio-box").each(function(index, element) {
            var tl = new TimelineLite({
                paused: true
            });
            tl.fromTo($(this).find(".portfolio-box-caption"), 0.2, {
                opacity: 0,
                zindex: "30",
                transformOrigin: "center center",
                top: "43%",
                scale: 2,
                ease: Power3.easeInOut
            }, {
                opacity: 1,
                zindex: "30",
                transformOrigin: "center center",
                top: "43%",
                scale: 1,
                ease: Power3.easeInOut
            }).to($(this).find("#img1"), .5, {
                opacity: 0,
                zindex: "30",
                top: 80,
                scale: 1.8,
                ease: Power2.easeInOut
            })
            element.animation = tl;
        })
        // Portfolio Hover action Animation
    $(".portfolio-box").hover(over, out);

 function over() {
        this.animation.play();
    }
    function out() {
        this.animation.reverse();
    }
});

Repeater

<?php
global $post;
$url = get_post_meta($post->ID, 'url', true);
$thumbnail_id = get_post_thumbnail_id();
$thumbnail_url = wp_get_attachment_image_src( $thumbnail_id,'thumbnail-size',true );
$overlayimg= get_post_meta(get_the_ID(), 'background', true);

$terms = get_the_terms(get_the_ID(), 'category_portfolio' );
            if ($terms && ! is_wp_error($terms)) :
            $term_slugs_arr = array();
            foreach ($terms as $term) {
            $term_slugs_arr[] = "<span class='tag'>".$term->slug."</span>";
            }
            $terms_slug_str = join( " ", $term_slugs_arr);
            endif;
?>
<aritcle class="col-md-4 col-xs-6 portfolio-box no-padding  <?php if (!has_post_thumbnail()) { ?> class="no-img"<?php } ?>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" id="box-<? the_ID();?>" data-toggle="modal"  data-target="#modal<? the_ID();?>" >
            <img id="img1" src="<?php echo $thumbnail_url[0];?>" alt="<?php echo the_title;?>" />
            <img id="img2" src="<?php echo $overlayimg['guid'];?>" alt="<?php echo the_title;?>" />
            <div class="portfolio-box-caption" id="<?php echo $url;?>">
                <ul class="list-unstyled">
                    <li>
                        <h3> <?php the_title();?></h3>
                    </li>
                    <li class="url">
                        <?php /*
                        if (isset($url)){ ?>
                        <a href="http://www.<?php echo $url;?>"><?php echo $url;?></a>
                        <?php } */?>
                    </li>
                    <li class="cat">
                        <?php echo $terms_slug_str; ?>
                    </li>
                </ul>
            </div>
            <?php// the_excerpt(); ?>
            </a>
            </aritcle>
            <?php 

	// POP UP MODAL WINDOW
            ?>
            <div id="modal<?php the_ID(); ?>" class="modal  fade ">
                <div clas="container ">
                    <div class="col-md-8  pull-right  no-padding bg_white">
                        <div class="row">
                            <div class="col-md-10 col-xs-10 col-md-push-1 col-xs-push-1 text-justify">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button>
                                    <h3 id="myModalLabel"><?php the_title(); ?></h3>
                                </div>
                                <div class="modal-body ">
                                    <!-- remote content will be inserted here via jQuery load() -->
                                    <?php
                                    the_content();
                                    ?>
                                </div>
                                <div class="container-fluid">
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 text-center modal-footer">
                            <div class="container-fluid text-center">
                                  <ul class="list-unstyled">
                                        <li role="separator" class="divider"></li>
                                        <li><h4>Rádi by jste zrealizovali podobný projekt?</h4></li>
                                        <li role="separator" class="divider"></li>
                                        <li>
                                        <a href="" class="btn btn-default btn-inkluna-full" btn-md title="<?php the_title(); ?>" id="box-"<? the_ID();?>"" data-toggle="modal"  data-target="#modal<? the_ID();?>" >
                                    <strong>Pojďme do toho společně</strong>
                                </a>

                                        </li>
                                        <li>
                                        <br />
                                        <?php echo do_shortcode("[miniorange_social_sharing]");?>
                                        </li>
                                    </ul>
                            </div>
                        </div>
                    </div>
                </div>
                            </div>

https://wordpress.org/plugins/ajax-load-more/