Jump to content
Search Community

bezier in javascript

Alan

By Alan
in GSAP

 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. 

1
2
Page 2 of 2  

Recommended Posts

  • 1 month later...
Mnml

Mnml

Posted
Posted

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

GreenSock

GreenSock

Posted
Posted

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
Mnml

Mnml

Posted
Posted

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
  • 2 months later...
aimee

aimee

Posted
Posted

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

GreenSock

GreenSock

Posted
Posted

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/

GreenSock

GreenSock

Posted
Posted

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

1
2
Page 2 of 2  

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