optimizing performance on mobile

Question

I'm working on this (still ongoing) project and I'm noting some bad performance on low end device, of course at the moment there are a lot of animations going on at the same time (mostly created with green sock application platform) that i can removo with the matchmedia api with javascript, but i would keep the main animation of the main four section, this is the css:

.section{
  position: absolute;
  z-index: 0;
  width: 50%;
  height: 50%;
  overflow: hidden;
  transform: scale(1);
  will-change: transform;
  transition: all $speed;
  transition-timing-function: cubic-bezier(.4,.2,0,1);


   &:first-child {
   top: 0;
   left: 0;
   background-image: $color-orange;


   }

   &:nth-child(2) {
     top: 0;
     left: 50%;
     background-image: $color-blue;


   }

   &:nth-child(3) {
     top: 50%;
     left: 0;
     background-image: $color-yellow;


   }

   &:nth-child(4) {
     top: 50%;
     left: 50%;
     background-image:$color-violet;

   }

  &.is-expanded{
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;

  }

  .has-expanded-item &:not(.is-expanded){
    transform: scale(0);
    opacity: 0;
  }

}

basically, when a title is clicked, its container receives the is-expanded class, the body also receives the ha-expanded-item.

I'm using will change here and also i enabled the caching for the images (not yet for css and javascript), i enable the gzip compression on cloudfront but i still note some poor performance on mobile Can someone give me an hint? maybe i have to use will change in a different way? thanks