Jump to content
GreenSock

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

Flying a kite - rotation control

Go to solution Solved by PointC,

Recommended Posts

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 post
Share on other sites

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.

:)

 

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites
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?

:)

 

  • Like 1
Link to post
Share on other sites

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 post
Share on other sites

Hi Hughie!

The best way to sequence animations and have certain actions occur at specific points in time is with a timeline

https://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.

  • Like 4
Link to post
Share on other sites

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.

:)

 

  • Like 4
Link to post
Share on other sites

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
  • Recently Browsing   0 members

    No registered users viewing this page.

×