ionic-team / ionic-team/ionic-framework

feat: provide easier way of extending/overriding built in animations

Open
#24,964 2 comments 8 reactions 0 assignees View on GitHub
package: core type: feature request
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already include this feature request, without success.

### Describe the Feature Request

Export the already created animations for modals so that they can be publicly consumed by users of this library

### Describe the Use Case

I understand that I can build my own animations which is great but sometimes I just want to tweak an existing animation slightly. Today the only way to do that is to bring the source code in to my project.

### Describe Preferred Solution

Ideally, I would like to simply import the already created animations and then call the methods on the Animation object to enhance it for my purposes

### Describe Alternatives
Perhaps an option when presenting the modal could pass to you the animation that would be used and allow you to act upon it before doing the final presentation.

### Related Code

Here is an example of how I might expect this to work:

```typescript
import { sheetEnterAnimation } from '@ionic/core';

export const myEnterAnimation = (
baseEl: HTMLElement,
opts: ModalAnimationOptions
): Animation => {
const animation = sheetEnterAnimation(baseEl, opts);

// here I'm moving the modal so it renders somewhere else but you can imagine any other tweaks
// that are possible by hooking into the Animation object
animation.beforeAddWrite(() => {
const modal = document.querySelector('ion-modal');
const appTabs = document.querySelector('app-tabs');
appTabs.appendChild(modal);
});

return animation;
};
```

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start by locating the modal animation entry points, including sheetEnterAnimation, ModalAnimationOptions, and the Animation object imported from @ionic/core. Determine how the built-in modal animations are currently exposed and what public export would support the requested customization, then verify that consumers can import and extend them as shown.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.