Animations of Sidemenu & Modals faster than own animations

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'))     ])   ], 

1 Answers

Answers 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)

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati