Several months ago, I successfully created my portfolio. However, upon revisiting the code after six months, I encountered issues with its functionality. Previously, text would display above a canvas using scrollmagic.js, and while the inspector shows that the opacity is still changing, the content itself remains invisible. This problem persists in both Safari and Chrome.
Below are relevant parts of the code that may be causing 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 attempted to rectify the problem by adding the wrapper element without success. Additionally, adjusting the z-index did not resolve the issue either.
.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;
}
If necessary (although it appears 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)
No error codes are being displayed. Does anyone have insight into what might be causing this issue?