Jump to content
Search Community

Disturbance in rotating div ?

prateek test

By prateek
in GSAP

Moderator Tag
 Share

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

prateek test

prateek

Posted
Posted
<html>

<head>

 

 

<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet' type='text/css'>

 

<style>

 

.div2{position:absolute;height:100px;width:2px;background:black;left:600px;top:250px;}

</style>




</head>

 

<body>

<div class="div2"></div>

 

<script>

var $box2= $(".div2");

 

$(document).ready(function(){

 

TweenMax.to($box2, 4, {rotation:"10",transformOrigin:"left top",ease:Linear.easeNone});

TweenMax.to($box2, 4, {delay:"4",rotation:"-10",transformOrigin:"left top",repeat:-1, yoyo:true,ease:Linear.easeNone});

 

})

 

function moveBox() {

 

 

}

 

$(window).on('load', moveBox);

 

</script>

</body>

</html>

Link to comment
Share on other sites
Jonathan test

Jonathan

Posted
Posted

Hello prateek, and welcome to the GreenSock Forum!

 

Can you please provide more information, since it is unclear what the disturbance is and you only posted code without any context of what your trying to achieve.

  • When you say disturbance, what do you mean?
  • Are you trying to rotate a certain way?

Also here is nice video tut by GreenSock on how to create a codepen demo example. This way we can better help you by seeing your code live and in an editable environment to test.

 

We are ready to help, but we just need more info on what your issue is, or question?

 

Thank You :)

  • Like 1
Link to comment
Share on other sites
Carl test

Carl

Posted
Posted

Thanks for the CodePen but It would really help if you would describe what you mean by disturbance. At this point I can only guess you are referring to the anti-aliasing of the edges of the rotated div. 

 

This is just the way browsers render things. Look at this example which only uses some inline css (no GSAP)

 

http://codepen.io/GreenSock/pen/Hseap (safari, chrome, firefox)

Link to comment
Share on other sites
Rodrigo test

Rodrigo

Posted
Posted

Hi,

 

Let's the guessing game continue, what's the prize in this one? :D

 

My guess is that the issue is the jump between the first and second tween, which is caused by the change of the transform origin. The first tween doesn't have a transform origin set, therefore the default value ("center center") is used. The element is rotated considering that transformation point. Then the second instance rotates the element to a different value, with a different origin point ("left top"), so before that tween starts, the new transform point is enforced with the current rotation, which creates a jump.

 

One option could be to use the same transformOrigin in both instances.

 

A second option is use a set instance to get the element to the initial rotation and a TweenMax instance to create the pendulum:

TweenMax.set($box2, {rotation:10, transformOrigin:"left top"});

TweenMax.to($box2, 8, {rotation:-10, transformOrigin:"left top", repeat:-1, yoyo:true, ease:Linear.easeNone});

Just my guess ;)

 

Rodrigo.

  • Like 1
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
 Share
Go to topic listing

  • Recently Browsing   0 members

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