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

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.

About this issue

  • Original URL
  • State: closed
  • Created 8 years ago
  • Reactions: 2
  • Comments: 61 (7 by maintainers)

Most upvoted comments

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?

+9
jeffswitzer on Nov 28, 2017

any updates?

+6
dudipsh on Jan 12, 2020

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

+6
jlooper on Sep 16, 2016

Hi, any updates on this one?

+5
Nevaan on Nov 25, 2019

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>]

+5
alqabali on Oct 17, 2018

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

+4
vakrilov on May 31, 2018

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

+4
NathanWalker on May 24, 2018

same here (3.0.1)

+4
danielKugler on May 19, 2017

This issue continues with tns version: 2.5.1

+4
smarza on Feb 18, 2017

confirmed I see this issue when using keyframes as well

+4
tskweres on Dec 21, 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.
+4
9thwall on Oct 25, 2016

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: <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:273:26 [<root>]
run@file:///app/tns_modules/tns-core-modules/application/application.js:301:10 [<root>]
bootstrapNativeScriptApp@file:///app/tns_modules/nativescript-angular/platform-common.js:187:26 [<root>]
bootstrapApp@file:///app/tns_modules/nativescript-angular/platform-common.js:105:38 [<root>]
bootstrapModule@file:///app/tns_modules/nativescript-angular/platform-common.js:89:26 [<root>]
./main.ts@file:///app/bundle.js:1532:148 [<root>]
__webpack_require__@file:///app/bundle.js:76:34 [<root>]
checkDeferredModules@file:///app/bundle.js:45:42 [<root>]
file:///app/bundle.js:149:38 [<root>]
anonymous@file:///app/bundle.js:150:12 [<root>]
evaluate@[native code] [<root>]
moduleEvaluation@[native code] [<root>]
promiseReactionJob@[native code] [<root>]
require@[native code] [<root>]
anonymous@file:///app/starter.js:2:8 [<root>]
evaluate@[native code] [<root>]
moduleEvaluation@[native code] [<root>]
promiseReactionJob@[native code] [<root>]

Note : this errors occurs only on iOS for me.

+3
jbarnabe on Jan 3, 2019

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

+3
NathanWalker on May 24, 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 😃

+3
alterx on May 24, 2018

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

+3
NathanWalker on May 24, 2018

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.

+3
bzaruk on Feb 14, 2018

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] ...

+2
yyankov on Dec 25, 2017

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.

+2
jhoopmann on Dec 20, 2017

I have the same issue with tns version: 2.5

+2
smarza on Feb 4, 2017

same here (2.4.2)

+2
SBD580 on Feb 2, 2017

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

+2
alterx on Sep 20, 2016

I also see this issue on 3.4.1 and 4.0.0

+1
fpaaske on Apr 12, 2018

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

+1
tjzfg on Jun 24, 2017
Read more comments on GitHub
← nativescript-angular: <ios> and <android> tags do not work inside ActionBar
nativescript-angular: Lazy loaded module route redirectTo ignored or not working →