Comments (4)
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.
Related Issues (20)
- Update TransitionItemsView componentWillRecieveProps to use getDerivedStateFromProps
- Add support for React Navigation 4 HOT 18
- getting an exception error of unmount Transition shared key
- [question] Transition element on navigate HOT 1
- Does it support React-Native-Navigation
- Unable to modify duration/speed using <Transition> HOT 1
- Transition component's disappear prop does not work
- No header when using fluidNavigator HOT 5
- (0, _reactNavigationFluidTransitions.default) is not a function HOT 3
- React Navigation v4^ the navigation prop is missing for this navigator HOT 1
- get current transition route name
- [ShareElement] How can i zoom out the view container on List Image on share transition?
- Fluid Navigator Transition not working in iOS? HOT 1
- Can't get it to working. HOT 7
- Shared Element Transition - Works Only For One Way
- support react-navigation5 HOT 11
- How to solve the inaccurate moving distance caused by zooming while moving?
- Tab navigation
- typescript
- error message
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluidtransitions.