Enable Animations at Runtime

For older versions of Android I have noticed lag and poor performance due to animations. To fix these performance issue I disable animations by importing the IonicModule with animated set to false:
IonicModule.forRoot({animated: false})

I do not want to disable animations for all browsers/devices so I was wondering if it is possible to re enable animations dynamically at run time, maybe in app.component.ts


this.platform.ready().then(() => {
  let chromeVersion = navigator.userAgent.match(/chrom(?:e|ium)\/(\d+)\./i);
  if(!!chromeVersion && parseInt(chromeVersion[1]) > 69){
      //code to enable animations

i don’t find any solutions for changing the App Modules Config on Runtime.

A Workaround could be to create a Service that handles all Navigation Events. Then you can use the option animated on the NavController based ob your above check.

That sounds like a good idea. I may implement something like that if there is no general solution.

For the moment you can still use the Config class on @ionic/angular, like (untested code):

import {Config} from "@ionic/angular";
    selector: "app-root",
    templateUrl: "app.component.html"
export class AppComponent {
        ionicConfig: Config
    ) {
        //TODO: Use platform.ready()
        let chromeVersion = navigator.userAgent.match(/chrom(?:e|ium)\/(\d+)\./i);
        const isAnimated =  chromeVersion && parseInt(chromeVersion[1]) > 69;
        ionicConfig.set("animated", isAnimated);

On Ionic 4 you’ll get the following warning:

[DEPRECATION][Config]: The Config.set() method is deprecated and will be removed in Ionic Framework 6.0. Please see https://ionicframework.com/docs/angular/config for alternatives.

So this works for now, but in the future it won’t.

For those of us who are switching on/off the animations when the app starts, is Ionic planning to give an alternative to the Config service in future versions of ionic/angular, @brandyshea ? Thanks in advance

Perhaps this could be solved by providing an IonicModule.forRoot() method which accepts a configuration function (for useFactory) instead of a value (for useValue).

Another option:

import { ɵa as ConfigToken } from "@ionic/angular";

export function getIonicConfig(): IonicConfig {
    const isAnimated = ...;
    return {
        animated: isAnimated,
        rippleEffect: isAnimated

    declarations: [...],
    entryComponents: [],
    imports: [...],
    providers: [
        {provide: ConfigToken, useFactory: getIonicConfig}
    bootstrap: [...]
export class AppModule