Skip to content

Text Alignment causes text to "Jump" #11

@richgoldmd

Description

@richgoldmd

Describe the bug
When a SharedElement.text changes text-align - the ext "jumps" into position at the end of the animation,

To Reproduce
Steps to reproduce the behavior:

  1. Create a source scene where SharedElement.text has the text-align:center style
  2. Create a target scene where the Matching element has text-align: left
  3. Animate
  4. At the end of the animation, the text jumps from cener-aligned to left-aligned

Expected behavior
The transition should be smooth

Additional context
I understand that text-alignment cannot be directly animated. I've tried using translation transforms which works but not for text that wraps when centered (The text does not center when wrapped using this technique, and centering the inner span causing the same type of jumping).

I'm wondering if you've encountered this and is there a workaround?

Thanks for a great library!

Metadata

Metadata

Labels

bugSomething isn't working

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions