Hi all,
I cannot find what is causing my GSAP in Safari is buggy , laggy, choppy... well what else word can I describe haha.
One of the forum links itself looks laggy in Safari. I attached the mp4 video file: left - chrome, right - safari.
Here is my GSAP code for reference:
function animateFrom(elem, direction) {
direction = elem.getAttribute("data-reveal-direction") ?? 0.2;
const delay = elem.getAttribute("data-reveal-delay") ?? 0;
let x = 0,
y = direction * 100;
if (elem.classList.contains("js-reveal_fromLeft")) {
x = -100;
y = 0;
} else if (elem.classList.contains("js-reveal_fromRight")) {
x = 100;
y = 0;
}
console.log("x: ", x);
console.log("y: ", y);
// gsap.set(elem, { x: x, y: y, autoAlpha: 0 });
elem.style.transform = "translate(" + x + "px, " + y + "px)";
elem.style.opacity = "0";
const tl = gsap.timeline({
scrollTrigger: {
trigger: elem,
once: true,
markers: true,
},
});
tl.to(elem, {
duration: 1.25,
x: 0,
y: 0,
autoAlpha: 1,
ease: "power2.out",
// overwrite: "auto",
delay: delay,
});
}
function hide(elem) {
gsap.set(elem, { autoAlpha: 0 });
}
// Scroll reveal
gsap.utils.toArray(".js-reveal").forEach(function (elem) {
animateFrom(elem);
});
gsap-safari-laggy.mp4
