Sure, you could totally do that with GSAP, no problem. But I don't think it's the animation technology that's the biggest problem.
background-position is always snapped to whole pixels, so it'll never be perfectly smooth even if the CPU and GPU are barely busy. I'd strongly recommend switching to transforms which can do sub-pixel rendering and get GPU acceleration.
I'd venture to guess that 98%+ of the load has to do with graphics rendering, NOT updating the animation values. The key is to minimize the area that the browser must repaint. You're offsetting your background-position by huge values (offscreen), so it's probably putting a lot of extra load on the browser. If you really want to maximize performance, I'd bet that a canvas-based solution would be significantly smoother. PixiJS is a nice library for that if you're looking for one.
You could be to create a <div> with the background-image the way you have it now, but make that div wider and taller by exactly one tile (so if your tile is 100px by 100px, you'd make your div fill the entire area PLUS 100px in each direction and set the container's overflow to hidden) and then animate the translateX/Y (for GSAP, it'd be simply "x" and "y") and loop that. Here's a forked example:
Does that help?