'Headline not showing above Canvas

I created my portfolio a few months ago and everything was working fine. After about half a year I reopened the code again and now it is not working correctly anymore. I had text show up above a canvas with scrollmagic.js and watching it unfold in the inspector it still seems to work (as in opacity is still changing) but it is not becoming visible. I tried both in Safari and Chrome.

I will put the parts of code here, I think may be relevant for this 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>

I added the Wrapper in hopes of fixing it but then I would not be here :) I also tried adding the z-index to no avail.

.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;

}

And if it is necessary (as it seems to work):

//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)

I sadly get no Error codes. Anyone has an idea?

javascripthtmlcssscrollmagic


Solution 1:[1]

I moved the Text out of the Canvas in HTML. Now it works like before.

<section id="wrapper">
    <canvas class="canvasScreen intro">
      </canvas>
      <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>
    </section>

Still cannot really explain why it worked before but at least it does again. Hope it helps someone else in the future :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Type Beta

Related Questions