Feature: Animate non-shared elements by moving them in- or out of the screen

[jamesdunay]

For starters, thanks for this project, it's super awesome.

One thing I'm having trouble with myself and maybe others have as well? Is that if I have two different screens, each with their own layout, i.e. buttons, images, but SOME shared elements, is it possible to move and fade the elements on the new screen that are not shared?

The fade part is actually doable, but I can't seem to get them to move. Anyone have any tricks they've found for something like this?

The one (bad) idea I've had is to include all the elements in the first screen at their starting positions. This seems like it would get very messy.

Thanks!

[IjzerenHein]

Hi! Thanks ☺️ ☺️

Fade is indeed possible. When an element exists on only one screen, it will automatically fade-in or out depending on the existence on the other screen.

Move isn't possible at the moment though, but it would definitely be a cool thing to have. I think the first thing that we would need to do, is to define an API for it. It would need to be one or more props that can be passed to the <SharedElementTransition> component, so that it understands how to animate these moveable elements natively.
Existing props: https://github.com/IjzerenHein/react-native-shared-element#sharedelementtransition

[jamesdunay]

Yeah, that would be awesome. I'll think on it some more, but off the top of my head...

I think it's safe to say that we know one of two things, either where the object is starting from, or where it needs to end, depending on which screen the element is on. If we had something like, stylesIn & stylesOut, we could use the desired one to specify styles for the specific use case, i.e. pop, push.

Something tells me that this could be done with just one custom 'style' component, in the use case that the element is for sure a 'single' and not apart of a 'pair' that exists on another screen.

Perhaps if it was just the one 'style,' it could look to the transition to figure out if it needs to apply the styles before or after.

Sorry, that's just sort off of the top of my head. I'll think about it more and look through what you have currently. Might try and poke around a little bit if I can make sense of what's going on under the hood.