Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Grace Cho

GSAP is laggy in Safari when DOM is loaded

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

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!

Link to comment
Share on other sites

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.

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.
×