Jump to content

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

Flipping car on switchback MotionPath

Go to solution Solved by GreenSock,

Recommended Posts

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

Link to post
Share on other sites

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. 


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


Is that what you're looking for? 

  • Like 5
Link to post
Share on other sites

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

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.