Putting this at the top of my post for a little extra clarity:

The overall goal here is to build a feature for dynamic banners where you can input some custom javascript animation code through a dynamic data feed in the form of a google sheet. My goal is to work through some ideas simply to find out what's feasible, and once I have a better understanding of that I will put my mind toward implementation and security concerns.

I am trying to use the Function object in order to take in a string of js from a separate file and convert it to executable code. I've come up on an issue though where the string being passed to the Function object is trying to use a global object in the host file and there seems to be an issue with the string not detecting the global object. I haven't used Function very much so there's likely some nuance here that I'm just not aware of.

This is difficult to explain, so hopefully the code snippets below will offer clarity:

Global Object:

const tl = gsap.timeline({paused: true, repeat: 0});

JS string:

object.jsInject = "const jsInjectContainer = document.getElementById('js-inject'); const headlineText = 'test headline'; const headline = document.createElement('h1'); headline.style.visibility = 'hidden'; headline.innerHTML = headlineText; jsInjectContainer.appendChild(headline); tl.to(headline, 1, {autoAlpha: 1}, 'start');";

Problematic portion of JS string:

tl.to(headline, 1, {autoAlpha: 1}, 'start');

Function taking in the string and returning a new function:

function jsIfyString(string) {
  return new Function(string);
}

Executing the new function:

const jsStringFunction = jsIfyString(object.jsInject);

jsStringFunction();

All this results in a ReferenceError: tl is not defined, which I assume has something to do with when and how the new Function is getting executed. Can anyone offer insight into this and how I might go about fixing it up (if possible)?