Estoy empezando a codificar este año y lo siento si mi inglés no es lo suficientemente bueno, tengo un problema con una barra de progreso con JS, tengo en mi consola un "TypeError no detectado que carga infinitamente y me dice que podemos cargar el propiedades en estilo... El primer paso funcionaba, pero cuando se supone que la barra se vuelve interactiva, no funciona
const tll = gasp.timeline({ paused: true }); tll.to("#percent", "#bar", { duration: .2, opacity: 0, zIndex: -1 }); tll.to("#preloader", { duration: .8, width: "0%" }); tll.from(".container", { duration: 1.5, y: "-150%" }, "-=.2"); tll.to("container h1", { opacity: 1, textShadow: "12px 20px rgba(255, 255, 255,0.23)", skewY: 10, y: "10%", stagger: { amount: .4 } }); var width = 1; var bar = document.getElementById("barconfirm"); var id; function move() { id = setInterval(frame, 10); } function frame() { if (width > 100) { clearInterval(id); tll.play(); } else { width++; bar.style.width = width + "%"; document.getElementById("percent").innerHTML = width + "%"; } } * { margin: 0; padding: 0; overflow: hidden; } #preloader { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; z-index: 100; background-color: #0f0f0f; flex-direction: column; } #percent { color: white; font-family: "Neutral Face"; } #bar { width: 60%; margin-top: 20%; } #barconfirm { width: 1%; padding: 1px 0px; background-color: white; } .container { position: absolute; display: flex; align-items: center; justify-content: center; width: 100%; height: 100vh; background-color: gray; } .container h1 { font-family: 'Monument'; text-transform: uppercase; font-size: 40px; opacity: 0; } <body onload="move()"> <div id="preloader"> <div id="percent">1%</div> <div id="bar"> <div id="barconfirm"></div> </div> </div> <div class="container"> <h1>Leo Clemente</h1> </div>Gracias a todos por su ayuda, quiero si pueden una explicación más que un código porque estoy aquí para aprender también y ¡que tengan un gran día!
El problema de pasar el selector al método tll.to es que acepta UN selector, así que elige uno de los tuyos para tll.to("#percent", "#bar", {...}) .
Funcionará también si elige porcentaje o barra . Además, según el documento, el nombre de la variable de dependencia es gsap .
Puede consultar un fragmento en línea desde aquí