Shared element morphing about fluidtransitions HOT 4 CLOSED

Hi @kkbhav!

Since this is basically a shared element transition library, elements should be shared and not different from each other. On the other hand, this is a really cool feature to add, and I've been playing around with some constructs to add support for this.

My first idea is to be able to provide an animatable property in the Transition class that will connect the navigation interpolation in a transition to the given property in the wrapped element. Example:

<Transition shared="id" animatedProperty="time">
  <MyMorphableImage/>
</Transition>

When running the transition above the MyMorphableImage would be animated through its time property.

Would this be what you are looking for? You would be responsible for providing/implementing the transformation property and to ensure that your component is a valid Animated component.

from fluidtransitions.

@chrfalch This sounds like a perfect solution, especially for things like lottie

from fluidtransitions.

@chrfalch Yes, this seems like a good approach to implement the functionality. The developer will be responsible for using this property, but as it will be add-on over the shared animation it will work great.
Have you started working on this feature?

Also, I was going through the code and thought what if during the shared transition we animate both the react elements from start position to end position with opacity property so that if images are different it will give a look of shared animation. Is it do-able or will it cause too much performance issue during the transition?

from fluidtransitions.

Implemented in #47

from fluidtransitions.