fix(transition): make large title animations work in every theme by thetaPC · Pull Request #31559 · ionic-team/ionic-framework

thetaPC · 2026-10-09T21:46:48Z

Issue number: resolves internal

What is the current behavior?

The iOS large title animations rely on the iOS theme's title stylesheet, so they only look right in the iOS theme. With iOS mode and the md or ionic theme, the page transition squashes the title (width scale 0.20 instead of about 0.5), a centered title jumps to the screen edge, and the overscroll stretch slides the title 17px past its padding.

What is the new behavior?

The iOS page transition sets up what it needs itself: it measures the title's text, copies the title's color, font and padding to its copy, starts both copies where the text is rendered so a centered title morphs in place, and hides the back button with visibility so a title placed next to it doesn't shift.
The header stretch sets its own transform origin from the title's text alignment.
Removes the title's animation-only tokens and the cloned title rule, which nothing reads anymore.
Fixes the ionic toolbar briefly showing a centered title off-center while the back button renders.
Adds a title transition test page.

This is the first proof of concept for FW-7295: animations set up what they need instead of relying on a theme's stylesheet.

Does this introduce a breaking change?

Yes
No

Other information

Open each before and after link side by side. For the pull down rows, use Safari on a Mac with a trackpad in Responsive Design Mode for a phone-sized view, or the iOS Simulator. With the page at the top, do a two-finger swipe down over the page content so it bounces past the top. Chrome and Firefox, including their device modes, can't scroll past the top, so the title won't grow there.

Check	Before	After	What to do and look for
Page transition, ionic theme	before	after	Tap "Go (matching back text)", then the back button. Before, the centered big title jumps to the left edge and gets squeezed narrow on its way to the back button. After, it shrinks and slides from where it sits, and grows back the same way
Page transition, md theme	before	after	Tap "Go (matching back text)", then the back button. Before, the big title doesn't move to the back button. After, it shrinks and slides into it, and grows back the same way
Page transition, ios theme	before	after	Tap "Go (matching back text)", then the back button. Looks the same on both
Toolbar centering	before	after	Tap "Go (matching back text)". Before, the "Message" title appears right of center for a moment, then jumps to the center. After, it's centered from the start
Pull down, md theme	before	after	Pull down at the top of the page. Before, the growing title's left edge moves past the page margin. After, the left edge stays in place
Pull down, md theme, RTL	before	after	Same as above, on the right edge
Pull down, ios theme	before	after	Pull down at the top of the page. Looks the same on both
Pull down, ionic theme	before	after	Pull down at the top of the page. Looks the same on both

vercel · 2026-10-09T21:46:54Z

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

Project	Deployment	Actions	Updated
ionic-framework	Ready	Preview	Oct 22, 2026 6:18pm UTC

brandyscarney

Added a few minor requests but this is looking good!

…onnects

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

…animations

# Conflicts: # core/api.txt # core/src/components/title/title.scss

brandyscarney

Looks good, a few requests but nothing major!

brandyscarney · 2026-10-21T21:45:24Z

+/**
+ * The large title grows from the edge its text is aligned to, so the
+ * text's start doesn't shift. Centered text grows from the center.
+ *
+ * @internal
+ * @param ionTitleEl - The title whose alignment and direction set the origin.
+ * @returns The horizontal `transform-origin` keyword: `left`, `right` or `center`.
+ */
+const getTitleOrigin = (ionTitleEl: HTMLIonTitleElement): string => {
+  const { textAlign, direction } = getComputedStyle(ionTitleEl);
+  const rtl = direction === 'rtl';
+
+  if (textAlign === 'center' || textAlign === '-webkit-center') {
+    return 'center';
+  }
+
+  if (textAlign === 'left' || textAlign === 'right') {
+    return textAlign;
+  }
+
+  if (textAlign === 'end') {
+    return rtl ? 'left' : 'right';
+  }
+
+  return rtl ? 'right' : 'left';
+};


Nothing tests getTitleOrigin automatically. Could you add a spec covering start, end, left, right and center in LTR and RTL? Also, since it’s cached at index creation, setting size="large" later writes undefined center. Would working it out lazily in scaleLargeTitles avoid that?

# Conflicts: # core/src/components/title/title.interface.ts

ShaneK

Looks good to me, great work! Just a few comments, mostly around test coverage, so feel free to take or leave them.

ShaneK · 2026-10-22T20:45:16Z

+   * How far the drawn text sits from where the shrunk box starts: 0 for a
+   * start-aligned title, more for a centered one. The copies start there.
+   */
+  const startShift = Math.max(0, rtl ? box.right - text.right : text.left - box.left);


Suggested change

const startShift = Math.max(0, rtl ? box.right - text.right : text.left - box.left);

const startShift = text.width === 0 ? 0 : Math.max(0, rtl ? box.right - text.right : text.left - box.left);

When the large title is empty, the range rect is all zeros, so in RTL this comes out as box.right and the back button copy starts on the wrong side of the screen. With "Back" as the back text, its text starts around x = 1 in ios and -32 in ionic instead of near 314. Falling back to 0 puts it back on the right, and the transition tests still pass.

ShaneK · 2026-10-22T20:47:31Z

+        await expect(page.locator('page-inbox ion-title[size="large"]')).toHaveClass(/hydrated/);
+      };
+
+      test(`should start the large title copy on the title text in the ${theme} theme`, async ({ page }) => {


Both position tests stop on the start keyframe, so removing largeTitleStartShift from both END_TRANSLATE_X branches and from CONTAINER_START_TRANSLATE_X still passes everything here. I tried an exact end check, but it's 7-11px off in md and ionic even on this branch, which makes sense since the copies only roughly overlap and the forward copy has faded out by then. Do you think a check with a loose tolerance is worth adding?

ShaneK · 2026-10-22T20:51:26Z

+
+      [
+        { label: 'default', color: undefined, hue: undefined },
+        { label: 'bold primary', color: 'primary', hue: 'bold' },


I don't think this test checks the font copy at all, since removing only font-family still passes everything. Removing color too still passes bold primary in every theme, because the copy already gets color and falls back to the bold hue. Could a case where the toolbar uses a different font than body cover it?

ShaneK · 2026-10-22T20:54:01Z

+    scaleLargeTitles(headerIndex.toolbars, 1.1);
+
+    const innerTitle = title.shadowRoot!.querySelector<HTMLElement>('.toolbar-title')!;
+    expect(innerTitle.style.transformOrigin).not.toContain('undefined');


Suggested change

expect(innerTitle.style.transformOrigin).not.toContain('undefined');

expect(innerTitle.style.transformOrigin).toBe('left center');

This passes on an empty string too, so it wouldn't catch scaleLargeTitles skipping the write. Mock-doc has no textAlign, so it's always left center here, and this version fails both with the write removed and with the old undefined center caching.

ShaneK · 2026-10-22T20:56:09Z

+      'padding-right': paddingRight,
+      'padding-bottom': paddingBottom,
+      'padding-left': paddingLeft,
+      'pointer-events': 'none',


Suggested change

'pointer-events': 'none',

I don't think this one does anything. The host already has pointer-events: none from the stylesheet and .toolbar-title sets it back to auto, so the copy's text takes hits either way. If the copy should be inert like the back button copy, setting it on the copy's .toolbar-title next to the width: auto write does that.

ShaneK · 2026-10-22T20:59:31Z

+   * so a centered title never shows off-center. Runs again on slotchange
+   * to watch content added later.
+   */
+  private observeSlotContent() {


Since getTitlePlacement() returns center for ios too, every ios theme toolbar gets this observer, but nothing there reads the classes or --start-end-size. The slots are display: contents in ios, so they always measure 0 and the variable never gets set. Is that fine to leave until FW-6864, or should it be limited to ionic for now?

thetaPC added this pull request to stack #31538 October 9, 2026 21:46

github-actions Bot added the package: core @ionic/core package label Oct 9, 2026

thetaPC changed the title ~~Fw 6863 animations~~ fix(transition): make large title animations work in every theme Oct 9, 2026

thetaPC force-pushed the FW-6863-animations branch from 5974626 to 04dc471 Compare October 10, 2026 02:29

vercel Bot deployed to Preview October 10, 2026 02:34

View deployment

thetaPC force-pushed the FW-6863-animations branch from 04dc471 to fe6013d Compare October 12, 2026 15:15

vercel Bot deployed to Preview October 12, 2026 15:42

View deployment

thetaPC marked this pull request as ready for review October 12, 2026 18:14

thetaPC requested a review from a team as a code owner October 12, 2026 18:14

thetaPC requested a review from brandyscarney October 12, 2026 18:14

brandyscarney requested changes Oct 16, 2026

View reviewed changes

thetaPC and others added 9 commits October 19, 2026 19:45

test(title): add large title transition test page

47584db

fix(toolbar): center the title before the first paint

12329d4

fix(transition): make large title animations independent of the theme

420611e

refactor(title): remove animation-only tokens

1b4d039

test(title): check the large title copy starts on the title text

4d74a20

fix(toolbar): watch slot content added after the toolbar loads

7bf0c17

fix(toolbar): recreate the slot content observer when the toolbar rec…

1e8ed95

…onnects

perf(header): only read the title origin for large titles

a4f5958

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

test(title): cover the backward transition and the copy color and font

73cecc7

thetaPC force-pushed the FW-6863-animations branch from fe6013d to 73cecc7 Compare October 20, 2026 02:47

vercel Bot deployed to Preview October 20, 2026 02:52

View deployment

Merge remote-tracking branch 'origin/FW-6863-snapshots' into FW-6863-…

891eafb

…animations

vercel Bot deployed to Preview October 20, 2026 22:08

View deployment

Merge remote-tracking branch 'origin/FW-6863' into FW-6863-animations

bcf2259

# Conflicts: # core/api.txt # core/src/components/title/title.scss

vercel Bot deployed to Preview October 20, 2026 22:51

View deployment

thetaPC mentioned this pull request Oct 20, 2026

test(scripts): pick the testing font by theme instead of mode #31618

Merged

1 of 2 tasks

thetaPC requested a review from brandyscarney October 20, 2026 23:13

brandyscarney approved these changes Oct 21, 2026

View reviewed changes

Merge remote-tracking branch 'origin/FW-6863' into FW-6863-animations

f2ae0c5

vercel Bot deployed to Preview October 22, 2026 17:41

View deployment

Merge remote-tracking branch 'origin/FW-6863' into FW-6863-animations

0f93da3

# Conflicts: # core/src/components/title/title.interface.ts

vercel Bot deployed to Preview October 22, 2026 17:53

View deployment

thetaPC added 4 commits October 22, 2026 11:09

refactor(transition): merge the back button comment blocks

6ad5f60

fix(header): work out the large title origin when it first scales

0b4d2c6

test(toolbar): note that only the ionic theme supports title placement

c82b5ce

test(toolbar): mark the title placement themes as a TODO

c9886e7

vercel Bot deployed to Preview October 22, 2026 18:18

View deployment

ShaneK approved these changes Oct 22, 2026

View reviewed changes

	const startShift = Math.max(0, rtl ? box.right - text.right : text.left - box.left);
	const startShift = text.width === 0 ? 0 : Math.max(0, rtl ? box.right - text.right : text.left - box.left);

	expect(innerTitle.style.transformOrigin).not.toContain('undefined');
	expect(innerTitle.style.transformOrigin).toBe('left center');

Conversation

thetaPC commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel Bot commented Oct 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

brandyscarney Oct 21, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

ShaneK Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

ShaneK Oct 22, 2026

Choose a reason for hiding this comment

Uh oh!

This branch was successfully deployed

Reviewers

Uh oh!

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

thetaPC commented Oct 9, 2026 •

edited

Loading

vercel Bot commented Oct 9, 2026 •

edited

Loading