# Angular Animations {#angular-animations}


Animation patterns used in the Gauzy UI.


## Angular Animation Module {#angular-animation-module}


```typescript
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";

@NgModule({
  imports: [BrowserAnimationsModule],
})
export class AppModule {}
```


## Common Animations {#common-animations}



### Fade In/Out {#fade-inout}


```typescript
import { trigger, transition, style, animate } from "@angular/animations";

export const fadeInOut = trigger("fadeInOut", [
  transition(":enter", [
    style({ opacity: 0 }),
    animate("300ms ease-in", style({ opacity: 1 })),
  ]),
  transition(":leave", [animate("200ms ease-out", style({ opacity: 0 }))]),
]);
```


### Slide In {#slide-in}


```typescript
export const slideIn = trigger("slideIn", [
  transition(":enter", [
    style({ transform: "translateX(-100%)" }),
    animate("300ms ease-out", style({ transform: "translateX(0)" })),
  ]),
]);
```


### List Stagger {#list-stagger}


```typescript
export const listAnimation = trigger("listAnimation", [
  transition("* => *", [
    query(
      ":enter",
      [
        style({ opacity: 0, transform: "translateY(-15px)" }),
        stagger("50ms", [
          animate(
            "300ms ease-out",
            style({ opacity: 1, transform: "translateY(0)" }),
          ),
        ]),
      ],
      { optional: true },
    ),
  ]),
]);
```


## Usage in Components {#usage-in-components}


```typescript
@Component({
  animations: [fadeInOut, slideIn],
  template: `
    <div @fadeInOut *ngIf="isVisible">Content</div>
    <div @slideIn>Slides in on load</div>
  `,
})
export class MyComponent {}
```


## Where Used {#where-used}


| Component        | Animation          |
| ---------------- | ------------------ |
| Sidebar          | Slide open/close   |
| Modals           | Fade in/scale      |
| Notifications    | Slide in from top  |
| Task board cards | Drag and drop ease |
| Data loading     | Skeleton shimmer   |


## Related Pages {#related-pages}


- [Nebular Components](https://sourcey-gauzy.pages.dev/frontend/nebular-components/index.md) — UI library
- [Theme Customization](https://sourcey-gauzy.pages.dev/frontend/theme-customization-deep-dive/index.md) — theming