jquery animate css is not smooth enough on mobile devices (android)?

Question

I've created a simple animate css using jquery.

in browsers this is good enough and smooth but when i look at it on mobile devices, it seems quite bad. its not as smooth as desktop browsers.

This is a working fiddle of what i have:

https://jsfiddle.net/urchksr3/1/

$('.child-element').animate({"width":"80%", "left":"20px"}, 600);

The question that i have is that is there any way of achieving this using just CSS?

Answer 1

You can try adding some transition animation through CSS as below and add/remove a class say small here defining small width and left properties:

.child-element {
  width: 90%;
  overflow: auto;
  margin: auto;
  position: absolute;
  top: 0px;
  left: 0;
  bottom: 0;
  right: 0;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}

.small {
  left: 20px;
  width: 80%;
}

JS

$('#makesmall').on('click', function() {
  $('.child-element').addClass('small');
});


$('#makebig').on('click', function() {
  $('.child-element').removeClass('small');
});

UPDATED FIDDLE

Answer 2

Use css transitions.

.child-element{ transition: width 600ms, left 600ms }
.child-element.small{width: 80%; left: 20px;}
.child-element.big{width: 90%; left: 0;}

$('#makebig').on('click', function(){
    $('.child-element').removeClass("small");
    $('.child-element').addClass("big");
});
$('#makesmall').on('click', function(){
    $('.child-element').removeClass("big");
    $('.child-element').addClass("small");});
}

Answer 3

Use addClass and removeClass when click

.animate {
    width: 100% !important;
    left: 20px !important;
    transition: all 0.5s;
}

JS

$('#makesmall').on('click', function(){
   $('.child-element').addClass('animate');
});


$('#makebig').on('click', function(){
   $('.child-element').removeClass('animate');
});

Answer 4

Animating width and positioning is not performant anyway. You can try to add a class via jquery and start a css animation with translate 3d. Or add

   -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0);
  /* Other transform properties here */

to your class

http://blog.teamtreehouse.com/increase-your-sites-performance-with-hardware-accelerated-css