CODEWITHSUNDEEP
javascriptdom
Umair A.
Umair A.

Reputation: 6863

JavaScript Animation Lags on iPhone

I don't know why but my animation which works perfectly fine on chrome but lags on iPhone. I am using jQuery to ease the work and have following functions.

function slideLeftTo(to, after) {
    var page = $(to);
    var current = $(".current");

    if (page.length < 1) return;
    if (current.length < 1) return; 

    if (page.attr("id") == current.attr("id")) return;

    var endX = current.width();

    page.css({ top: "0px", left: endX + "px", display: "block" });
    current.css({ top: "0px", left: "0px" });

    var x = endX;
    var timer = setInterval(function() {
        if (x < 0) {
            x = 0;
            clearInterval(timer);
        }

        page.css({ top: "0px", left: x + "px" });
        current.css({ top: "0px", left: (x - endX) + "px" });

        x -= 100;

        if (x <= 0) {
            after();
        }
    }, 50);
}

function slideRightTo(to, after) {
    var page = $(to);
    var current = $(".current");

    if (page.length < 1) return;
    if (current.length < 1) return; 

    if (page.attr("id") == current.attr("id")) return;

    var endX = current.width();

    page.css({ top: "0px", left: -endX + "px", display: "block" });
    current.css({ top: "0px", left: "0px" });

    var x = 0;
    var timer = setInterval(function() {
        if (x > endX) {
            x = endX;
            clearInterval(timer);
        }

        page.css({ top: "0px", left: (x - endX) + "px" });
        current.css({ top: "0px", left: x + "px" });

        x += 100;

        if (x >= endX) {
            after();
        }
    }, 50);
}

I can simply call these functions to work and they are working but are lagging. The way I call them is...

slideLeftTo('#div_id', function() {
   console.log("It was animated!");
});

I know you can point out what's wrong with my functions.

Upvotes: 2

Views: 311

Answers (1)

Umair A.
Umair A.

Reputation: 6863

I resolved the issue by using CSS animation completely. I used translate3D property to do that.

Upvotes: 1

Related Questions