Jump to content
Search Community

GSAP is laggy in Safari when DOM is loaded

Grace Cho test
Moderator Tag

Go to solution Solved by OSUblake,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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.

 

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...