Problem z TweenMax - JS

Question

Mam nastpujacy problem, ponieważ chciałbym dać dwie animacje na jeden element, ale jakby jedna kasowała drugą chodzi mi o animacje elementu ".box"(dwie ostatnie), pierwszy animacja która miała trwać 3 sekundy nie wykonuje sie kiedy dodam ta ostatnia, jakby ta ostatnia nadpisywała tą pierwszą elementu ".box". To nie jest problem w kodzie w pierwszej animacji, ponieważ ona działa bez ostatniej animacji

Mam nadzieje ze nie opisałęm tego za bardzo chaotycznie

const cta = document.getElementById('cta');
            const tl = new TimelineMax();
            cta.addEventListener("click", () => {
                tl.to('.panel', 1.5, {
                        scaleY: 1,
                        height: "100vh",
                        ease: Circ.easeOut,
                    }).addLabel("run")
                    .to('#light', 1, {
                        opacity: 1,
                        y: 0,
                        ease: Back.easeOut.config(1.5),
                    }, "run-=0.5")
                    .to('p', 1, {
                        opacity: 1,
                        y: 20,
                    }, "run-=0.3")
                    .to('.box', 3, {
                        opacity: 1,
                        scale: 1,
                        ease: Elastic.easeOut.config(1.1, 0.5),
                    }, 'run-=1')
                    .fromTo('.box', 1, {scale:0.98, opacity:0.3,},{scale:1, opacity:1, repeat:-1, yoyo:true, delay:1,},)