Ember.JS Ember Animated Route Transition Animations

application.hbs

<AnimatedOrphans />{{outlet}}

fade-animation.hbs

<AnimatedValue
  @value={{this.router.currentRouteName}}
  @initialInsertion={{true}}
  @finalRemoval={{true}}
  @use={{this.transition}}
  @duration={{600}}
>
  {{yield}}
</AnimatedValue>

fade-animation.ts

import Component from "@glimmer/component";
import { action } from "@ember/object";
import opacity from "ember-animated/motions/opacity";
import Sprite from "ember-animated/-private/sprite";

interface TransitionContext {
    duration: number;
    insertedSprites: Sprite[];
    removedSprites: Sprite[];
    receivedSprites: Sprite[];
}

export default class FadeAnimationComponent extends Component {
    @action
    protected *transition(transitionContext: TransitionContext): IterableIterator<unknown> {
        yield;

        const { insertedSprites, removedSprites, receivedSprites, duration } = transitionContext;

        insertedSprites.forEach((sprite: Sprite) => {
            opacity(sprite, { from: 0, to: 1 });
        });

        receivedSprites.forEach((sprite: Sprite) => {
            opacity(sprite, { to: 1 });
        });

        removedSprites.forEach((sprite: Sprite) => {
            opacity(sprite, { to: 0, duration: duration / 3 });
        });
    }
}

index.hbs

<FadeAnimation>
  // Route content
</FadeAnimation>