Share Posted September 6, 2012 Also take a look here: http://scaledinnovation.com/analytics/splines/splines.html for some inspiration on how you can use 4 anchor points in a cubic bezier to create a circle. Just click the 'animate' button a few times and you will see the circle morph into a square. Link to comment Share on other sites More sharing options...
Share Posted October 12, 2012 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 More sharing options...
Share Posted October 13, 2012 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? 1 Link to comment Share on other sites More sharing options...
Share Posted October 13, 2012 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. 1 Link to comment Share on other sites More sharing options...
Share Posted December 13, 2012 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 More sharing options...
Share Posted December 14, 2012 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 More sharing options...
Share Posted December 14, 2012 By the way, another update was just posted, so please update as soon as you can. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now