Forum Discussion
Subtle rotations on a motion path
Hello,
I am trying to have a series of objects fan out from a starting point but cannot for the life of me figure out motion paths to get the objects to point correctly through the path.
Using arc paths, the motion is very jerky, but using custom paths for short distances is very difficult.
I've attached an example of what I'm working with. Any help would be greatly appreciated.
My solution is a little it more complicated and requires a few triggers.
The only method I could find to create a nice curve was to make your shape follow a circle path. But clearly you don't want it animating the entire 360. So what I had to do was create the motion path, extend the animation timing so it doesn't zip around the circle quickly. What I did next was the fiddly stuff.
First of all I needed a reference point of where I wanted the object to stop. That reference coming in the form of a screen recording of the motion path animation (I used quicktime), and then I slowly moved through the frames of the video capture to find the frame of where I wanted the object to stop, and screen captured that single frame. I brought that new screen shot into the project and reduced its opacity. You'll notice in the project file I had a visible circle so I could align the screen capture up with that.
From there I duplicated the original shape, removed it's motion path and then rotated and lined that up with the screen shot. Then I made a rectangular shape, and made that 100% transparent and rotated and positioned that to the left of that new shape "the end of the animation".
From there I just used a trigger to hide the duplicated shape at the start of the timeline, and then showed it once the animated shape had left interacting with the hidden rectangle. I also then hid the animated shape at the same time.
It's a little bit of work and this would need to be done for every stop point I'd assume. But you will end up with a smooth animations.
Best I could come up with sorry.
4 Replies
My solution is a little it more complicated and requires a few triggers.
The only method I could find to create a nice curve was to make your shape follow a circle path. But clearly you don't want it animating the entire 360. So what I had to do was create the motion path, extend the animation timing so it doesn't zip around the circle quickly. What I did next was the fiddly stuff.
First of all I needed a reference point of where I wanted the object to stop. That reference coming in the form of a screen recording of the motion path animation (I used quicktime), and then I slowly moved through the frames of the video capture to find the frame of where I wanted the object to stop, and screen captured that single frame. I brought that new screen shot into the project and reduced its opacity. You'll notice in the project file I had a visible circle so I could align the screen capture up with that.
From there I duplicated the original shape, removed it's motion path and then rotated and lined that up with the screen shot. Then I made a rectangular shape, and made that 100% transparent and rotated and positioned that to the left of that new shape "the end of the animation".
From there I just used a trigger to hide the duplicated shape at the start of the timeline, and then showed it once the animated shape had left interacting with the hidden rectangle. I also then hid the animated shape at the same time.
It's a little bit of work and this would need to be done for every stop point I'd assume. But you will end up with a smooth animations.
Best I could come up with sorry.
I was hoping it would be a bit easier than that but i really appreciate the effort. If anything you taught me about using transparent items and stops intersecting triggers so thank you!
Hi MikeV​
Re: "the motion is very jerky"
try changing the easing option (see attached png) to "None", this option maintains the same speed from beginning to end - rather than EaseIn / EaseOut option which it is currently set at. EaseIn/EaseOut can look jerky when applied to a short motion path.
Article: 7 Pro Tips for working with motion paths
You could try using GSAP's Motion Path plugin to achieve something similar. It gets a little tricky with aligning things though, for instance if the object isn't exactly centered on the path it will be a little jerky right at the beginning, and it's tough to preview the ending locations of the objects. With a little patience you might be able to achieve something that looks good though.
