Jump to content
GreenSock

Alan

bezier in javascript

Recommended Posts

  • 1 month later...

Hi,

 

is there a way to animate bazier with %? I'm building a website with a fluid design, and need to animate my beziercurve with %.

 

TweenMax.to(test,20,{css:{bezier:{values:[{x:102,y:430},{x:530,y:293}]}}});

 

At the End of the animation i got following code:

<a id="test" style="-moz-transform: translate(530px, 293px);"><a>

 

But i want to get:

<a id="test" style="-moz-transform: translate(530%, 293%);"><a>

 

 

Greetz from Germany

Mnml

Link to comment
Share on other sites

I don't think x/y transforms are what you're after because if you use percentages on those, it relates to the native size of the element itself, not its parent context. I think what you'd probably want to do instead is use "top" and "left" properties, like this:

 

<!DOCTYPE html>
<html>
 <head>
<meta charset='utf-8' />
<title>Bezier Percent Demo</title>
<script src='TweenMax.js'></script>
<script type="text/javascript">
function init() {
var box = document.getElementById("box");
TweenMax.to(box, 8, {css:{bezier:{values:[{left:"50%", top:"20%"},{left:"20%", top:"90%"}]}}});
}
</script>
 </head>
 <body onload="init();">
<div id="box" style="background-color:red; width:50px; height:50px; top:50%; border-radius:10px; position:absolute;"></div>
 </body>
</html>

 

Seems to work fine for me.

 

Does that help?

  • Like 1
Link to comment
Share on other sites

Thank you so much. I think that is exactly what I need.

 

U made my day :) Thank you for that fast support. Now I can celebrate my birthday today without breaking my head over this problem.

  • Like 1
Link to comment
Share on other sites

  • 2 months later...

I can't get autorotate to work in Safari, the object starts to only rotate and not actually move! Anyone any ideas?! Thanks

Link to comment
Share on other sites

Please download the latest version and let us know if it works for you. There was a regression in a recent version of BezierPlugin that caused autoRotate not to work properly. It should be fixed now. http://www.greensock.com/gsap-js/

Link to comment
Share on other sites

By the way, another update was just posted, so please update as soon as you can.

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.
×