I am trying to make elements appear only after the page has loaded. I added a class that removes my elements, and a modifier that makes them appear only once the page has loaded.
It looks like my transition jumps when the page is fully loaded, but I would like the whole transition to play. I have been looking at other solutions but nothing that worked for me.
This is what my JavaScript looks like.
class RevealOnLoad {
constructor() {
this.itemsToReveal = document.querySelectorAll(".hero__element");
this.hideInitially();
this.events();
}
events() {
let stateCheck = setInterval(() => {
if (document.readyState === 'complete') {
clearInterval(stateCheck);
this.itemsToReveal.forEach(el => {
el.classList.add("reveal-item--is-visible");
})
}
console.log(document.readyState);
// document ready
}, 100);
}
hideInitially() {
this.itemsToReveal.forEach(el => {
el.classList.add("reveal-item");
console.log(document.readyState);
})
}
}
export default RevealOnLoad;
And the css class:
.reveal-item {
opacity: 0;
transition: opacity 1.5s ease-out, transform 1.5s ease-out;
transform: scale(1.15);
}
.reveal-item--is-visible {
opacity: 1;
transform: scale(1);
}
Register document to the "DOMContentLoaded" event, that's when everything but the images are loaded:
document.addEventListener('DOMContentLoaded', reveal);
The event handler is reveal(e). Wrap everything in reveal(e) in a setTimeout():
function reveal(e) {
setTimeout(function() {
//... switch classes etc.
}, 2000);
}
Use @keyframe and animation in CSS.
document.addEventListener('DOMContentLoaded', reveal);
function reveal(e) {
setTimeout(function() {
const H = document.querySelectorAll('.hidden');
H.forEach(h => {
h.classList.toggle('hidden');
h.classList.toggle('revealed');
})
}, 2000);
}.hidden {
opacity: 0;
transform: scale(0);
}
.revealed {
animation: show 3s forwards ease-in;
}
@keyframes show {
0% {
opacity: 0;
transform: scale(0);
}
100% {
opacity: 1;
transform: scale(1);
}
}<h1 class='hidden'>TITLE</h1>
<fieldset class='hidden'>
<legend>TITLE</legend>
</fieldset>