Map and Drawer animation

Map Button

First, let’s create a button to navigate to the Map screen. Add a Stack V and name it: Map Button. Set the Alignment and the Distribution to Center. The Width is 100PT, the Height is 36PT. Pin To Bottom Center, toggle Pin To Page with a Depth of 10. To position it above the Tab bar, set the Offset Y to -106PT. In it, add a Button element. Set the Button Size to Custom, Button Style to Filled, only check the text “Map” and the type is Footnote. Set the Width to 100PT and the Height to 36PT. In Appearance, set the Title Color to white, Corner Radius to 24 and an Effect Background Blur Dark.

• Set the Alignment and the Distribution to Center
• Set the Width to 100PT and the Height to 36PT
• Pin To Bottom Center, toggle Pin To Page with a Depth of 10.
• Set the Offset Y to -106PT

In the Map Button, add a Medium Button element. Set the Button Size to Custom, Button Style to Filled, only check the text “Map” and the type is Footnote.

• Set the Width to 100PT and the Height to 36PT
• In Appearance, set the Title Color to white,
• Set Corner Radius to 24 and add Effect Background Blur Dark

Then, let’s add a Diamond Button, set the margin left to -14 and Pin To Center Left with a Depth of 5. Set the background to Clear and add an Effect Background Blur Dark. Set the Icon to “mapping.and.ellipse” with the color white.

Open Map

While selecting the Page, add a new state and name it: Open Map. Then, on the Map Button, add a Tap trigger with a Set State action where the Target is Page, the Start State is Default and End State is Open Map. On the animation, set the Duration to 0.5s and Easing to Ease In & Out.

Hiding elements

The main differences between the Default state and the Open Map one is that we are replacing everything below the Segmented controls by a Map element and a Drawer.

In the Open Map state, we will hide the Card Container, set the Offset Y of the Tab bar to 100PT and set the Offset Y of the Map Button to 48PT.

Map element

Then, let’s add a Stack V and name it: Map Container. Set the Width to 100%, the Height to 730PT and set the Offset Y to 120PT. Next, add a Map element. On the side, you will see a Pin icon, tap on it and insert a couple pins. Set the Width to 100% and the Height to 730PT. In Appearance, set the Corner Radius to 30 and set the UI Style to your preference. In Settings, you have a lot of Map options: you can set the starting location to a specific pin or even change it.

• Set the Width to 100%, the Height to 730PT
• Set the Offset Y to 120PT.

Next, add a Map element. On the side, you will see a Pin icon, tap on it and insert a couple pins.

• Set the Width to 100% and the Height to 730PT
• In Appearance, set the Corner Radius to 30 and set the UI Style to your preference
• In Settings, you have a lot of Map options: you can set the starting location to a specific pin or even change it

Close Button

Now, let’s add a close button to transit to the Default state. On the Side Menu, we already designed a close button so let’s make it into a component and use it on this screen. Set the margin top to 47, margin right to 16 and Pin To Top Right. Add a Tap trigger with the Set State action. The target is the Page, Start state is Current State and End State is Default. For the animation, set the Duration to 0.5s and Easing to Ease In & Out.

• Set the margin top to 47, margin right to 16 and Pin To Top Right
• Add an Offset Y to 48PT
• Add a Tap trigger with the Set State action. The target is the Page, Start state is Current State and End State is Default
• For the animation, set the Duration to 0.5s and Easing to Ease In & Out

Drawer

The drawer is very similar to a modal but it sticks to the bottom. By using the pan gesture, we will be able to open and close the drawer. First, add a Stack V and name it: Drawer. Set the Gap to 30PT and Alignment to Center. Set the Width to 100% and the Height to 700PT. For the paddings (0, 16, 32, 16) and Pin To Bottom Center with Pin To Page. In Appearance, set the BG Color to #313A5B - #21273D and the Corner Radius top to 20. Add a Border 1PT white at 20% and a Drop Shadow: Offset X 0PT, Offset Y 10PT, Blur 20, Color Black at 30%.

• Set the Gap to 30PT and Alignment to Center
• Set the Width to 100% and the Height to 700PT
• For the paddings (0, 16, 32, 16) and Pin To Bottom Center with Pin To Page
• In Appearance, set the BG Color to #313A5B - #21273D
• Set the Corner Radius top-left to 20 and top-right to 20
• Add a Border 1PT white at 20%
• Add Drop Shadow: Offset X 0PT, Offset Y 10PT, Blur 20, Color Black at 30%.

Then, let’s add elements in it, start with a stack and name it: Indicator. Set the Width to 54PT and the Height to 5PT. Add margin top to 8. In Appearance, set the BG Color to white at 30% opacity and the Corner Radius to 16.

• Set the Width to 54PT and the Height to 5PT
• Add margin top to 8. In Appearance
• Sett the BG Color to white at 30% opacity
• Set the Corner Radius to 16
• Add a Text “289 Cabins”, Type to Subhead 2 and Color White

Duplicate the Booking Card 4 times and make the Drawer into a component.

Drawer Animation

Create a new State called Show. In Default, set the Scrolling to None and the Offset Y to 610PT. Then, in Show, set the Scrolling to vertical and disable the indicator. Set the Offset Y to 0. To allow the Pan gesture, add a trigger While Panning, set Pan Direction to Up & Down, Pan Boundary to Screen and toggle the Optimize for Dragging. Add the action Set State, Target Self, Start State Default, End State Show, Trigger Direction Up at 0.5s Ease In & Out.

• In Default, set the Scrolling to None and the Offset Y to 610PT. Then, in Show, set the Scrolling to vertical and disable the indicator. Set the Offset Y to 0
• To allow the Pan gesture, add a trigger While Panning, set Pan Direction to Up & Down, Pan Boundary to Screen and toggle the Optimize for Dragging. Add the action Set State, Target Self, Start State Default, End State Show, Trigger Direction Up at 0.5s Ease In & Out

Fix bugs

On the Side Menu, make sure to set the Offset Y to 48 to hide it. In Default, hide the Map Container.