jeffersonlicet/react-motion-layout

🦸 Beautiful immersive React hero animations.

react-motion-layout's Issues

Text Alignment causes text to "Jump"

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!

import less item

it can be better if it has less boilerplate currently we have to import several items

Website Not Working

Describe the bug
Your website is not loading http://ww1.motion-layout.com/

To Reproduce
Steps to reproduce the behavior:

1. Go to 'http://ww1.motion-layout.com/'

Expected behavior
Website should load

Screenshots

Desktop (please complete the following information):

• OS: MacOS
• Browser: Chrome
• Version: 116.0.5845.96

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Compatibility with react-router-dom v6

Describe the bug
A clear and concise description of what the bug is.
App build fails with No matching export in "node_modules/react-router-dom/index.js" for import "useHistory" when using version 6.0.0-beta.0 of react-router-dom.

To Reproduce
Steps to reproduce the behavior:

1. Install history & react-router-dom@next packages
2. Install react-motion-layout package
3. Use the Motion Layout Provider as per http://motion-layout.com/docs/animating#1-use-the-motion-layout-provider
4. Try running the dev server (yarn dev, npm start etc.)
5. See error

Expected behavior
Dev server runs without errors.

Screenshots

Additional context
The issue is kind of related to #13. I saw this reply, which states that there's going to be a new version of the package. Idk if it's going to be a router-agnostic solution or a Next.js router compatibility update. react-router-dom package had it's pretty stable beta release for quite a while now. It might be good to adopt some router-agnostic solution in the future

Compatibility with NextJS?

NextJS uses a custom router object.
This library depends heavily on react-router. Nextjs provides their own routing solution.

A compatibility layer?
Next router is heavily inspired by React router. Can we make react-motion-layout work with both?

SolidJS compability

I was wondering if there will be a version of this package that works for solidJS , i have looked around and havent found many othr animation libraries doing the same like this library.

Ability to animate item only one-way

Is there any way to skip animation when a user navigates back? The way I'm using this library means that the return animation often looks quite janky due to the way data is sometimes re-loaded between component change. I'd love for a way to run the animation on enter, but not on exit!

React native

Is It working for React native?