I'm currently working on an animation project where I want the title to be visible on the page initially, and then slowly fade away as you scroll down, with a subtitle fading in right after. While I've managed to get the title part working, I'm struggling to smoothly transition the appearance of the subtitle. Initially, the subtitle is set to "visibility:hidden," but when I scroll and the JavaScript adds the transition-in class, it seems to abruptly appear without honoring the transition property I assigned. You can find the fiddle I created here. Below, you'll see the JavaScript and CSS code I'm using for this animation. If there are any easier methods to achieve this effect, please feel free to share. Any advice or assistance would be greatly appreciated as I've been experimenting and researching with no success.
Javascript
const element = document.getElementById('title');
const element2 = document.getElementById('subtitle');
window.onscroll = function() {
console.log("document element");
console.log(document.documentElement.scrollTop);
console.log("scrolling elemnent");
if (window.scrollY > 0) {
element.classList.add('fadeout');
element2.classList.add('fadein');
console.log("hello");
}
}.fadeout {
visibility: hidden;
opacity: 0;
transition: visibility 0s 2s, opacity 2s linear;
}
.two {
visibility: hidden;
}
#subtitle {
transition: opacity 2s linear;
}
.fadein {
visibility: visible;
opacity: 1;
transition: opacity 2s linear;
}