Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
3 tasks done
crhistianramirez opened this issue Mar 19, 2022 · 2 comments
Open
3 tasks done
Labels
package: core @ionic/core package type: feature request a new feature, enhancement, or improvement

Comments

@crhistianramirez
Copy link

crhistianramirez commented Mar 19, 2022

Prerequisites

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:

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

@ionitron-bot ionitron-bot bot added the triage label Mar 19, 2022
@liamdebeasi liamdebeasi changed the title feat: Expose built-in animations feat: provide easier way of extending/overriding built in animations Mar 21, 2022
@liamdebeasi liamdebeasi added type: feature request a new feature, enhancement, or improvement package: core @ionic/core package labels Mar 21, 2022
@ionitron-bot ionitron-bot bot removed the triage label Mar 21, 2022
@3zzy
Copy link

3zzy commented Mar 24, 2022

This is absolutely needed, would potentially also resolve my issue about page transitions if I could simply reuse the existing animation.

@sean-perkins
Copy link
Contributor

Combining with #25243, when providing an easier way of extending/overriding and accessing the built-in animations, we should consider exporting the base animations from the library, so that developers can use them directly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
package: core @ionic/core package type: feature request a new feature, enhancement, or improvement
Projects
None yet
Development

No branches or pull requests

4 participants