sirhclluk

I had success removing the rotationX and keeping the transformOrigin.
 

See the Pen 27931bfac63637b1816c59318d473b2f?editors=0010 by sirhclluk (@sirhclluk) on CodePen
 
I tried svgOrigin, but it didn't improve it.
 
Thanks Jonathan

Thank you both for the replies. PointC, I got it to work based on that example.

I had to change the bound to numbers and not just the name of the object. And on the progress line had to change it to t.progress( this.x/-484 );

 

Thank You GSAP!

I tried moving the translate3D z around before, but just small numbers like 2 or 10.
A translate3D z of 80+ on the rotating object seems to do the trick. Or around -30 on the shape below it.
But the better solution for this particular banner was to just remove the color div below it that the object was sort of slicing through.
 
Thanks for the help. Here's to cool movements.