Creé mi cartera hace unos meses y todo funcionaba bien. Después de aproximadamente medio año volví a abrir el código y ahora ya no funciona correctamente. Aparecí texto sobre un lienzo con scrollmagic.js y, al verlo desplegarse en el inspector, todavía parece funcionar (ya que la opacidad sigue cambiando) , pero no se vuelve visible. Probé tanto en Safari como en Chrome.

Pondré las partes del código aquí, creo que pueden ser relevantes para este error.

 <section id="wrapper"> <canvas class="canvasScreen intro"> <h1 class="hideit hello"><span class="head1">Dream.</span><span class="head2">Create.</span></h1> <h1 class="showme">Hi, I'm XXX. <br/> Media & Interaction Design Student. <br/> I want to dream new interesting ideas and create fascinating tech. </h1> <div class="hideit container"> <div class="chevron"></div> <div class="chevron"></div> <div class="chevron"></div> </div> </canvas> </section>

Agregué el Wrapper con la esperanza de solucionarlo, pero entonces no estaría aquí :) También intenté agregar el índice z sin éxito.

 .canvasScreen{ z-index: -1; height: 100vh !important; width: 100vw !important; } .hello{ z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Poppins, sans-serif; font-weight: 700; font-size: 10vw; color: white; text-decoration: none; } .showme{ z-index: 1; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.5vw; color: white; text-decoration: none; padding: 0; opacity: 0; } #wrapper{ min-height: 350vh; }

Y si es necesario (como parece funcionar):

 //TEXTANIMATION const textAnim = TweenMax.fromTo(text, 3, {opacity: 1}, {opacity: 0}); const scene2 = new ScrollMagic.Scene({ triggerElement: wrapper, triggerHook: 0, duration: 800, }) .setTween(textAnim) .addTo(controller)

Lamentablemente no recibo códigos de error. Alguien tiene una idea?