Jump to content
Search Community

I have a problem with "rotate"

dimka test
Moderator Tag

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

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

Link to comment
Share on other sites

Hi @dimka :)

 

Welcome to the forum. It looks like you're trying to create a timeline, but your pen isn't loading TimelineLite or TimelineMax. It's usually easiest to load TweenMax which includes the following by default:

  • TweenLite
  • TweenMax
  • TimelineLite
  • TimelineMax
  • CSSPlugin
  • AttrPlugin
  • RoundPropsPlugin
  • DirectionalRotationPlugin
  • BezierPlugin
  • EasePack

Here's a fork of your pen with that change. 

See the Pen qYWxOy by PointC (@PointC) on CodePen

Hopefully that helps. Happy tweening.

:)

 

 

  • Like 5
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...