Angular route animations choppy with images

Question

I implemented Angular Route Animations using this tutorial and they work great except that the background images are really choppy and don't load right away. I don't think it is an issue with preloading as if you go back and forth between two tabs, it is still choppy when the images should be cached. I could be wrong though and I am open to suggestions

Here is the link to the live site: www.howlingwolfe.com If you click through the navbar, you will see what I'm talking about.

The code is here: Github

Animations page:

import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';

export const routeTransitionAnimations = trigger('trigger', [
    transition('Zero => One, One => Two, Two => Three, Three => Four, Four => Five, Zero => Two, Zero => Three, Zero => Four, Zero => Five, One => Three, One => Four, One => Five, Two => Four, Two => Five, Three => Five', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                right: 0,
                // width: '100%'
            })
        ]),
        query(':enter', [style({ right: '-100%', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
            query(':leave', [animate('.5s ease-out', style({ right: '100%', opacity: 0 }))]),
            query(':enter', [animate('.5s ease-out', style({ right: '0%', opacity: 1 }))])
           ]),
        query(':enter', animateChild())
    ]),
    transition('Five => Four, Four => Three, Three => Two, Two => One, One => Zero, Five => Three, Five => Two, Five => One, Five => Zero, Four => Two, Four => One, Four => Zero, Three => One, Three => Zero, Two => Zero', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
          style({
            position: 'absolute',
            top: 0,
            left: 0,
            // width: '100%'
          })
        ]),
        query(':enter', [style({ left: '-100%', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
          query(':leave', [animate('.5s ease-out', style({ left: '100%', opacity: 0 }))]),
          query(':enter', [animate('.5s ease-out', style({ left: '0%', opacity: 1 }))])
         ]),
         query(':enter', animateChild())
       ])
]);

Please let me know if you need anything else

Thanks!

Answer 1

Thanks to @Chris-W! I shrunk the pictures using tinyjpg.com and then changed all of the left: '100%' to transform: translateX and everything is working much faster!

Here is the modified code:

import { animate, animateChild, group, query, style, transition, trigger } from '@angular/animations';

export const routeTransitionAnimations = trigger('trigger', [
    transition('Zero => One, One => Two, Two => Three, Three => Four, Four => Five, Zero => Two, Zero => Three, Zero => Four, Zero => Five, One => Three, One => Four, One => Five, Two => Four, Two => Five, Three => Five', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top: 0,
                right: 0,
                // width: '100%'
            })
        ]),
        query(':enter', [style({ transform: 'translateX(1000px)', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
            query(':leave', [animate('.5s ease-out', style({ transform: 'translateX(-1000px)', opacity: 0 }))]),
            query(':enter', [animate('.5s ease-out', style({ transform: 'translateX(0px)', opacity: 1 }))])
           ]),
        query(':enter', animateChild())
    ]),
    transition('Five => Four, Four => Three, Three => Two, Two => One, One => Zero, Five => Three, Five => Two, Five => One, Five => Zero, Four => Two, Four => One, Four => Zero, Three => One, Three => Zero, Two => Zero', [
        style({ position: 'relative' }),
        query(':enter, :leave', [
          style({
            position: 'absolute',
            top: 0,
            left: 0,
            // width: '100%'
          })
        ]),
        query(':enter', [style({ transform: 'translateX(-1000px)', opacity: 1 })]),
        query(':leave', animateChild()),
        group([
          query(':leave', [animate('.5s ease-out', style({ transform: 'translateX(1000px)', opacity: 0 }))]),
          query(':enter', [animate('.5s ease-out', style({ transform: 'translateX(0px)', opacity: 1 }))])
         ]),
         query(':enter', animateChild())
       ])
]);