Skip to content

feat(animations): set smother animations for modal in ionic#31082

Open
os-davidlourenco wants to merge 7 commits intonextfrom
ROU-12702
Open

feat(animations): set smother animations for modal in ionic#31082
os-davidlourenco wants to merge 7 commits intonextfrom
ROU-12702

Conversation

@os-davidlourenco
Copy link
Copy Markdown
Contributor

Issue number: resolves internal


What is the current behavior?

The animations are only defined for iOS and md, and the Ionic theme uses the md animations.

What is the new behavior?

New animation files for Ionic were added to each component that uses animations, based on the md file.
The new Ionic animation file for the modal includes changes to the transitions.
Changes in the gestures for the modal, only for the Ionic theme.

Does this introduce a breaking change?

  • Yes
  • No

Other information

@os-davidlourenco os-davidlourenco requested a review from a team as a code owner April 15, 2026 10:54
@vercel
Copy link
Copy Markdown

vercel bot commented Apr 15, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
ionic-framework Ready Ready Preview, Comment Apr 21, 2026 0:24am

Request Review

@os-davidlourenco os-davidlourenco added package: core @ionic/core package package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 15, 2026
@github-actions github-actions bot removed package: angular @ionic/angular package package: vue @ionic/vue package package: react @ionic/react package labels Apr 15, 2026
Copy link
Copy Markdown
Contributor

@thetaPC thetaPC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Most of the animations are duplicates of md. Please remove those and continue to md as the default. However, the Jira ticket is for modal only. If animations differ from md then please open a new PR for those.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are these snapshots being updated? Nothing changed in the animations or the test.

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Honestly, I don't know, they were updated after ran the pipeline

Comment thread core/src/components/picker-legacy/picker.tsx
Comment thread core/src/utils/overlays.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When I open the modal on the basic page, there's a flicker on the content. Please fix that.

Screen.Recording.2026-04-20.at.3.14.54.PM.mov

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This flicker is not happening due to the change that I made, and was already present. The main reason for this behavior is the style that is injected in the test, and that is only applied after the animation has finished, resulting in this flicker.

Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts Outdated
Comment thread core/src/components/modal/gestures/sheet.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

package: core @ionic/core package

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants