Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'autorotate'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 7 results

  1. Hi, I am trying to animate a shape along a motionpath bezier. In my codepen have taken it back to basics with a line and a square. Whenever I switch autorotate to true, the square just does not stay centred on the line. Turn autorotate to false and it sticks beautifully. But I need that auto rotation goodness. I have been using the demo from https://greensock.com/docs/Plugins/MorphSVGPlugin 'Animate along an SVG path' for the basis of the animation.
  2. Hi, i am using the "pathDataToBezier" function to follow an image (car) along an SVG path. When not using the autoRotate function (false) - the top left corner of the image is right on the path / track , but when i am using the autoRotate function "true" - the image is not x/y centered in the middle of the path and have some weird offset in the curved areas. // animate road var path = MorphSVGPlugin.pathDataToBezier("#roadPath"); TweenMax.to("#car", 5, {bezier:{values:path, type:"cubic", autoRotate:true}, ease:Linear.easeNone, repeat:-1}); the image is a 22x10px image, which should rotate in the middle / center of the image along the path... What do I have to change? Have a look at http://codepen.io/technics1210/pen/vmxdLz?editors=1111
  3. Hello everyone, I am working on a project where I mix PixiJS and GSAP to animate my canvas' content and I am encountering an issue with the BezierPlugin, more specifically its autoRotate feature. For some reason it goes crazy when I enable it. The bezier path itself is correctly respected but the Sprite (which is a car in my app) rotates a few times on itself instead of slightly turning to indicate it's following the path. The way it rotates makes me believe it might be something related to the center of origin but I can't figure out why or how to fix it (I imagine it might also be more related to PixiJS rather than GSAP). You can have a look at http://haveagoodride.atvea.org/ (I know it's no CodePen, I hope it's not too much of an issue) which is my work in progress for the project. The issue I'm talking about is easily spottable but I'm talking about the vehicle moving along the path after you hit that "Let's go" button. Here's how my Bezier tween is written: path = [{x:-200, y:2000}, {x:286, y:1837}, {x:330, y:1725}, {x:330, y:1725}, {x:376, y:1669}, {x:387, y:1589}, {x:326, y:1531}, {x:242, y:1534}, {x:173, y:1519}, {x:140, y:1465}, {x:131, y:1420}, {x:155, y:1381}]; TweenMax.to(vehicle, 5, {bezier:{values:path, autoRotate:true}}); If needed to be looked into a bigger scope, it's in my app.js file, line 182. What am I missing here? Thanks!
  4. I have an animation that uses the bezier plugin and the autoRotate function within it. After updating to the latest version of GSAP the rotation is no longer occurring, causing the animated element to look unnatural. I haven't run any significant tests as I am pressed for time with other projects but I was just wondering if there is a quick fix on my end. I know there were some updates to how rotation is handled in the latest update and if there is anything I need to do to update my code any assistance would be appreciated. Here is he snippet that makes the path and rotation: {bezier:{type:"soft", curviness:1.25, values:[{x:0, y:-200}, {x:300, y:-400}, {x:800, y:-200}, {x:1010, y:-300}], autoRotate:["x","y","rotation",1.5,true]} I can't provide the link to the source since it's a closed production environment but if it helps I can create a test page somewhere when I get some time. Thanks.
  5. Hi folks, I'm having trouble with BezierPlugin, i've done a motion where i caught a bunch of blocks and tween all of then through different paths. When i'm tweening from left to right, everything works fine, but when i try to tween those blocks from right to left the autoRotate doesn't work. I'm not posting yet any example code just to see if anyone already had this problem and knows how to solve it. Anyway i will do a sample in codepen asap. That was fast, i've remembered a example that i saw at codepen and i've used it to reproduce the problem. Check it out, http://cdpn.io/zyxlb Thank you.
  6. Hello, I've an animation of 52 elements over a curve (a circle) using bezier. Elements come from a certain point and join the circle, 26 in one half of the circle, 26 in the other. autoRotate is set to true. Elements are rectangular. All 52 are clickable. After clicking any of the 52 they are moved to a different location. Problem is they preserve the angle of rotation they got following the curve. Question is how get the current angle of rotation in order to do the math and rotate to recover the initial angle (before going into the circle). Found here in the forums a solution but is not working: TweenMax.to(document.getElementById(identifier),0.5,{css:{top:"10px", left:"10px"}, ease:Power2.easeOut}); var transform = $("#card32")._gsTransform; var x = transform.x; var rotation = transform.rotationX; console.log(rotation); All I get is : Cannot read property 'x' of undefined Your help will be appreciated.
  7. Hi I'm wondering why the autoRotate is not kicking in, when I use left and top values instead of x and y. The thing is, that with left and top I can absolutely define the position while with x and y I always have to calculate the offset to the next point. I've read somewhere in the Forum that there "was a regression in a recent version of BezierPlugin that caused autoRotate not to work properly". But I'm using the latest Version. Can you please have a look in my test.zip and tell me what I did wrong? Indyaner test.zip
×