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

Fluid Design System Angular

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

export const defaultParams = {
  params: {animationDuration: '100ms'},
};

export const sidePanelLayoutAnimation: {
  readonly panelSlideInAndOut: AnimationTriggerMetadata;
  readonly panelOpened: AnimationTriggerMetadata;
} = {
  panelSlideInAndOut: trigger('panelSlideInAndOut', [
    state('void', style({opacity: 0.9, transform: 'translateX(100%)'})),
    state('*', style({opacity: 1, transform: 'none'})),
    transition(
      ':enter, :leave',
      animate(`{{animationDuration}} ${njSemanticMotionEasingFastOutSlowIn}`),
      defaultParams,
    ),
  ]),
  panelOpened: trigger('panelOpened', [
    state('void', style({paddingRight: 0})),
    state('false', style({paddingRight: 0})),
    state('true', style({paddingRight: 'var(--nj-sidepanel-final-width)'})),
    transition(
      '* => *',
      animate(`{{animationDuration}} ${njSemanticMotionEasingFastOutSlowIn}`),
      defaultParams,
    ),
  ]),
};