Animated Side menu | Custom Side Menu || Guide with Video Tutorial

:grinning: Hi friends, I’m Kumar and I’m back with a new guide with video tutorial. Just I was practising on improving on UI and thought to Animated side menu which looks cool. :cool:



Click here or scroll down to view the video tutorial.

So let’s start

Step 1
Do the following things as mentioned. At the right side of the side menu arrangement we have space of width 97% you can prefer 95% too.

Phase animation by @Shreyash


Step 2
blocks (37)
Here, Side menu component is Vertical arrangement. We did this because to set the shape of Side menu which is a vertical arrangement to rounded.


Step 3
blocks (38)
When the menu open button is clicked we will visible the component and animate using the extension. You can change animation according to your wish.


Step 4
blocks (39)
blocks (40)
When the close button is clicked it animate the opposite of the ID 1 animation and when it’s done, it will set the component visible to false.


Step 5
Watch the video then like then share then subscribe. :stuck_out_tongue_winking_eye: :crazy_face:


Final Result

AIA file - AnimatedSideMenu.aia - Google Drive

Bye-bye, happy Koding

13 Likes

Cool Guide…

1 Like

Good but Is it posible to swipe right left?

1 Like

Amazing :heart::heart: nice work

1 Like

Wow :smiley:
Nice tutorial man, good job

1 Like

Maybe it’s possible with an extension like horizontal scroll extension.

1 Like

Thank you all

1 Like

cool one supper

1 Like

Awesome :heart_eyes: :heart_eyes:

1 Like

Torurial :thinking: :crazy_face:

1 Like

Very nice guide #something_new

1 Like

Very useful, i"m gonna use it right now :partying_face:

1 Like

Hi @Xoma,
This layout is not efficient or will misbehave as if you take another layout(that will be main content) below you button then when your menu will be visiblw then it should re-arrange all the arrangements…

2 Likes

Wait Sending preview with aia

1 Like

you will have to take another layout of the same width, I know that what are you telling :+1:t3: it’s just sample, I have done more complicated but for tutorial just a piece is enough

2 Likes

Yeah you are right @nikzdreamer2001. I also wanted to say same thing

2 Likes

Preview

AIA

I did some changes to clarify what i want to say
AnimatedSideMenu.aia (110.3 KB)

1 Like

it is not possible From that too and also not from phase extension

1 Like

Is there any way to create swipe right left

2 Likes

yes there is

1 Like