@engie-group/fluid-design-system-angular/src/components/tooltip/tooltip.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 tooltipAnimation: {
  readonly tooltip: AnimationTriggerMetadata;
} = {
  tooltip: trigger('tooltip', [
    state('void', style({opacity: 0, transform: 'scale3d(0, 0, 1)'})),
    state('*', style({opacity: 1, transform: 'scale3d(1, 1, 1)'})),
    transition(
      ':enter',
      animate(`{{enterAnimationDuration}} ${njSemanticMotionEasingLinearOutSlowIn}`),
      defaultParams,
    ),
  ]),
};