Why the 2 scripts are not loading when I put them in 'before body'

I want to use codepen code into a page… but the scripts are only loading in an html-frame but not in a before body…

I have a problem with my large project: html-frame can only contain 10000 characters so I want to load my script via before body…

I did a test with small code: but this 2 scripts are not loading (also not when I put them at ‘custom code’ for all the pages… why?

this is the code https://codepen.io/karelrosseel-prive/pen/qBNoNgo
in codepen the 2 scripts you can find in the settings


the total code


// Sprite by Antonio Caggiano - use for educational purposes only

const scaling = "fit"; // this will resize to fit inside the screen dimensions
const width = 3000;
const height = 768;
const color = dark; // ZIM colors like green, blue, pink, faint, clear, etc.
const outerColor = darker; // any HTML colors lke "violet", "#333", etc. are fine to use
const assets = 
		
		["https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png",
  "https://i.ibb.co/Jy2PfD6/g"];



const frame = new Frame(scaling, width, height, color, outerColor, assets);
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
	zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

	// often need below - so consider it part of the template
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// REFERENCES for ZIM at https://zimjs.com
	// see https://zimjs.com/intro.html for an intro example
	// see https://zimjs.com/learn.html for video and code tutorials
	// see https://zimjs.com/docs.html for documentation
	// see https://codepen.io/topic/zim/ for ZIM on CodePen

	// CODE HERE
	
	var points = [[-230.1,226.1,0,0,-148.6,-27.6,148.6,27.6],[-17,59,19.4,-5.1,-30,47.1,68.9,-57.3],[154.1,51.1,0,0,-39.2,-53.2,39.2,53.2],[216.8,250.3,0,0,-76,-50.1,76,50.1],[420.9,213.8,0,0,-65.8,-3.1,65.8,3.1]];
	
	const path = new Squiggle({
		thickness:20,
		points:points,
		color:"yellow",		
		dashed:false,
		interactive:true,
		onTop: false,
	}).sca(1.5).center().mov(100,-100);
		
	asset("https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png")
		.clone()
		.centerReg()
		.sca(2)
		 .outline()
		.animate({
			props:{path:path, flip:true},
			time:10000,
			ease:"linear",
			rewind:false,
			loop:true	
		});
	
	asset("https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png")
		.clone()
		.centerReg()
		.alp(0)
		.sca(2)
		// .outline()
		.animate({
			props:{path:path, flip:true},
			wait:1000,
			waitedCall:plane=>{plane.alp(1)},
			time:10000,
			ease:"linear",
			rewind:false,
			loop:true	
		});
	
	asset("https://raw.githubusercontent.com/karelrosseel/fietsverzet/master/blauw50.png")
		.clone()
		.alp(0)
		.centerReg()
		.sca(2)
		// .outline()
		.animate({
			props:{path:path, flip:true},
			wait:2000,
			waitedCall:plane=>{plane.alp(1)},
			time:10000,
			ease:"linear",
			rewind:false,
			loop:true	
		});
	
  new Label({ // found on https://zimjs.com/ten/beads3.html
        text:"drag or double tap points - shift (or hold) click to remove - click to add",
        size:20,
        color:white
    }).alp(.7).pos(0,30,CENTER,BOTTOM)
	

	stage.update(); // this is needed to show any changes


}); // end of ready
</script>


my project: page:
https://smc-techniek.webflow.io/2a/rollercoaster1
my project:
https://preview.webflow.com/preview/smc-techniek?utm_medium=preview_link&utm_source=designer&utm_content=smc-techniek&preview=c1a69b62e9be914e4ce29f8da17a629d&pageId=5f9bcfbc6d8f48a9051f8f4f&mode=preview