Stack Overflow
Stack Overflow

Questions tagged [angular-animations]

Use this tag to better reference animations in angular versions 2.0 and over or the BrowserAnimationsModule.

Angular's animation system lets you build animations that run with the same kind of native performance found in pure CSS animations. You can also tightly integrate your animation logic with the rest of your application code, for ease of control.

To find more information :

664 questions
213
votes
15 answers

'Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.'

I upgraded an Angular 4 project using angular-seed and now get the error Found the synthetic property @panelState. Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application. How can I fix this? What exactly is…
Aravind
  • 40,391
  • 16
  • 91
  • 110
160
votes
7 answers

angular 2 ngIf and CSS transition/animation

I want a div to slide in from the right in angular 2 using css.

Notes

I works fine if i…
Han Che
  • 8,239
  • 19
  • 70
  • 116
88
votes
1 answer

What is the purpose of Angular animations?

I've been wondering for some time now why should I use Angular animations over CSS animations. I see few areas one might consider before using them: Performance In the first step I found this question which deals only with performace side of…
Dan Macak
  • 16,109
  • 3
  • 26
  • 43
71
votes
4 answers

Angular (4, 5, 6, 7) - Simple example of slide in out animation on ngIf

What is the bare minimum and Angular4's native way to slide in and slide out a container element? e.g.
Slide In Content (from top to down just like jQuery.slideDown()) when show turns to true. Slide Out…
abdul-wahab
  • 2,182
  • 3
  • 21
  • 35
67
votes
2 answers

What's the difference between BrowserAnimationsModule and NoopAnimationsModule?

With the new Angular-Material release, you need to add a module for Angular-Animations. You can choose between two BrowserAnimationsModule and NoopAnimationsModule. The official guide states: Some Material components depend on the Angular…
OddDev
  • 3,644
  • 5
  • 30
  • 53
45
votes
4 answers

Parameter in to Animation Angular2

I'm trying to make a simple animation like the simple jQuery below animate({'left' : left_indent}) I'm using the Angular2 Animations but the problem is how do I pass the left_indent parameter outside my Component Class in to the animation trigger?…
ahrberg
  • 617
  • 1
  • 8
  • 19
35
votes
6 answers

Cannot find module angular/animations

I am using webpack in angular2 and when I try to run my app I get an error stating Cannot find module "@angular/animations" package.json { "name": "angular-quickstart", "version": "1.0.0", "description": "QuickStart package.json from the…
Lijin Durairaj
  • 3,341
  • 11
  • 31
  • 50
32
votes
1 answer

Angular 4.3.6 animations not working properly

After migrating from Angular 4.3.5 to 4.3.6 something with animations went bad (with 4.3.5 was everything alright). The problem is that, when the application starts, the login component is loaded, and that component has fadeIn animation to show up.…
Null
  • 518
  • 7
  • 13
32
votes
2 answers

adding an angular animation to a host element

i added an animation to the host via @Component({ ...., animations: [ trigger('slideIn', [ ... ]) ], host: { '[@animation]': 'condition' } } which worked well, on compilation i was told this is deprecated…
Oliver Renner
  • 533
  • 1
  • 5
  • 9
29
votes
4 answers

Angular 4 - Scroll Animation

I'm creating a webpage having full page width/height div's. While scrolling down I've two types of methods. Scroll on Click //HTML //JS goToDiv(id) { let element = document.querySelector("#"+id); …
Sumit Ridhal
  • 1,359
  • 3
  • 14
  • 30
23
votes
2 answers

How to conditionally add animations in Angular 2

I have a form component that has fields, some fields I want to animate when they appear in the form, but not every field.
…
Devcon
  • 767
  • 2
  • 8
  • 23
21
votes
1 answer

NullInjectorError: No provider for AnimationBuilder in Angular 6

Hello I working with the Angular 6 And also with the material design I have included all the dependency of the material and also of the animations as well It's not giving error at time of the compilation but I get following error at time of…
Nitin
  • 881
  • 2
  • 10
  • 37
21
votes
4 answers

Angular 4 - Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application

I'm having a problem when I launch my Angular app on my browser. Everything works code speaking but I'm still getting this error: Found the synthetic property @routerAnimations. Please include either BrowserAnimationsModule or NoopAnimationsModule…
Messerschmitt
  • 267
  • 1
  • 3
  • 8
19
votes
1 answer

Angular animations failing for opacity settings (and more bugs)

I've got a card component that wraps another different components inside. It's like a wrapper component for making the UI fancy; I guess you have seen this approach many times. Thing is, I want these cards to be hideable, just showing the footer…
Zerok
  • 1,323
  • 1
  • 24
  • 56
19
votes
6 answers

Integrate AOS library with Angular4 application

I am working on Angular 4.4.6 application and I want to implement some animations on scroll using the awesome plugin AOS my code: app.component.ts import * as AOS from 'aos'; @Component({ selector: 'app-root', templateUrl:…
Peter Wilson
  • 4,150
  • 3
  • 35
  • 62
1
2 3
…
44 45