I saw this tutorial that teaches how to do complex multilayer parallax scrolls and implemented on my website. While prototyping I found some weird lines that would appear while manipulating the PNG’s (I know the file size is big, I will fix it later). I thought it could be just some white pixels that just needed to be cleaned, but after cleaning all edges the problem persisted. Any idea why browsers are with this render issue?
https://codepen.io/Ramoses-Hofmeister-Ferreira/pen/wBMWBvZ
I was trying to manipulate some images inside an SVG so I could have a responsive multilayer parallax scroll, yet browsers are rendering strange white lines on the edge of the PNG’s that are inside of the SVG.
HTML:
<body>
<div class="banner">
<div id="mountain"></div>
</div>
</body>
CSS:
body {
margin: 0;
background-color: #000000;
}
#mountain {
width: 100%;
height: 100vh;
overflow: hidden;
}
#mountain svg {
width: 100%;
height: 100%;
object-position: center;
}
JS:
function loadSVG() {
fetch("https://raw.githubusercontent.com/astronaut954/pedro/main/img/parallax_scroll.svg")
.then(res => res.text())
.then(svg => {
const mountain = document.getElementById("mountain");
mountain.innerHTML = svg;
const svgEl = mountain.querySelector("svg");
svgEl.setAttribute("preserveAspectRatio", "xMidYMid slice");
createWrapper("#layer_1");
createWrapper("#layer_2");
setAnimationScroll();
setCloudAnimation();
});
}
function createWrapper(layerId) {
const layer = document.querySelector(`#mountain svg ${layerId}`);
if (!layer) return;
const wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
wrapper.setAttribute("id", `${layerId.slice(1)}_wrapper`);
layer.parentNode.insertBefore(wrapper, layer);
wrapper.appendChild(layer);
}
loadSVG();
function setAnimationScroll() {
gsap.registerPlugin(ScrollTrigger);
let runAnimation = gsap.timeline({
scrollTrigger: {
trigger: ".banner",
start: "top top",
end: "+=1000",
scrub: true,
pin: true
}
});
runAnimation.add([
gsap.to("#cloud10_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud9_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud8_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud7_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud6_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud5_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud4_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud3_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud1_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2b", { y: -1500, duration: 2 }),
gsap.to("#cloud1b", { y: -1500, duration: 2 }),
gsap.to("#cloud10", { y: -1500, duration: 2 }),
gsap.to("#cloud9", { y: -1500, duration: 2 }),
gsap.to("#cloud8", { y: -1500, duration: 2 }),
gsap.to("#cloud7", { y: -1500, duration: 2 }),
gsap.to("#cloud6", { y: -1500, duration: 2 }),
gsap.to("#cloud5", { y: -1500, duration: 2 }),
gsap.to("#cloud4", { y: -1500, duration: 2 }),
gsap.to("#cloud3", { y: -1500, duration: 2 }),
gsap.to("#cloud2", { y: -1500, duration: 2 }),
gsap.to("#cloud1", { y: -1500, duration: 2 })
])
.add([
gsap.to("#layer_1", {
scale: 1.4,
x: -250,
y: 0,
transformOrigin: "50% 0%",
duration: 2
}),
gsap.to("#layer_2", {
scale: 1.2,
transformOrigin: "50% 0%",
duration: 2
})
]);
}
