Animating on a path (skew, bezier, transform)

[jbisere]

Hi,

 

Newbie here having trouble with animating on a path.

 

I've managed to create a path using the bezier plugin included in tweenmax, but it is very inconsistent (path seems to be different each time). I'm looking to achieve the appearance of a piece of paper floating from one point to another - so a curved path, skewing, rotating etc.

 

Any help would be greatly appreciated

var tl = new TimelineLite({paused:true})

var trueTweenPoints = [
	{top:'10%', left:'90%', rotation: 10}, 
	{top:'75%', left:'75%', rotation: 80}, 
	{top:'20%', left:'10%', rotation: 90}
];

tl.to(".trueTween", 0.8, {bezier:trueTweenPoints, type:"soft", curviness:1.25}); 

.trueTween {
  position: fixed;
  background: red;
  right: 4.5%;
  top: 30%;
  width: 160px;
  height: 300px;
  transition: All 0.4s ease;
  -webkit-transition: All 0.4s ease;
  -moz-transition: All 0.4s ease;
  -o-transition: All 0.4s ease;
} 

See the Pen zBddRO?editors=0010 by jacktest (@jacktest) on CodePen