I think I found something that works.
var resizeTimeline = new TimelineMax();
resizeTimeline.to($ani_holder, 0, { perspective: 999, x: x_pos, y: y_pos}).addCallback(startAni, 0);
The above "perspective: 999" for some reason fixes the actual animation below. Then I use your OnComplete suggestion in order to fix the final rendering. (it renders those gaps when it finishes if I don't)
No idea why this works, but it seems to do the trick.
tl.to($feathers, 6, {rotation: '180'}, 'start')
.to($background_cover, 8, {left: '300%'}, 'start')
.to($frame_border, 3, {scale: 1}, 'start+=1')
.to($frame_border, 3, {alpha: 1}, 'start+=1')
.to($frame_background, 3, {perspective: 999, scale: 1}, 'start+=2')
.to($frame_background, 3, {alpha: 1, onComplete: function() {
document.querySelector(".frame-background").style.transform = "perspective(999px) scale(0.999)";
}}, 'start+=2').addCallback(fixBackground, 0)
.to($h1, 3, {scale: 1}, 'start+=2')
.to($h1, 5, {alpha: 1}, 'start+=2')
The object "$ani_holder" holds my entire animation. I scale this using window resize (as to be responsive).
Then the $frame_background is the table that I scale from 0, and had the issue with.