Jump to content
Search Community

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

idarfan test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

Link to comment
Share on other sites

sorry I don't understand the question. 

It seems you had items animating on mouseover but your pen doesn't have any of that code any more. 

you mention circles in the question but I don't see those anywhere

 

Please provide a new demo that just has the tweens and code necessary to clearly illustrate the problem. 

  • Like 2
Link to comment
Share on other sites

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?
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...