GSAP is laggy in Safari when DOM is loaded

[Grace Cho 0 Likes (Newbie)]

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);
});

 

See the Pen JjdRZJe by GreenSock (@GreenSock) on CodePen

[OSUblake 18,492 Likes (Superhero)]

Welcome to forums @Grace Cho

 

Performance ultimately comes down to graphics rendering and what you are telling the browser to change visually. The demo you posted doesn't even use GSAP. Safari just has a hard time handling some stuff. Not all browsers are created equally. If it's too much for a browser to handle, then you should tone down whatever you are doing, but it's impossible to say what that is because you didn't provide a minimal demo. Your JS is fine. But what we can't see what it's doing as there is HTML and CSS involved.

 

[Grace Cho 0 Likes (Newbie)]

Yes, it was by debugging tool JS making it so heavy actually!

Once I turned it off, GSAP works nicely in Safari. Thanks for your input!

[OSUblake 18,492 Likes (Superhero)]

43 minutes ago, Grace Cho said:

Yes, it was by debugging tool JS making it so heavy actually!

 

No worries! That has happened to all of us.