How to create 3D animated sidemenu in ionic 2/ ionic 3

@alshamsan92 wrote:

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: (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 tries looking at the source code of both ion-nav 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.

Posts: 1

Participants: 1

Read full topic