react-motion-layout icon indicating copy to clipboard operation
react-motion-layout copied to clipboard

Published 20 hours ago • verified publisher icon jeffersonlicet

Text Alignment causes text to "Jump"

Open richgoldmd opened this issue 4 years ago • 1 comments

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!

richgoldmd avatar Nov 12 '20 14:11 richgoldmd

Hello @richgoldmd, thank you very much for reporting this. I'll investigate the issue

jeffersonlicet avatar Nov 15 '20 16:11 jeffersonlicet