How do I rotate my van to be the right way up?

[Will Simons]

I've been experimenting with motion paths and when I draw the path from left to right, the van is the right way but... stuck in reverse.

When the motion path is drawn from right to left, the van is upside-down AND stuck in reverse.

Can anyone explain this?

Second, I'd like the van to be the right way up and moving from right to left.

Can anyone help with this?

See the Pen BaVzRpX by willsi (@willsi) on CodePen

[Trapti]

Here is a forked codepen. As per my knowledge, we  cannot reflect using CSS. I changed the graphics direction in editor. 
For reverse I think you can use other graphic and move that for reverse and club these in a timeline.

See the Pen ZEROvNQ?editors=1010 by tripti1410 (@tripti1410) on CodePen

[Will Simons]

cheers Trapti, I'm new to this and don't quite follow what you mean by: 'I changed the graphics direction in editor. '

Can you explain what the editor is and how you changed the direction or, alternatively, is there an article you can point me at.

[Trapti]

Editor(Illustrator). I took the van image you used and make it facing right in the Illustrator. You can see HTML panel I have placed an inline SVG and used it to move along the path. 

[mvaneijgen]

I think this article from our own @PointC will really clearly illustrate your issue/solution.

 

https://www.motiontricks.com/adobe-illustrator-path-direction-quick-tip/

 

1 hour ago, Trapti said:

we  cannot reflect using CSS

 

@Trapti  you can reflex using CSS, with transform: scaleX(-1) scaleY(-1), but in this case it is not a good idea, because you don't want GSAP and CSS transforming the same property. 

[Will Simons]

K, thank you both. I followed Trapti's advice and reversed the SVG, which got the van moving in the right direction. However, it's not quite right as it needed an additional step, which is that I had to comment out 'autoRotate' to make it work. Is there a solution that allows me to reinstate autoRotate?

[Trapti]

In my pen autoRotate was commented out. 
If the solution is working for you then use that. autoRotate will rotate the object according to paths coordinates. You can choose to give numbers also like 90 or 180 how much ever you want to rotate. If it is set to "true" then gsap automatically figures out the amount of rotation it needs. 

Keeping "autoRotate: true"  looks good in your case, so I uncommented that now in my pen. 
 

 

[Trapti]

Thanks @mvaneijgen for this info I didn't know this. 🙂
 

 

[Will Simons]

Thanks again, Trapti