Flipping car on switchback MotionPath

[MartyG]

Hi GSAP experts!

I have a car that is moving along a switchback path, moving back and forth like it's going up a mountain. I've broken this animation into several segments, using autoRotate: true when the car moves to the right, and autoRotate: 180 when the car moves to the left (so it isn't upside down). Unfortunately, this means the car is moving backwards when moving to the left. I've tried rotationY: 180 on these segments but it has no effect. The animation also is not very smooth: it's obvious that it's been broken into segments.

 

Many thanks!!

See the Pen abBXqwM by mrsgorgon (@mrsgorgon) on CodePen

[GreenSock]

It's speeding up and slowing down for two reasons: 

• The default ease is "power1.out" - you should set it to "none" or "linear" (same thing)
• You're using the same duration for all the segments even though they vary widely in length, so it'll go much faster on a longer segment in order to finish in 1 second. 

You could do the following:

1. Set the default ease to "none"
2. Change the durations according to their length. In the solution below, I just did the math based on your "start" and "end" values (end - start = duration) which of course makes the entire path finish in 1 second (combined), so I just set the duration of the timeline to 5 at the end (which just alters the timeScale accordingly). 
3. Insert a .set() call to make the scaleX: -1 to flip the car in the other direction. And of course you'd need to flip it back to normal too in the correct spots. 

Solution: 

See the Pen c57071c38260fa7c9862eefb4573fbf2?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Is that what you're looking for? 

[MartyG]

Oh this is perfect! That's just what I'm looking for, thank you!