I am facing an issue with an unwanted horizontal scroll on my website and I can't seem to identify the cause. The header of my site is quite simple, utilizing display: flex, justify-content: center, marin-top: 5vh, along with some padding on the logo and burger icon. As you scroll down, there is a title that transitions from right to left by using translate-x: 1em to 0em, followed by text that does the same but from the left to the right direction. Additionally, there is an image that also moves from right to left during loading. You can view a screenshot of my webpage here.
Here is a snippet of the code:
// Loading animation
loading = document.querySelectorAll(".loading");
window.onload = function(element) {
loading.forEach((link) => {
link.classList.add("loaded");
});
};.title {
opacity: 0;
transform: translateX(-2em);
transition: transform 3s 0.5s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.5s ease-out;
will-change: transform, opacity;
}
.title.loaded {
opacity: 1;
transform: translateX(0em);
}
.text {
opacity: 0;
transform: translateX(-4em);
transition: transform 4s cubic-bezier(0, 1, 0.3, 1), opacity 0.3s 0.5s ease-out;
will-change: transform, opacity;
}
.text.loaded {
opacity: 1;
transform: translateX(0);
}
.hero-image {
opacity: 0;
transform: translateX(1em);
transition: transform 1s 0.5s cubic-bezier(0, 1, 0.3, 1), opacity 0.1s 0.5s ease-out;
will-change: transform, opacity;
}
.hero-image.loaded {
transform: translateX(0em);
opacity: 1;
}
.mobile-hero {
opacity: 0;
transform: translateX(1em);
transition: transform 1s 0.5s cubic-bezier(0, 1, 0.3, 1), opacity 0.1s 0.5s ease-out;
will-change: transform, opacity;
}
.mobile-hero.loaded {
transform: translateX(0);
opacity: 1;
}<div class="mobile">
<div>
<h1 class="title loading">Michael Nussbaum</h1>
<p class="text bottom loading">Zeit ist relativ, Zeit ist Geld</p>
</div>
<img src="img/daniel-portrait.png" class="mobile-hero loading" />
</div>