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

[Xoma (Kumaraswamy)]

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.

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

Phase • Animations made easy!

Adding animations to apps made with Kodular had never been an easy task. Even though we have a dedicated component, Animation Utilities, for animations in Kodular, it was never that easy to use. That’s why I thought of creating Phase as my first extension. Introducing Phase [image] Phase is powerful yet an easy to use animation extension. It makes it possible to animate any View/UI component on the screen. So, no matter if it’s a simple label or a vertical arrangement containing …

---

Step 2

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

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


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.

Animated Side Menu || Kodular Tutorial 2020 || Making an Animated Side Menu

---

Final Result

AIA file - Google Drive: Sign-in

Bye-bye, happy Koding

[Alapjeet (Alapjeet Singh)]

Cool Guide…

[nandu_aeer (Nandu)]

Good but Is it posible to swipe right left?

[Zia_Choudhary (Zia Ur Rahman)]

Amazing nice work

[Amit_Narwal]

Wow
Nice tutorial man, good job

[Xoma (Kumaraswamy)]

@nandu_aeer

Good but Is it posible to swipe right left?

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

[Xoma (Kumaraswamy)]

Thank you all

[Nivu_Techy (Nived P)]

cool one supper

[SuperAbhishek (Abhishek Pratap Singh)]

Awesome

[Vedang (Indian boy)]

@Xoma

Torurial

[Yash_Agarwal_376 (Yash aggarwal)]

Very nice guide #something_new

[Piman (Mossy Michael)]

Very useful, i"m gonna use it right now

[nikzdreamer2001 (Nikhil Kumar Gupta)]

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…

[nikzdreamer2001 (Nikhil Kumar Gupta)]

Wait Sending preview with aia

[Xoma (Kumaraswamy)]

@nikzdreamer2001

not efficient or will misbehave

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

[Vedang (Indian boy)]

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

[nikzdreamer2001 (Nikhil Kumar Gupta)]

Preview

AIA

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

[nikzdreamer2001 (Nikhil Kumar Gupta)]

@nandu_aeer

Is it posible to swipe right left?

@Xoma

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

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

[nandu_aeer (Nandu)]

Is there any way to create swipe right left

[nikzdreamer2001 (Nikhil Kumar Gupta)]

yes there is