Search the Community

My square animation will run out of the box from the original div that I set up, could someone show me how to fix it? When second times the animation circle start, all squares turn into 30 degree and don't turn back to the place where they were. Also, the x and y axis placed in the wrong spots,too. How do I reset rotation and x , y position before loops begin? <script type="text/javascript"> function myOverFunction() { var $p1box = $('#p1box'), $p1box2 = $('#p1box2'), $p1box3 = $('#p1box3'), $boxes = $('.p1box'), tl = new TimelineLite({}); tl.staggerFrom($boxes, 1, { y: '-=40', autoAlpha: 0, ease: Power4.easeInOut }, 0.5) .staggerTo($boxes, 1, { x: -250, autoAlpha: 0, ease: Power4.easeInOut, clearProps: 'x' }, 0.5) .staggerFromTo($boxes, 1, { y: '+=40', immediateRender: false }, { rotation: 30, transformOrigin: 'top right', autoAlpha: 1, ease: Power4.easeInOut }, 0.5); //p1box end } </script> <div class="container" onmouseover="myOverFunction()"> <div class="divider"></div> <section class="bg-1" id="section1"> <div class="row"> <div class="page-header text-center"> <h1>フェイスタオル & バスタオル & ハンドタオル</h1> </div> <div id="p1box" class="p1box"> <img src="./images/catalogs/Woolenblanket1.gif" width="200" height="200" alt="★"> </div> <div id="p1box2" class="p1box"> <img src="./images/catalogs/Woolenblanket2.gif" width="200" height="200" alt="★"> </div> <div id="p1box3" class="p1box"> <img src="./images/catalogs/Woolenblanket3.gif" width="200" height="200" alt="★"> </div> <div id="p1box4" class="p1box"> <img src="./images/catalogs/Woolenblanket4.gif" width="200" height="200" alt="★"> </div> <div id="logo"> <img src="./images/logo.png" width="55" height="55" alt="★"> </div> </div> <div class="col-xs-6 col-xs-offset-6"> <a href="http://www.tucows.com"> <button type="button" class="btn btn-primary btn_right_bottom">products</button> </a> </div> </section> .btn_right_bottom { position: relative; float: right; margin-top: 100px; margin-right: 0px; } .p1box { background-color: #88ce02; position: absolute; width: 200px; height: 200px; transform: translate(100px, 50px); z-index: 1; } #p1box2 { transform: translate(350px, 50px); } #p1box3 { transform: translate(600px, 50px); } #p1box4 { transform: translate(850px, 50px); } this is my demo screen http://i1210.photobucket.com/albums/cc408/idarfan/2015-09-24%2015h09_38.gif index.html bootstrap.min.css styles.css