How to create 3D animated sidemenu in ionic?

Ionic Framework ionic-v3
1

Good day,

I am trying to create 3D transition & animation for the sidemenu in Ionic 3 similar to the following:

see a live demo here: https://codepen.io/jdnichollsc/pen/zqwVwz (using ionic 1).

I am trying to do the same animations and transitions with ionic 3.

I tried using CSS transform and translate3d similar to the link above.

  transform: translate3d(275px, 0px, 0px) scale(.9) !important;
  opacity: 0.9;
  -webkit-filter: blur(2px);
  filter: blur(2px);
  transform-origin: center center;

but that didn’t work as expect, the sidemenu when opened will use regular ionic transition and when fully opened it will do the translate3d

I even tried looking at the source code of both ion-nav, ion-menu, and ion-toolbar (one of them is causing the normal translate2d behavior, I wanted to override that but didn’t really figure out where is its logic).

any ideas?

Thanks

Abdulmajeed.

2

Try this :
in app.scss use

ion-backdrop.show-backdrop{ /* paste the code here */ } </code