@engie-group/fluid-design-system-angular/src/components/modal/modal.animations.ts

Fluid Design System Angular

import {animate, AnimationTriggerMetadata, state, style, transition, trigger} from '@angular/animations';
import {njSemanticMotionEasingLinearOutSlowIn} from '@engie-group/fluid-design-tokens';

export const defaultParams = {
  params: {enterAnimationDuration: '150ms'},
};

export const modalAnimation: {
  readonly modal: AnimationTriggerMetadata;
} = {
  modal: trigger('modal', [
    state('void', style({opacity: 0, transform: 'scale(0.7)'})),
    state('*', style({opacity: 1, transform: 'none'})),
    transition(
      ':enter',
      animate(`{{enterAnimationDuration}} ${njSemanticMotionEasingLinearOutSlowIn}`),
      defaultParams,
    ),
  ]),
};