I recently made this campus timeline for my university. When viewing the timeline on a mobile device (not a tablet), the navbar changes so that you can jump to the previous or next decade by clicking one of the arrows.
I'm concerned about the performance of the animation. I'm using a Samsung Galaxy S3 (one of the most powerful Android phones out) but it's still extremely sluggish in both Chrome and Dolphin browser. How can I make it faster? The code that controls the jump and animation can be viewed here:
$timeline.find(".dec-banner").on("click", "a", function(event) { // bring user to previous or next decade if clicked on in the decade header
var $navlink = $(this).attr("href");
if ($(this).parent().hasClass("decade-jump-prev")) {
$("html,body").stop(true, true).animate({scrollTop: $($navlink).offset().top-43},"fast");
}
if ($(this).parent().hasClass("decade-jump-next")) {
$("html,body").stop(true, true).animate({scrollTop: $($navlink).offset().top},"fast");
}
event.preventDefault();
});
Is this animation hardware accelerated? If not, can I somehow force it to be?