title: Improve performance when animating multiple images angular app
body: <p><strong>Plunker</strong></p>
  
  <p><a href="https://next.plnkr.co/edit/GDHFwA4osgrGaq9y?open=lib%2Fapp.ts&amp;deferRun=1" rel="nofollow noreferrer">https://next.plnkr.co/edit/GDHFwA4osgrGaq9y?open=lib%2Fapp.ts&amp;deferRun=1</a></p>
  
  <p><em>Annotation: This is a very basic plunker, just to simulate the Boombox, have in mind that the final application has more elements like buttons and sections</em> </p>
  
  <p><strong>Context</strong></p>
  
  <p>Hi, </p>
  
  <p>Im doing a music app with angular, the app will simulate a Boombox with multiple images changing their opacity at the rhythm of the music. The images are loaded through a ngFor and are around 35-40, their sizes and animations are defined through angular.</p>
  
  <p>The problem that I'm facing its related to the amount of images that I have (or thats what I think).</p>
  
  <p><strong>Case #1</strong></p>
  
  <p>My first approach when building the app was to use a single SVG, the result was that the SVG was cut randomly in some positions (ex: Half of Circle #10, Circle #15 and Circle #25 disappeared) , the animations were laggy and the buttons animations of the page were really slow, finally, the text in top of the images was "flickering" randomly.</p>
  
  <p><strong>Case #2</strong></p>
  
  <p>Secondly, I made and used 35 PNG images with different sizes, the result was that the first load of the page was really slow, the animations and interactions of the website were better, but the resources that the website was consuming were really high, and when changing tabs in Chrome the images were "deleted" from the browser cache, so when you went back to the website it looked blank for a couple of seconds</p>
  
  <p><strong>Case #3</strong></p>
  
  <p>Thirdly and my final attempt, was to use a single PNG image, the result was the same of Case #1 with the addition of the page looking blank when changing tabs.</p>
  
  <p><strong>Side Solutions</strong></p>
  
  <p>I made some code performance improvements like:</p>
  
  <ul>
  <li><p>changeDetection: ChangeDetectionStrategy.OnPush on the component</p></li>
  <li><p>trackBy:circleTrack on the ngFor</p></li>
  <li><p>will-change: opacity; on the CSS</p></li>
  </ul>
  
  <p>Still, none of the approaches made a significant change in the performance.</p>
  
  <p><strong>Final Notes</strong></p>
  
  <ul>
  <li>I have to use images, the designer of my team is making different styles that will later enter the app</li>
  <li>Im using routing angular animations, when I change between components the animation is always laggy, sometimes it doesn't even do the animation</li>
  </ul>
  
  <p>I would appreciate any help in how to improve the performance or what approach to have. </p>