Jump to content

Search the Community

Showing results for tags 'div with onmouseover tag'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



Found 1 result

  1. 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