Nativescript-angular: keyframe animations (css) problems using NNG

Created on 2 Sep 2016  ·  57Comments  ·  Source: NativeScript/nativescript-angular

I ran this by Tsvetan Raikov and we think this is an issue that needs fixing:

In an app scaffolded as per normal in the cli (`tns create myNNGapp --ng) I am attempting to animate cards using keyframe animation:

@keyframes card {
    from { opacity: 0 }
    to { opacity: 1}
}
.card {
    opacity: 0;
    background-color: #DA4167;
    animation-name: card;
    animation-duration: 4s;
    animation-iteration-count: 1;
    margin: 10;
    border-radius: 5;
    color: #EBEBD3;
}

The keyframe animation to fade in does work, but in console, I get this error:

CONSOLE LOG file:///app/tns_modules/@angular/core/src/facade/lang.js:360:16: resolvePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:516:41
    resolvePromise@file:///app/tns_modules/zone.js/dist/zone-node.js:501:32
    file:///app/tns_modules/zone.js/dist/zone-node.js:549:32
    invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:323:43
    onInvokeTask@file:///app/tns_modules/@angular/core/src/zone/ng_zone_impl.js:44:51
    invokeTask@file:///app/tns_modules/zone.js/dist/zone-node.js:322:55
    runTask@file:///app/tns_modules/zone.js/dist/zone-node.js:223:58
    drainMicroTaskQueue@file:///app/tns_modules/zone.js/dist/zone-node.js:455:43
    promiseReactionJob@[native code]
    UIApplicationMain@[native code]
    start@file:///app/tns_modules/application/application.js:233:26
    nativeScriptBootstrap@file:///app/tns_modules/nativescript-angular/application.js:144:22
    anonymous@file:///app/main.js:5:36
    evaluate@[native code]
    moduleEvaluation@[native code]
    [native code]
    promiseReactionJob@[native code]
Sep  2 11:05:55 LOOPERMAC ndduiworkshop[40158]: CONSOLE ERROR file:///app/tns_modules/zone.js/dist/zone-node.js:442:27: Unhandled Promise rejection: Animation cancelled. ; Zone: angular ; Task: Promise.then ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/ui/animation/animation-common.js:110:31
    animationFinishedCallback@file:///app/tns_modules/ui/animation/animation.js:115:57
    animationDidStopFinished@file:///app/tns_modules/ui/animation/animation.js:67:35
    UIApplicationMain@[native code]
    start@file:///app/tns_modules/application/application.js:233:26
    nativeScriptBootstrap@file:///app/tns_modules/nativescript-angular/application.js:144:22
    anonymous@file:///app/main.js:5:36
    evaluate@[native code]
    moduleEvaluation@[native code]
    [native code]
    promiseReactionJob@[native code]
Sep  2 11:05:55 LOOPERMAC ndduiworkshop[40158]: CONSOLE ERROR file:///app/tns_modules/zone.js/dist/zone-node.js:444:23: Error: Uncaught (in promise): Error: Animation cancelled.

Perhaps this could be fixed in the next release.

picture jlooper
👍2

Most helpful comment

Also getting ERROR Error: Uncaught (in promise): Error: Animation cancelled.
This is on tns 3.3 android, angular 4.4.1.

The code causing this looks like:
<FlexboxLayout [ngClass]="{'some-animated-css-class' : some-var-that-toggles-true-and-false}"> ...

@keyframes fadeout {
    0% {
        background-color: $color-save-button;
    }
    100% {
        background-color: $color-btn;
    }
}

.some-animated-css-class {
    background-color: $color-save-button;
    animation-name: fadeout;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

I get the error only when some-var-that-toggles-true-and-false goes from true to false which should remove the css class doing the animation. Also the css animation only takes 2 seconds, but the css class isn't removed until after like 5 seconds so it's not like I'm removing the class in the middle of the animation.

Maybe this issue need to be reopened?

picture jeffswitzer on 28 Nov 2017
👍9

All 57 comments

@jlooper I've noticed that the syntax you're using in your example (with to and from) don't play well in nativescript.

I've only been able to get it working like so:

@keyframes modalOpen {
    0% {
        opacity: 0;
        transform: scale(0, 0) rotate(15deg);
    }
    50% {
        opacity: 1;
        transform: scale(1.1, 1.1) rotate(0deg);
    }
    75% {
        transform: scale(0.9, 0.9) rotate(-5deg);
    }
    100% {
        transform: scale(1, 1) rotate(0deg);
    }
}
roblav96 picture roblav96 on 2 Sep 2016

I am also getting these errors in console, even if I change to percentages as @roblav96 suggests

bnussey picture bnussey on 13 Sep 2016

Closing, as with 2.3 keyframe animations work without issue now! 👍

jlooper picture jlooper on 16 Sep 2016
❤2 🎉2 👍2

Hey @jlooper, you sure this is fixed?
I'm getting the same error when trying to animate views inside a tabbed view. Updated to 2.3 but it's still reproducible.

@bnussey did updating work for you?

alterx picture alterx on 20 Sep 2016

Also, just installed the latest version of the groceries sample and the error is still there when you log out.

alterx picture alterx on 20 Sep 2016
👍2

I'm still getting errors on some of my animations but was thinking that was my own issue @alterx

bnussey picture bnussey on 20 Sep 2016

Yeah @bnussey , me too but I downloaded the sample groceries application and it has the errors (even though it's been updated to 2.3 and angular 2 final)

alterx picture alterx on 20 Sep 2016

Yes, I download the latest groceries with angular 2 final and nativescript 2.3, the problem still there.

Arthurisme picture Arthurisme on 24 Sep 2016

I think it might depend on the animation. A very simple one was working for me with 2.3 (the one listed above) but the animations in Groceries are more complex, and might error. I think they run, but they would possibly error. So I guess we should track down what works and what doesn't. One thing to remember is the Angular way of animation should work as well.

jlooper picture jlooper on 24 Sep 2016

same error

devna13 picture devna13 on 7 Oct 2016

I'm getting similar errors on navigation animations and also CSS animations. Using 2.3

Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: Promise.then ; Value: Error: Animation cancelled. Error: Animation cancelled.
JS:     at Animation._rejectAnimationFinishedPromise (/data/data/org.nativescript.app/files/app/tns_modules/ui/animation/animation-common.js:110:22)
JS:     at Animation._onAndroidAnimationCancel (/data/data/org.nativescript.app/files/app/tns_modules/ui/animation/animation.js:113:14)
JS:     at Animation._animatorListener.android.animation.Animator.AnimatorListener.onAnimationCancel (/data/data/org.nativescript.app/files/app/tns_modules/ui/animation/animation.js:53:22)
JS:     at Animation.cancel (/data/data/org.nativescript.app/files/app/tns_modules/ui/animation/animation.js:92:27)
JS:     at KeyframeAnimation.cancel (/data/data/org.nativescript.app/files/app/tns_modules/ui/animation/keyframe-animation.js:105:31)
JS:     at RadListView.View._unregisterAllAnimations (/data/data/org.nativescript.app/files/app/tns_modules/ui/core/view-common.js:1114:27)
JS:     at Style._resetCssValues (/data/data/org.nativescript.app/files/app/tns_modules/ui/styling/style.js:925:20)
JS:     at resetCssValuesFunc (/data/data/org.nativescript.app/files/app/tns_modules/ui/page/page-common.js:291:24)
JS:     at localCallback (/data/data/org.nativescript.app/files/app/tns_modules/ui/core/view-common.js:58:29)
JS:     at GridLayout.LayoutBase._eachChildView (/data/data/org.nativescript.app/files/app/tns_modules/ui/layouts/layout-base-common.js:146:22)
JS: Error: Uncaught (in promise): Error: Animation cancelled.
9thwall picture 9thwall on 26 Oct 2016
👍4

I'm having the same issue in my app (2.3.0) using this simple animation (on page navigation):

.progress {
    animation-name: progressKeyframe;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes progressKeyframe {
    0% { transform: translate(0, 0); }
    100%   { transform: translate(30, 0); }
}
odubuc picture odubuc on 26 Oct 2016

Just to add more info, I can also reproduce using ngClass instead of page natigation. simply removing the class that triggers the animation :

<StackLayout [ngClass]="{'progress': isAnimated}"></StackLayout>
this.isAnimated = true;
this.isAnimated = false;
odubuc picture odubuc on 1 Nov 2016

Any updates on this issue!?

devna13 picture devna13 on 7 Nov 2016

Curious here as well, I'm seeing the same thing with latest 2.4.2.

NathanWalker picture NathanWalker on 15 Dec 2016

confirmed I see this issue when using keyframes as well

tskweres picture tskweres on 21 Dec 2016
👍4

I have the same issue over here, with tns version: 2.4.1

JuanDelgadillo picture JuanDelgadillo on 14 Jan 2017

same here (2.4.2)

SBD580 picture SBD580 on 2 Feb 2017
👍2

I have the same issue with tns version: 2.5

smarza picture smarza on 4 Feb 2017
👍2

I'm seeing this issue on 2.5.0 and on @next (3.0.0-2017-02-09-7977)
iOS is able to gracefully ignore the error and the app continues, but on Android the app completely crashes.

Error:

5:51:06 PM - Compilation complete. Watching for file changes.

JS: EXCEPTION: Uncaught (in promise): Error: Animation cancelled.
JS: ORIGINAL STACKTRACE:
JS: Error: Uncaught (in promise): Error: Animation cancelled.
JS:     at resolvePromise (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:416:31)
JS:     at resolvePromise (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:401:17)
JS:     at file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:449:17
JS:     at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:223:37)
JS:     at Object.onInvokeTask (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/@angular/core/bundles/core.umd.js:4382:41)
JS:     at ZoneDelegate.invokeTask (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:222:42)
JS:     at Zone.runTask (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:123:47)
JS:     at drainMicroTaskQueue (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:355:35)
JS: Unhandled Promise rejection: Animation cancelled. ; Zone: angular ; Task: Promise.then ; Value: Error: Animation cancelled. Error: Animation cancelled.
JS:     at Animation._rejectAnimationFinishedPromise (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/animation/animation-common.js:110:22)
JS:     at Animation._onAndroidAnimationCancel (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/animation/animation.js:113:14)
JS:     at Object.onAnimationCancel (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/animation/animation.js:53:22)
JS:     at Animation.cancel (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/animation/animation.js:92:27)
JS:     at KeyframeAnimation.cancel (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/animation/keyframe-animation.js:105:31)
JS:     at StackLayout.View._unregisterAllAnimations (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/core/view-common.js:1325:27)
JS:     at StackLayout.View.onUnloaded (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/core/view.js:88:14)
JS:     at file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/core/view-common.js:764:27
JS:     at StackLayout.LayoutBase._eachChildView (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/layouts/layout-base-common.js:144:22)
JS:     at StackLayout.View._unloadEachChildView (file:///data/data/org.nativescript.rpsconfng/files/app/tns_modules/tns-core-modules/ui/core/view-common.js:762:18)
alexziskind1 picture alexziskind1 on 10 Feb 2017

This issue continues with tns version: 2.5.1

smarza picture smarza on 18 Feb 2017
👍4

@tsonevn After upgrading xcode and cocoapods, I get this new error message in iOS

CoreAnimation: stiffness must be greater than 0.

xcode 8.2.2
pods 1.2.0
[email protected]
"tns-ios": {
"version": "2.5.0"
},
"tns-core-modules": "^2.5.1"

CoreAnimation: stiffness must be greater than 0.
Feb 23 11:15:27 --- last message repeated 2 times ---
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:342:26: Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:110:31
    animationFinishedCallback@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:117:57
    animationDidStopFinished@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:68:35
    UIApplicationMain@[native code]
    start@file:///app/tns_modules/tns-core-modules/application/application.js:251:26
    bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:68:28
    bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:56:26
    anonymous@file:///app/main.js:35:57
    evaluate@[native code]
    moduleEvaluation@[native code]
    [native code]
    promiseReactionJob@[native code]
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): Error: Animation cancelled.
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:342:26: Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:110:31
    animationFinishedCallback@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:117:57
    animationDidStopFinished@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:68:35
    UIApplicationMain@[native code]
    start@file:///app/tns_modules/tns-core-modules/application/application.js:251:26
    bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:68:28
    bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:56:26
    anonymous@file:///app/main.js:35:57
    evaluate@[native code]
    moduleEvaluation@[native code]
    [native code]
    promiseReactionJob@[native code]
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:344:22: Error: Uncaught (in promise): Error: Animation cancelled.
CoreAnimation: stiffness must be greater than 0.
devna13 picture devna13 on 23 Feb 2017

🙀

jlooper picture jlooper on 24 Feb 2017

Really!? that's one way to build dev community...

devna13 picture devna13 on 2 Mar 2017

same here (3.0.1)

danielKugler picture danielKugler on 19 May 2017
👍4

same issue with tns-3.0.1 and ios,everything is normal in android,any solution?

tjzfg picture tjzfg on 24 Jun 2017
👍1

+1

spmamidi picture spmamidi on 5 Sep 2017

Same here, iOS only, tns 3.0.2?

dvdbrk picture dvdbrk on 9 Sep 2017

+1

gpfiel picture gpfiel on 10 Sep 2017

So is there any fix for the animation?
CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:571:22: Error: Uncaught (in promise): Error: Animation cancelled.
_rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:98:31 []
animationFinishedCallback@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:148:57 []
animationDidStopFinished@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:70:35 []
UIApplicationMain@[native code] []
start@file:///app/tns_modules/tns-core-modules/application/application.js:212:26 []
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:73:28 []
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:61:26 []
anonymous@file:///app/main.js:6:57 []
evaluate@[native code] []
moduleEvaluation@[native code] []
[native code] []

For:
"dependencies": {
"@angular/animations": "4.2.5",
"@angular/common": "4.2.5",
"@angular/compiler": "4.2.5",
"@angular/core": "4.2.5",
"@angular/forms": "4.2.5",
"@angular/http": "4.2.5",
"@angular/platform-browser": "4.2.5",
"@angular/router": "4.2.5",
"email-validator": "^1.0.7",
"nativescript-angular": "4.2.0",
"nativescript-telerik-ui": "3.1.1",
"nativescript-theme-core": "1.0.4",
"reflect-metadata": "0.1.10",
"rxjs": "5.4.3",
"tns-core-modules": "3.2.0",
"zone.js": "0.8.17"
},
"devDependencies": {
"codelyzer": "3.2.0",
"nativescript-dev-sass": "1.3.2",
"nativescript-dev-typescript": "0.5.0",
"node-sass": "4.5.3",
"tslint": "5.7.0",
"typescript": "2.5.2"
}

morzyns picture morzyns on 23 Sep 2017

+1
I've been implementing a hybrid drag and drop list, with some responsive elements.
Works like a charm on Android, but sadly leads to undefined and unusable behavior on ios.

NativeScript 3.2

knusperkrone picture knusperkrone on 30 Sep 2017

Still having this issue in 3.2. Cant figure out where its coming from. I caught all Promises I could find but still no change. This breaks my app because after 20 sek I have about 3k log statements.

sittingbool picture sittingbool on 11 Oct 2017

+1

p-3 picture p-3 on 18 Nov 2017

Also getting ERROR Error: Uncaught (in promise): Error: Animation cancelled.
This is on tns 3.3 android, angular 4.4.1.

The code causing this looks like:
<FlexboxLayout [ngClass]="{'some-animated-css-class' : some-var-that-toggles-true-and-false}"> ...

@keyframes fadeout {
    0% {
        background-color: $color-save-button;
    }
    100% {
        background-color: $color-btn;
    }
}

.some-animated-css-class {
    background-color: $color-save-button;
    animation-name: fadeout;
    animation-duration: 2s;
    animation-fill-mode: forwards;
}

I get the error only when some-var-that-toggles-true-and-false goes from true to false which should remove the css class doing the animation. Also the css animation only takes 2 seconds, but the css class isn't removed until after like 5 seconds so it's not like I'm removing the class in the middle of the animation.

Maybe this issue need to be reopened?

jeffswitzer picture jeffswitzer on 28 Nov 2017
👍9

error appears on iOS if you're going to manipulate element properties while doing some animations

For example: on layout touch => set style translateY of element X for pulldown;
but clicking on layout childs tap (icon f.e.) => animate some properties of element X for opening.

=> animation starts => and in touch event you're going to manipulate manually which will cause the animation to stop.

jhoopmann picture jhoopmann on 20 Dec 2017
👍2

Also getting that ugly error in the console:

JS: Error: Animation cancelled. JS: at KeyframeAnimation._rejectAnimationFinishedPromise (file:///data/data/org.nativescript.WaterTrend/files/app/tns_modules/tns-core-modules/ui/animation/keyframe-animation.js:208:22) [angular] ...

yyankov picture yyankov on 25 Dec 2017
👍2

Also here:

this is the code:

this.view.animate({ scale: { x: 1, y: 1 }, duration: 50 })

this is the error

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:569:26: Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:98:31 [<root>]

@jlooper - maybe we should reopen this issue.

shabib3 picture shabib3 on 14 Feb 2018
👍4

+1

ManuelSch picture ManuelSch on 15 Mar 2018

I also see this issue on 3.4.1 and 4.0.0

fpaaske picture fpaaske on 12 Apr 2018
👍1

@jlooper @hdeshev - I can confirm this issue is still prevalent on 4.0.0. Perhaps it's time to reopen?

vultix picture vultix on 13 Apr 2018

+1

Socha17 picture Socha17 on 26 Apr 2018

+1

cerireyhan picture cerireyhan on 24 May 2018

It’s due to another misusage of ‘throw’ around animation handling - I’ll submt a PR shortly.

NathanWalker picture NathanWalker on 24 May 2018
🎉3

@NathanWalker Is it merely an informative error or does it also stop further code execution ? IMHO it's just an informative error.

RoyiNamir picture RoyiNamir on 24 May 2018

@RoyiNamir @NathanWalker For me its merely an informative error, no crashes but still annoying.

CONSOLE ERROR file:///app/tns_modules/@angular/core/bundles/core.umd.js:1487:24: ERROR Error: Uncaught (in promise): Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/keyframe-animation.js:215:31 [angular] cancel@file:///app/tns_modules/tns-core-modules/ui/animation/keyframe-animation.js:126:45 [angular] file:///app/tns_modules/tns-core-modules/ui/styling/style-scope.js:311:68 [angular] forEach@[native code] [angular] stopKeyframeAnimations@file:///app/tns_modules/tns-core-modules/ui/styling/style-scope.js:311:21 [angular] file:///app/tns_modules/tns-core-modules/ui/styling/style-scope.js:278:41 [angular] _batchUpdate@file:///app/tns_modules/tns-core-modules/ui/core/view-base/view-base.js:278:28 [angular] updateDynamicState@file:///app/tns_modules/tns-core-modules/ui/styling/style-scope.js:277:31 [angular] onChange@file:///app/tns_modules/tns-core-modules/ui/styling/style-scope.js:254:36 [angular] _onCssStateChange@file:///app/tns_modules/tns-co

I simply show/hide a label using two animations.

<Label [class.transparent]="!showEmailHint() && emailDirty()" [class.opaque]="showEmailHint() && emailDirty()" class="opacity-0 text-primary text-uppercase m-b-4 t-12" text="E-Mail"></Label>

`.opaque {
animation-name: opaque;
animation-duration: 0.8s;
animation-fill-mode: forwards;
}

@keyframes opaque {
from { opacity: 0; }
to { opacity: 1; }
}

.transparent {
animation-name: transparent;
animation-duration: 0.8s;
animation-fill-mode: forwards;
}

@keyframes transparent {
from { opacity: 1; }
to { opacity: 0; }
}`

cerireyhan picture cerireyhan on 24 May 2018

It has potential to crash an app however often will just leave app in unstable state which may cause oddities later during app usage.

NathanWalker picture NathanWalker on 24 May 2018

@NathanWalker Can we reopen the issue to follow it?

cerireyhan picture cerireyhan on 24 May 2018

It really worries me that this kind of issue (with a lot of reports. Mine, for example, dates to late 2016) just gets closed despite the fact that multiple people are reporting the same thing.
If it were just an esthetic issue I'd understand but this has the potential to break the app during usage.

Update: @NathanWalker, thanks for looking into this :)

alterx picture alterx on 24 May 2018
👍3

@hdeshev Could you please reopen this issue... I have a PR coming for this.

NathanWalker picture NathanWalker on 24 May 2018
❤3

@alterx I can certainly understand that. Please see PR above.

NathanWalker picture NathanWalker on 24 May 2018
❤2 👍2

Thanks to @NathanWalker for addressing that with a PR :)
It's not included in the 4.1 official release, but it will be available in @next

vakrilov picture vakrilov on 31 May 2018
👍4

Still facing that problem with nativescript 4.2.4 .
steps to reproduce the problem:
just install nativescript-ngx-slides plugin and i set some slides inside it and make it autoplay using setInterval function and when i try to make a half swipe(make a swipe and cancel it before going to next slide) i'm getting this error:

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:676:30: Unhandled Promise rejection: Animation cancelled. ; Zone: <root> ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:100:31 [<root>] animationFinishedCallback@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:148:57 [<root>] animationDidStopFinished@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:70:35 [<root>] UIApplicationMain@[native code] [<root>] start@file:///app/tns_modules/tns-core-modules/application/application.js:272:26 [<root>] run@file:///app/tns_modules/tns-core-modules/application/application.js:300:10 [<root>] bootstrapNativeScriptApp@file:///app/tns_modules/nativescript-angular/platform-common.js:153:26 [<root>] bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:87:38 [<root>]

alqabali picture alqabali on 17 Oct 2018
👍5

Still reproducible by using the animate function, for example:
elem.animate({ scale: { x: 1, y: 1 }, opacity: 1, duration: 50 })

I believe this happens when multiple animations are overlapping; in this case it's part of an animation when a button is tapped. That tap will start the segue to a new view, and the second the slide animation to the new VC starts I get the Animation cancelled error.

JillevdW picture JillevdW on 28 Nov 2018

Like @alqabali & @JillevdW this errors still occurs (ns-angular 7.1.0).
In my case I link several animations for a "bounce" effect:

```
this.error.nativeElement
.animate({
translate: { x: 0, y: 2 },
curve: enums.AnimationCurve.linear,
duration: 150,
})
.then(() =>
errorContainer.animate({
translate: { x: 30, y: 2 },
curve: enums.AnimationCurve.linear,
duration: 53,
})
)
.then(() =>
errorContainer.animate({
translate: { x: 15, y: 2 },
curve: enums.AnimationCurve.linear,
duration: 75,
})
)
.then(() =>
errorContainer.animate({
translate: { x: 0, y: 2 },
curve: enums.AnimationCurve.linear,
duration: 75,
})
)
.then(() =>
errorContainer.animate({
translate: { x: 5, y: 2 },
curve: enums.AnimationCurve.linear,
duration: 75,
})
)
.then(() =>
errorContainer.animate({
translate: { x: 0, y: 2 },
curve: enums.AnimationCurve.linear,
duration: 75,
})
);

CONSOLE ERROR file:///app/tns_modules/nativescript-angular/zone-js/dist/zone-nativescript.js:676:30: Unhandled Promise rejection: Animation cancelled. ; Zone: ; Task: null ; Value: Error: Animation cancelled. _rejectAnimationFinishedPromise@file:///app/tns_modules/tns-core-modules/ui/animation/animation-common.js:100:31 []
animationFinishedCallback@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:148:57 []
animationDidStopFinished@file:///app/tns_modules/tns-core-modules/ui/animation/animation.js:70:35 []
UIApplicationMain@[native code] []
start@file:///app/tns_modules/tns-core-modules/application/application.js:273:26 []
run@file:///app/tns_modules/tns-core-modules/application/application.js:301:10 []
bootstrapNativeScriptApp@file:///app/tns_modules/nativescript-angular/platform-common.js:187:26 []
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:105:38 []
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:89:26 []
./main.ts@file:///app/bundle.js:1532:148 []
__webpack_require__@file:///app/bundle.js:76:34 []
checkDeferredModules@file:///app/bundle.js:45:42 []
file:///app/bundle.js:149:38 []
anonymous@file:///app/bundle.js:150:12 []
evaluate@[native code] []
moduleEvaluation@[native code] []
promiseReactionJob@[native code] []
require@[native code] []
anonymous@file:///app/starter.js:2:8 []
evaluate@[native code] []
moduleEvaluation@[native code] []
promiseReactionJob@[native code] []
```
Note : this errors occurs only on iOS for me.

jbarnabe picture jbarnabe on 3 Jan 2019
👍3

Hi, any updates on this one?

Nevaan picture Nevaan on 25 Nov 2019
👍5

any updates?

dudipsh picture dudipsh on 12 Jan 2020
👍6

Hey guys! I am also getting the same error when using .animate. Any new updates on this?

As a workaround (given that the app doesn't crash with this error), I put the animate in a try/catch and don't put anything in the catch so no errors are shown.
Ex:

try {
  elem.nativeElement.animate(getAnimation());
} catch (err) {}
cavalos0086 picture cavalos0086 on 20 Apr 2020
Was this page helpful?
0 / 5 - 0 ratings

Related issues

triniwiz picture triniwiz  ·  3Comments
VladimirAmiorkov picture VladimirAmiorkov  ·  3Comments
EricRobertBrewer picture EricRobertBrewer  ·  3Comments
samuelvisscher picture samuelvisscher  ·  3Comments
sunpasup picture sunpasup  ·  3Comments