The latest Ionic Framework 6.1 has introduced a groundbreaking feature that empowers developers to dynamically change the current breakpoint of a sheet modal. This innovative functionality enables you to create stunning animations for your sheet modals, tailored to meet the unique demands of your app.

To get started with this game-changing feature, you'll need to incorporate a sheet modal into your Ionic project. The example provided is based on Angular, but this capability extends to vanilla web component implementations and all supported frameworks.

Check out this simplified example:

`html

Open Modal

trigger="sheet-modal"

[initialBreakpoint]="0.25"

[breakpoints]="[0.25, 0.5, 1]">

Move to 0.25

Move to 0.5

Move to 1

`

This sheet modal will initially appear at the 0.25 breakpoint when you click the button. You can also set available breakpoints for 0.25, 0.5, and 1 (fully expanded).

To dynamically change the breakpoint, query the ion-modal element to access its public API function: setCurrentBreakpoint.

In your code, import the necessary components:

`typescript

import { Component, ElementRef, ViewChild } from '@angular/core';

@Component({

selector: 'app-sheet-modal-example',

templateUrl: 'sheet-modal-example.component.html'

})

export class SheetModalExample {

@ViewChild('#modal') modal: ElementRef;

moveTo(breakpoint: number) {

const { nativeElement } = this.modal;

if (!nativeElement) return;

nativeElement.setCurrentBreakpoint(breakpoint);

}

}

`

Now, your sheet modal should seamlessly transition to the desired breakpoint when you interact with the individual items.

Unlocking New Possibilities

This feature has endless possibilities. You can create an iOS maps clone-like feature or enhance your app's overall user experience. With swift app development, the possibilities are endless!

Source code: https://github.com/sean-perkins/ionic-6.1.0-maps-example