Enabling or Disabling Animations during Runtime in Angular

app-animate.class.ts

import { ɵNoopAnimationDriver, AnimationDriver, ɵWebAnimationsDriver } from '@angular/animations/browser';

export class AppAnimate implements AnimationDriver {
    animationsDisabled = myVariableToDisableAnimations;
    driver = this.animationsDisabled ? new ɵNoopAnimationDriver() : new ɵWebAnimationsDriver();
    validateStyleProperty() {
        return this.driver.validateStyleProperty.apply(this.driver, arguments);
    }
    matchesElement() {
        return this.driver.matchesElement.apply(this.driver, arguments);
    }
    containsElement() {
        return this.driver.containsElement.apply(this.driver, arguments);
    }
    query() {
        return this.driver.query.apply(this.driver, arguments);
    }
    computeStyle() {
        return this.driver.computeStyle.apply(this.driver, arguments);
    }
    animate() {
        return this.driver.animate.apply(this.driver, arguments);
    }
}

/**
 * Then set the class as the provider for AnimationDriver in your AppModule with:
 * { provide: AnimationDriver, useClass: AppAnimate }
 */