CODEWITHSUNDEEP
javascriptjqueryhtmlcssanimation
hoacs.
hoacs.

Reputation: 47

JQuery improve animation() performance

I am working on a page design, that has on the left side 1 big div and on the right side 6 smaller ones lined up. When I click on one of the right side divs, the content from that div transitions to the left and the former big one appears on the right side. For that I wrote a animation with JQuery that moves my left side div to the position of the element I clicked on,hides it and then expands it back to its original position. The problem that I have with it is that it works just fine on Chrome, but when I try it out on Firefox, the animation is lagging. How can I improve the performance of the animation across different browsers? 

$(document).ready(function() {
  $(".small").click(function() {
    var offset = $(this).offset();
    var pusher = offset.top - 54;
    $("div.left-side").css({'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});
    $("div.left-side").animate({'left': '0%','top': '0', 'height': '800', 'opacity': '1'}, 500);
    $('html, body').animate({scrollTop: $(".container").offset().top}, 500);
  });
});

Here would be my complete code at the moment I'm working on: https://github.com/renepickhardt/metalcon/tree/feature/frontend/basic_page_template The relevant parts for the question would be in main.html, contentswap2.js and style.css. I tried to boil the question down to the essence, but I guess that wasn't clear enough.

Upvotes: 1

Views: 594

Answers (1)

jsmorph
jsmorph

Reputation: 221

That seems to be a quite heavy animation dependent on the rest of your HTML...

Anyhow you can try to add transform: translate3d(0, 0, 0) to your .css() part, so:

$("div.left-side").css({'transform': 'translate3d(0, 0, 0)', 'height': '129', 'left': '40%', 'top':  offset, 'opacity': '0'});

But don't forget about the browser prefixes: -webkit, -moz, ... if you expect old browsers.

This trick actually forces hardware acceleration by sending stuff to the GPU which renders faster, doesn't work though in all/older browsers...

Upvotes: 1

Related Questions