There is an unwanted horizontal scroll on my website and I can't figure out why. I have a simple header that uses display: flex, justify-content: center, marin-top: 5vh and a padding on the logo and the burger. Further down it has a title that does translate-x: 1em to 0em when loading from the right, a text that does the same from the left and an image that does it again from the right. Screenshot from my Webpage
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>I'm not entirely sure if this is what you're after, but if you want to stop horizontal overflow on a page you should be able to use this code:
body {
overflow-x: hidden;
}
I don't work with animated elements a lot, but I would imagine that the translateX is causing the unwanted scroll, which the overflow-x should help. Hope this helped :)