How to animate bottom sheet in Figma prototype

Hey folks,
Here's a quick video explaining how you can animate bottom sheets on your mobile prototype. Modal bottom sheets are an alternative to inline menus or simple dialogs on mobile and provide room for additional items, longer descriptions, and iconography. They must be dismissed in order to interact with the underlying content.
This is just a simple tutorial for a login form, you can use this technique for all your bottom sheets and even define them as components so whenever the button is called the bottom sheet will appear. I'll explain this in another tutorial.
Cheers

[@srinivasnahak3473]

It helpled me so much!! Thank youuuu

[@kbetaxyz]

that easy-peasy towards the end! 💥

[@mansoormasood2980]

Amazing work ❤️❤️✌️ seeing this one in Millions insha'Allah

[@hashirtihami]

Thank you bro ❤

[@khushaartanveer874]

Cool technique

[@annisaautami]

thank you so much!

[@hashirtihami]

You’re welcome! Don’t forget to subscribe the channel 🙌🏻

[@BEPrimAnim]

Any way I can also make a darkened background to appear on the background along with this? Also, thank you in advance!

[@hashirtihami]

Yes sure.. Just increase the opacity of black colour to 100% if you want a full black background behind the overlay.
You can see that at 1:09 "interaction details popup", check mark the "add background behind overlay" and set the colour opacity under it.
Hope it works.. and don't forget to subscribe ma channel yo! thanks

[@BEPrimAnim]

@@hashirtihami Oh my god. That indeed did work. Thank you so much for both this video and this advice! Extremely helpful, my friend.

[@WhatDemiWore1]

I wish you showed how to collapse it as well 😢

[@hashirtihami]

Hello hello!
There’s one trigger there already.. you just need to mark the checkbox for “Close when flicking outside”
But lemme know if you wanna collapse it some other way (according to your requirement)