Jump to content
Search Community

idarfan

Members

  • Posts

    14

  • Joined

  • Last visited

 Content Type 

Posts posted by idarfan

    I'm try use this sample on my webpage with onmouseover tag but its runs away

    in GSAP

    Posted

    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 

     

     

    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?

    I'm try use this sample on my webpage with onmouseover tag but its runs away

    in GSAP

    Posted

    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


    index.html

    bootstrap.min.css

    styles.css

    See the Pen zvKErM by idarfan (@idarfan) on CodePen

×
×
  • Create New...