Animation not working in shopify

Retired Boards Appdev Store Design
,
1

This animation is working perfectly in codepen

https://codepen.io/517design-the-solid/pen/NWQPyVJ

and here

https://gregr89.sg-host.com/

but I can’t get it to work in Shopify. I’m using the dawn theme. I set up a new dev store with only this animation in it and it animates but it seems something is interfering with it. I can’t find any console errors and everything seems to be loading.

Here is my full code placed in a custom liquid section. I also created a new section the right way and got the same results.

JS

console.clear();

select = e => document.querySelector(e);
selectAll = e => document.querySelectorAll(e);

const stage = select('.dogstage');
const tubeInner = select(".dogtube__inner");
const clone = document.getElementsByClassName("dogline"); // as need to update node list
const numLines = 10;
const fontSize = gsap.getProperty(':root', '--fontSize');
const angle = 360/numLines;
let radius = 0;
let origin = 0;

function set3D() {
    let width = window.innerWidth;
    let fontSizePx = (width/100)*fontSize;
    radius = (fontSizePx/2)/Math.sin((180/numLines)*(Math.PI/180)); // using Pythagoras Eq
    origin = `50% 50% -${radius}px`;
}

function clodeNode() {
    
    for (var i = 0; i < (numLines-1); i++) {
        let newClone = clone[0].cloneNode(true); // clone the header
        let lineClass = "dogline--"+(i+2); // create class name to append
        newClone.classList.add(lineClass); // add incremented line class
        tubeInner.appendChild(newClone); // append the clone
    }
    
    clone[0].classList.add("dogline--1"); // add line1 class to the first node
}

function positionTxt() {
	gsap.set('.dogline', {
		rotationX: function(index) {
			return -angle*index;
		},
		z: radius,
		transformOrigin: origin
	});
}

function setProps(targets) {
    targets.forEach( function(target) {
        let paramSet = gsap.quickSetter(target, "css");
        let degrees = gsap.getProperty(target, "rotateX");
        let radians = degrees * (Math.PI/180);
        let conversion = Math.abs(Math.cos(radians) / 2 + 0.5); // 1 - 0 half cosine wave
        let fontW = 200 + 700*conversion;
        let fontS = `${100 + 700*conversion}%`;

        paramSet({
            opacity: conversion+0.1, 
            // x: 300*conversion, 
            fontWeight: fontW, 
            fontStretch: fontS 
        });
        console.log(fontW);
    })
}

function scrollRotate() {
    gsap.to('.dogline', {
        scrollTrigger: {
            trigger: '.dogstage',
            scrub: 1,
            start: "top top",
            // markers: {
            //     startColor: "white", 
            //     endColor: "red", 
            //     fontSize: "16px", 
            //     fontWeight: "bold", 
            //     indent: 0
            // }
        },
        rotateX: "+=1080",
        onUpdate: function() {
            setProps(this.targets());
        }
    })
    
    gsap.to('.dogtube', {
        scrollTrigger: {
            trigger: '.dogstage',
            scrub: 1,
            start: "top top"
        },
        perspective: '1vw',
        ease: 'expo.out'
    })
}

function init() {
    clodeNode();
    set3D();
    window.onresize = () => {
        set3D();
        positionTxt();
    }
    positionTxt(); 
    setProps(gsap.utils.toArray(".dogline"));
    scrollRotate();
    gsap.to(stage, { autoAlpha: 1, duration: 2, delay: 2 });
}

window.onload = () => {
	init();
};

HTML

<div class="dogstage">
    <div class="dogtube">
        <div class="dogtube__inner">
            <h1 class="dogline">Rotation</h1>
        </div>
	</div>
</div>

CSS

 @font-face {
	 font-family: 'Bandeins-Strange';
	 src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/BandeinsStrangeVariableGX.ttf') format('truetype');
	 font-stretch: 100% 800%;
	 font-weight: 200 800;
	 font-display: block;
}
 :root {
	 --fontSize: 4;
}
 html {
	 box-sizing: border-box;
}
 *, *:before, *:after {
	 box-sizing: inherit;
}
 html, body {
	 width: 100%;
	 height: 100%;
}
 body {
	 color: white;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
	 height: 1000vh;
	 background: black;
}
 .dogstage {
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 width: 100%;
	 height: 100%;
	 visibility: hidden;
}
 .dogtube {
	 position: fixed;
	 top: 50vh;
	 left: 50vw;
	 perspective: 100vw;
}
 .dogtube__inner {
	 position: relative;
	 transform-style: preserve-3d;
}
 .dogline {
	 position: absolute;
	 top: 50%;
	 left: 50%;
	 transform: translate(-50%, -50%);
	 margin: 0;
	 font-family: 'Bandeins-Strange';
	 font-size: calc(var(--fontSize) * 1vw);
	 font-stretch: 800%;
	 font-weight: 800;
	 text-transform: uppercase;
	 line-height: 1;
	 transform-style: preserve-3d;
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

Here is a screenshot of what it looks like in shopify.

https://snipboard.io/GnecTR.jpg

You can see what it should and does look like in codepen above

Any help would be greatly appreciated. Thank you