How to animate/park a top down car with GSAP

Question

I'm just trying some things with the GSAP libraries TweenMax and TimelineMax.

What I want to accomplish is a car parking top down in an angle of 90 degrees. But I'm not sure what kind of math is needed for this to make it look authentic.

I've got this Fiddle in which I try a turn, but it looks more like the car is drifting.

Any suggestions?

timeline.to(car, 2, {
            x: "-=300", y: "+=300", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        }).to(car, 0.25, {
            x: "-=30", y: "+=50", directionalRotation: "-=5_ccw", ease: Linear.easeNone
        });

Answer 1

Your fiddle isn't linked.

GSAP's TweenMax contains a Bezier Plugin which allows objects to move along a path, which is what you want, rather than discreet values, which is what you have.

TweenMax.to(car, 2, {bezier:{values:path, type:"cubic"}, ease:Linear.easeNone})

Documentation

Example