Hughie Posted April 6, 2021 Share Posted April 6, 2021 https://carrollonline.uk/pages/kites/gsap-demo.html This project is about creating realistic kite flight patterns. There is a complex move that I've coded with a motion path. The wee kite is going in the right way except now it needs to rotate too. There are at least three places along the path that I need to control the kite's rotation. Can't find a way to do that, does anyone have a way forward? Link to comment Share on other sites More sharing options...
PointC Posted April 6, 2021 Share Posted April 6, 2021 Hi @Hughie Welcome to the forum. You could turn off autoRotate:true and simply rotate the kite as needed. Another option would be to place the kite inside a parent container and have the parent travel along the path with autoRotate:true thus leaving the kite available for its own rotations inside the parent. Does that make sense? Happy tweening and welcome aboard. 1 Link to comment Share on other sites More sharing options...
Hughie Posted April 6, 2021 Author Share Posted April 6, 2021 Thanks @PointC, wrapping the kite in another object is a good idea to get more control, that would mean having two animations running at once would it? In this pattern, the kite starts from the left, facing left, it goes down still facing left and when it turns the corner to go along the bottom it should be facing down. There are further tweaks that need to be made too. What I'm trying to do is to rotate the kite at certain moments and in certain directions as it goes along the path. If this can be done then the project could be useful to many people when it's complete, so I'm hoping for way to do that. I don't know how to 'simply rotate the kite as needed'. Link to comment Share on other sites More sharing options...
PointC Posted April 6, 2021 Share Posted April 6, 2021 13 minutes ago, Hughie said: I don't know how to 'simply rotate the kite as needed'. I meant the parent container would be the object actually aligned to the path. The kite is just along for the ride at the point so you can rotate it inside the parent at any point along the motion path. I imagine it would be a bit of trial and error and you'd probably want to use devTools to assist with the process. Make sense? 1 Link to comment Share on other sites More sharing options...
Hughie Posted April 6, 2021 Author Share Posted April 6, 2021 The kite could live inside a wrapper which is moving along the path, ok. To rotate the kite inside the parent at any point (four points in fact) is exactly what I'm asking how to do. Link to comment Share on other sites More sharing options...
Cassie Posted April 6, 2021 Share Posted April 6, 2021 Hi Hughie! The best way to sequence animations and have certain actions occur at specific points in time is with a timelinehttps://greensock.com/docs/v3/GSAP/Timeline In your case you would need to add your motion path tween and then use the position parameter to sync up kite-rotations as and when you want them to occur. 4 Link to comment Share on other sites More sharing options...
Solution PointC Posted April 6, 2021 Solution Share Posted April 6, 2021 Oh... I see. Yes - you'd add another tween to the timeline with the rotation of the kite and use the position parameter to start it at the correct point. Say you have a 2 second motion path animation and you want the kite to rotate 15 degrees at 0.5 seconds into that animation, you'd then write it like this. tl.to(yourKiteTarget, { rotation: 15 }, 0.5); More info on the position parameter. Happy tweening. 4 Link to comment Share on other sites More sharing options...
Hughie Posted April 6, 2021 Author Share Posted April 6, 2021 @PointC, @Cassie, thanks both, the position parameter is what was needed, top job https://carrollonline.uk/pages/kites/gsap-demo.html 2 Link to comment Share on other sites More sharing options...
mikel Posted April 7, 2021 Share Posted April 7, 2021 Hey @Hughie, Perhaps this example will give you further suggestions. The changes in direction are linked to points along the path: GSAP Draggable.hitTest See the Pen bGEmRBL by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Hughie Posted April 7, 2021 Author Share Posted April 7, 2021 @mikel, great idea, thanks, I'll look into it! 1 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