jQuery animations are not smooth enough

Question

This is a link to a website I developed. www.sqwalla.com

I have used jQuery and css keyframes and transform to do the animations. However, it is not very smooth on android devices, and sometimes on pc too. Any suggestions to improve the codes or do something. I have seen other example site where they shows similar transform examples which are very smooth.

Here is my jquery contents. I have added the script tag at the end of body in my html file.

Also, any general suggestions for smoother css/jQuery animations to keep in mind while coding????

 $("#welcome h3").fadeIn(4000); // deal with the page getting resized or scrolled window.onscroll = function() {updateEffect()}; window.onresize = function() {updateEffect()}; function updateEffect() { // add your code to update the position when your browser // is resized or scrolled titleEffect(); slideUpShow("#image1 img"); slideUpShow("#image2 img"); slideLeftShow("#image1 div"); slideLeftShow("#image2 div"); slideRightShow("#social-links-div p:nth-child(1)"); slideLeftShow("#social-links-div p:nth-child(2)"); slideRightShow( "#social-links-div p:nth-child(3)"); minimizeShow(".video-div"); } function titleEffect(){ for(var x=0; x<($("#welcome").height()/3*2);x+=25){ if(document.body.scrollTop > x || document.documentElement.scrollTop > x){ $("#welcome h1").css('margin-top', x/5*3); } } } function getPosition(content){ var x = $(content).position().top; return x; } function slideUpShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("hide"); $(id).addClass("show"); $(id).addClass("slideUpIn"); } else { $(id).removeClass("slideUpIn"); $(id).removeClass("show"); $(id).addClass("hide"); } } function slideLeftShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("hide"); $(id).addClass("show"); $(id).addClass("slideLeftIn"); } else { $(id).removeClass("slideLeftIn"); $(id).removeClass("show"); $(id).addClass("hide"); } } function slideRightShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("hide"); $(id).addClass("show"); $(id).addClass("slideRightIn"); } else { $(id).removeClass("slideRightIn"); $(id).removeClass("show"); $(id).addClass("hide"); } } function minimizeShow(id){ if(document.documentElement.scrollTop > getPosition(id)-$(window).height()*4/5 || document.body.scrollTop > getPosition(id)-$(window).height()*4/5){ $(id).removeClass("zoomOut"); $(id).addClass("zoomIn"); } else { $(id).removeClass("zoomIn"); $(id).addClass("zoomOut"); } }

Answer 1

Don't use jQuery. It's not good at animation because it is a bloated library.

Use a library that's designed for the task, like kute.js

However having said that probably the biggest reason you're getting poor performance is because your on onScroll events will be triggering too often. You need to put some throttling on them.

Eg from here: http://infoheap.com/javascript-onscroll-event-handler-throttling/

$(window).scroll( $.throttle( 250, updateEffect ) );

Same applies to the onresize