NickNo Posted June 13, 2020 Share Posted June 13, 2020 Ok, I'm a few days into playing around with gsap, and starting to really love it... getting stuck on a few things - here are a couple I'd appreciate some help with... I have an object on a path, but when I animate it, its upside down - I've tried a few things like trying to rotate in the .set() but that doesn't seem to work...is this something I can do in gsap, or should I do it elsewhere (css?). The second question is about align:"self" using motionPath - I've read the docs and posts but still can't get my head around it - if I do the same animation, but with align:"self" I'm driving off the road - is "self" the path, or something else? See the Pen wvMWMWY by nickjacobsnz (@nickjacobsnz) on CodePen Thanks again:) See the Pen abdZdmZ by nickjacobsnz (@nickjacobsnz) on CodePen Link to comment Share on other sites More sharing options...
mikel Posted June 13, 2020 Share Posted June 13, 2020 Hey @NickNo, Your street starts at "d =" M1920.1 .... " Your car is at "d =" M1508.13 ... " Either rework the SVG: start point of street and position of car exactly where it should start. Or correct with 'offsetX: xxx' Here from left to right See the Pen rNxLxRj?editors=1010 by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
NickNo Posted June 14, 2020 Author Share Posted June 14, 2020 Thanks Mikel, the alignment issue makes more sense: For the flipping of the car once its starts animating - I've fixed it by using "scaleY:-1,scaleY:-1" - I'm just trying to understand WHY that happens...? Link to comment Share on other sites More sharing options...
mikel Posted June 15, 2020 Share Posted June 15, 2020 Hey @NickNo, I have no explanation why the car 'drives on the head' (without 'scaleY: -3, scaleX: -3'). See the Pen pogEzeb?editors=1010 by mikeK (@mikeK) on CodePen 1 Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 It has to do with how the path is created. Use a different path and it's not necessary: See the Pen xxZEGjj?editors=1000 by GreenSock (@GreenSock) on CodePen 3 Link to comment Share on other sites More sharing options...
NickNo Posted June 15, 2020 Author Share Posted June 15, 2020 Thanks for that ... @mikel I didn’t realize you could use scale -3 in this way so that’s definitely useful to know, and @ZachSaucier yes I’ll have to pay much more attention to how paths are actually created before animating... 1 Link to comment Share on other sites More sharing options...
mikel Posted June 15, 2020 Share Posted June 15, 2020 Hey Zach, If I want to run an object from right to left, I could start the motion path on the right: "the align property bends coordinate spaces in order to position the target exactly on top of the path." But then the object is upside down. So in this case I have to start the path on the left and use a from tween? See the Pen RwrGKVP by mikeK (@mikeK) on CodePen Kind regards Mikel Link to comment Share on other sites More sharing options...
PointC Posted June 15, 2020 Share Posted June 15, 2020 autoRotate:180, 2 Link to comment Share on other sites More sharing options...
mikel Posted June 15, 2020 Share Posted June 15, 2020 Hey PointC, I know autoRotate - very helpful with curves. The object already has the correct, the expected orientation. The Point: Why do I have to correct this here? Link to comment Share on other sites More sharing options...
PointC Posted June 15, 2020 Share Posted June 15, 2020 Sorry @mikel, I'm not following. If you have a path that goes from left → right and you want the target to go from right → left, yes you would use a .from tween. It won't flip or distort your target by doing that. Is that what you meant? Link to comment Share on other sites More sharing options...
ZachSaucier Posted June 15, 2020 Share Posted June 15, 2020 7 minutes ago, mikel said: Why do I have to correct this here? If you're asking why MotionPath does it that way is because it generally makes the most sense Most objects are oriented to go left → right. MotionPath doesn't the capacity to visualize things the way humans do so we have to choose some way of orienting it. You can visualize the way that MotionPath sees the rotation by using a left-hand rule*: Point the tips of your fingers (not thumb) at the starting point of the path. Close your hand towards the way the path is moving at the next point in time. Stick your thumb up - that's the normal rotation (i.e. autorotate: true/0). Any rotation angle supplied by the user applied after that is determined. * inspired by the right-hand rule of math/physics. 2 Link to comment Share on other sites More sharing options...
mikel Posted June 16, 2020 Share Posted June 16, 2020 Hey Zach, Thank you for your detailed and understandable execution. So I avoid autoRotate: true and it runs as expected. See the Pen bGEwrqj?editors=1010 by mikeK (@mikeK) on CodePen Kind regards Mikel Link to comment Share on other sites More sharing options...
GreenSock Posted June 16, 2020 Share Posted June 16, 2020 9 hours ago, ZachSaucier said: If you're asking why MotionPath does it that way is because it generally makes the most sense Most objects are oriented to go left → right. MotionPath doesn't the capacity to visualize things the way humans do so we have to choose some way of orienting it. Just a minor correction - MotionPathPlugin merely takes your path data and uses that, so if the path data goes from right to left, that's what MotionPathPlugin will do. And the rotation is measured based on the tangent at that specific point on the bezier path. Glad you found a solution! 1 Link to comment Share on other sites More sharing options...
jnhltmn Posted September 10, 2020 Share Posted September 10, 2020 See the Pen xxZEGjj by GreenSock (@GreenSock) on CodePen If you want to yoyo this car and flip to make a turn (so it's driving in the right direction), how would you do this? Link to comment Share on other sites More sharing options...
mikel Posted September 10, 2020 Share Posted September 10, 2020 Hey @jnhltmn, Is this an option for you? See the Pen MWyVELQ by mikeK (@mikeK) on CodePen Happy driving ... Mikel 2 Link to comment Share on other sites More sharing options...
jnhltmn Posted September 10, 2020 Share Posted September 10, 2020 Great! Just what I need! Now I finally can drive home again! Thanks! Link to comment Share on other sites More sharing options...
pixelpillow Posted September 10, 2020 Share Posted September 10, 2020 Hey @mikel, is there a way to speedup the car on click/hover on the same path? Link to comment Share on other sites More sharing options...
mikel Posted September 10, 2020 Share Posted September 10, 2020 Hey @pixelpillow, Welcome to the GreenSock Forum. You could use timeScale to scale the time of an animation. See the Pen MWyVELQ by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 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