[Solved] Ionic 5 Animations

Ionic Framework
1

Hey all

I have recently just upgraded our App to v5 and have started converting our existing animations to the new Ionic Animations.

The original animations was based off the following by Simon from Ionic Academy.

I have been able to update it to the new way of defining animations, but am getting the following error:

Error: Uncaught (in promise): TypeError: animation.beforeAddWrite is not a function
TypeError: animation.beforeAddWrite is not a function
at overlayAnimation (overlays-992cb809.js:149)
at present (overlays-992cb809.js:110)
at Modal.present (ion-modal-md.entry.js:293)
at resolvePromise (zone-evergreen.js:797)
at zone-evergreen.js:707
at rejected (tslib.es6.js:71)
at ZoneDelegate.invoke (zone-evergreen.js:359)
at Object.onInvoke (core.js:39699)
at ZoneDelegate.invoke (zone-evergreen.js:358)
at Zone.run (zone-evergreen.js:124)
at zone-evergreen.js:855
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39680)

The beforeAddWrite() method is defined in the animation-interface.d.ts which is part of ionic core (@ionic/core/dist/types/utils/animation/animation-interface.d.ts)

I have been unable to find out why the beforeAddWrite() method is called and where it is called to try and fix the problem. Has anybody encounted this yet and how did you resolve it? Any help would be much appreciated :upside_down_face:.

My package.json with all the versions that I am using:

{
  "name": "mpos",
  "version": "0.0.4",
  "author": "Ionic Framework",
  "homepage": "https://ionicframework.com/",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "build:qa": "ng build --configuration=qa --prod",
    "device": "ng build --configuration=qa && npx cap copy android && npx cap sync android && npx cap open android",
    "device:prod": "ng build --prod && npx cap copy android && npx cap sync android && npx cap open android"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^8.1.1",
    "@angular/core": "^8.1.1",
    "@angular/forms": "^8.1.1",
    "@angular/platform-browser": "^8.1.1",
    "@angular/platform-browser-dynamic": "^8.1.1",
    "@angular/router": "^8.1.1",
    "@capacitor/android": "^1.1.0",
    "@capacitor/cli": "^1.1.0",
    "@capacitor/core": "^1.1.0",
    "@google/maps": "^0.5.5",
    "@ionic-native/android-permissions": "^5.10.0",
    "@ionic-native/core": "^5.10.0",
    "@ionic-native/navigation-bar": "^5.12.0",
    "@ionic/angular": "^5.0.0",
    "@ionic/pwa-elements": "^1.3.0",
    "angular2-signaturepad": "^2.9.0",
    "capacitor-firebase-analytics": "^0.3.2",
    "cordova-plugin-android-permissions": "^1.0.0",
    "cordova-plugin-navigationbar": "1.0.31",
    "cordova-plugin-vectrapebbleplugin": "0.0.5",
    "cordova-plugin-vectrascannerplugin": "0.0.7",
    "cordova-sunmi-L2-scanner": "git+http://git.italtile.net/artcev/cordova-sunmi-l2-scanner.git#master",
    "core-js": "^2.5.4",
    "hammerjs": "^2.0.8",
    "luxon": "^1.17.1",
    "ngx-mask": "^8.0.1",
    "rxjs": "~6.5.2",
    "text-mask-core": "^5.1.2",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.801.1",
    "@angular-devkit/build-angular": "^0.801.1",
    "@angular-devkit/core": "^8.1.1",
    "@angular-devkit/schematics": "^8.1.1",
    "@angular/cli": "^8.1.1",
    "@angular/compiler": "^8.1.1",
    "@angular/compiler-cli": "^8.1.1",
    "@angular/language-service": "^8.1.1",
    "@ionic/angular-toolkit": "^2.1.2",
    "@types/jasmine": "^3.3.13",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.6.2",
    "codelyzer": "~4.5.0",
    "ts-node": "^8.3.0",
    "tslint": "^5.18.0",
    "typescript": "~3.4.5"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-navigationbar": {}
    }
  }
}
2

In general, one way to deal with this is to put a breakpoint on it (or tell your debugger to break on all uncaught exceptions) and look at the resultant stack trace when the breakpoint triggers.

3

Hey there.

I have done that and traced the error down to the overlays-992cb809.js file.
animation.beforeAddWrite() fails as beforeAddWrite does not exist on animation. It is called on the play() method after the animation has been created.

I created a basic animation using a tutorial by Josh Morony and was unable to reproduce the error.

4

So where does that play call come from, and is it possible that you have version incompatibility between whereever that is and @ionic/core?

5

The play call comes from Ionic core:

import { createAnimation } from '@ionic/core'

const baseAnimation = createAnimation('modalEnter')
    ...createTheAnimation()

  return baseAnimation.play()

Regarding the versioning, I will check it in my app and compare it against the v5 conference app. Perhaps it is that…

1 Like
6

I’m back! Just had some bugs to squash on other apps before go-live.

So I have checked my implementation and could not find anything with regards to the versioning. I then went through the documentation and checked everything that I had done to see if I had missed anything. Alas nothing :frowning:.

I then proceeded to implement my custom animation directly in the Ionic Conference app. No changes were made to the app except for my custom animation and modal for it to be applied to. Non the less, it still broke. Any ideas why Ionic’s new animations seem to just break in my testing?

Here is a link to a repo with the conference app and my changes in it: https://github.com/EuanScott/ionic5_animations

7

The changes I made are in src/app/pages/schedule, src/app/pages/schedule as well as src/app/animations

8

Ionic Framework will call the play method on your animation automatically, so all you need to do is return an instance of the animation. The reason why you are receiving this error is because the play method returns a Promise, not an instance of the animation.

Using https://github.com/EuanScott/ionic5_animations/blob/a6d889dcc3ee6c18acab98993e084957e0f0ada1/src/app/animations/modals/enter.ts#L32 as an example:

return baseAnimation.play()

should become

return baseAnimation

For more information on building animations, please see the docs: https://ionicframework.com/docs/utilities/animations#methods

Edit: The docs also have an example for how to override animations for Ionic components: https://ionicframework.com/docs/utilities/animations#overriding-ionic-component-animations

2 Likes
9

Hey ldebeasi

Thank you so much! Really appreciate it, it works perfectly!!! I will read through the links that you posted now.

Keep up the good work there at Ionic :heart:

2 Likes