Jump to content
Search Community

dimka

Members

  • Posts

    2

  • Joined

  • Last visited

 Content Type 

Posts posted by dimka

    I have a problem with "rotate"

    in GSAP

    Posted

    The square revolves around itself twitching and not doing that smoothly. can anyone help a newbie tell how to fix this?
     

     

    html  

    <body>
    <div class="test">
        <div class="block">
            <div class="test-block"></div>
        </div>
    </div> 
</body>

    css 

    .test{
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #000;
    z-index: 5555555555;
    top: 0px;
    left: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.block{
    position: absolute;
    width: 350px;
    height: 350px;
    background: #fff;
}
.test-block{
    position: relative;
    display: inline-block;
    vertical-align: top;
    top: 150px;
    left: 150px;
    width: 50px;
    height: 50px;
    background: darkgreen;
}

    js 

    var tl = new TweenMax({repeat: -1});
var testBlock = $('.test-block'); 
tl.to(testBlock, 4, {rotation: 360 , ease:Linear.easeNone , transformOrigin:"50% 50%"})

     

    See the Pen bMbRXQ by fenixfoux (@fenixfoux) on CodePen

×
×
  • Create New...