Animations of Sidemenu & Modals faster than own animations

Question

The animations of the out and insliding sidemenu or a sliding up modal box from the bottom (Ionic2 Modal) is very fast and smooth.

Now I defined my own animations for floating action buttons. This animation is quite slower than the ionic animations. What is the difference?

Why are my animations a little bit laggy?

animations: [
    trigger('heroState', [
      state('false', style({
        right: '-500px',
      })),
      state('true',   style({
        right: '0px',
      })),
      transition('false => true', animate('500ms ease-in')),
      transition('true => false', animate('500ms ease-out'))
    ])
  ],

Answer 1

@rakete: I think ionic use the different cubic bezier to control the speed over modal animation. Can you try these below ?

transition('false => true', animate('500ms cubic-bezier(0.65, 0.05, 0.36, 1)')

And

transition('false => true', animate('500ms cubic-bezier(0.36, 0.66, 0.04, 1)')

Read more: Cubic Bezier
Codepen: cubic-bezier(0.36, 0.66, 0.04, 1)