Jump to content
Search Community

Flipping car on switchback MotionPath

MartyG test
Moderator Tag

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

  • Solution

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? 

  • Like 5
Link to comment
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.
×
×
  • Create New...