idarfan

hi Carl thank you find out the problem for me, save my weekend.

hi Carl forget the codepen , have you saw the picture on my web site ? please watch it. http://s1210.photobucket.com/user/idarfan/media/2015-09-24%2015h09_38.gif.html this codepen is worked but why?! its can't work smooth on my website? and I already offer parts of javascript and css and html on my website. so difficult that you do not see it? and now, I rewrite my codepen http://codepen.io/idarfan/pen/zvKErM 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 loop 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?

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

oh yes it's worked thank Diaco.

hi all ~~ It seems that the program can not match even box could someone tell me how to fix this? thanks

yes. but hard to find out where got wrong, after your sample code . I got it work and thank you

hi dude~ I follow this sample and I want run it on .staggerTo too. but looks like my code got some wrong. could someone help me ? and thanks

hello Diaco thank you. its worked.

The first roll of the box effect is falling down, and the second roll of box effect is floating up. It looks like only second roll of texts has been done. How can I fix this problem? and how do I mark the box begin postion

thanks for answer I did it already.

hi there~~ all I want just repeat all. but I havd no idea, how to make all items repeat at same time. gsap2timeline.html

sorry, but this issue solved and thank anyway

yes it's works like charm, thank you

I have try to embed this to my webpage but its can't work with my webpage. always change my ohter li make they Disappear index.html bootstrap.min.css styles.css