[animations] develop story for animation + transitions
hshoff opened this issue · comments
@hshoff is anyone working on this feature?
@jacek213 I believe we're still toying with different possible implementations of this and trying to figure out how opinionated to make the vx support. One issue is that there's not really a great story for animations in general in react. If you have any thoughts feel free to share 💭
Research
Current react animation landscape:
edited to add:
Open questions
- how opinionated should vx be about animations?
- does vx need it's own animation library?
- what if an existing react codebase has already picked an animation lib?
- should vx punt on animation into user land? (users decide from the list above and use what works best for them/already in use)
- should vx provide a recommended animation lib?
- will the upcoming react fiber release change the animation landscape/story in react land? Seems like there still isn't consensus in react land for the best way to animate and there are a number of options available.
Don't forget https://github.com/animatedjs/animated 🙂 I believe this is the go to way of doing animation in React Native, and the web version is working well for me too. I've been told (but not by anyone actually developing React) that it might become the "official" web animation library as well in the future.
I've animated vx components with pure d3 transitions hooked up on componentDidMount... however that's probably not the proper way you'd want people to use transitions in vx 😆
I've been working on a more "d3" like interface for animations in React as well...
Resonance - Github
NodeGroup -Documentation
Animated Bar Chart - Example
It's a WIP. I do like the approach vx is taking to SVG components. Interested in seeing how animation piece develops.
As you alluded to above, I think Fiber is going to be interesting for animations. The priority levels for state updates are really needed to maintain good frame rates in React. Thinking we should see a lot of contending APIs for animation stuff in react in the coming months.
I think one good way of doing this would be using D3 transition functions to create interpolators which can be used to incrementally update the state of the data over a given transition duration.
The downside to this is that it does put a constraint on how the data is formatted and how it is passed around. I also am not sure about performance for larger data sets or multiple components.
I have some examples if you're interested in seeing.
https://popmotion.io as well ;)
they also maintain https://github.com/Popmotion/framesync which maybe could be used to support the transitions that @monsonjeremy mentions above? I've never animated anything in D3 so I basically don't know what I'm talking about :)
Looping back around on this. Since my last comment resonance and react-move have combined forces. React-move 2.0 is fundamentally just a way to wire up D3 style transitions in react like is mentioned in this thread.
The more difficult/interesting question has turned out how to make this into a understandable API and try to keep the flexibility you get in D3 (which has a steep learning curve). Like to get more input, ideas, performance tweaks, examples, etc from others that are interested in working on this idea. Feel free to open an issue at react-move. Cheers.
Seeing as there are many existing animation solutions out there in react-land, it seems best to defer to user choice rather than add another animation lib to the mix. This makes sense since vx should feel at home in any react app and you/your org might have already selected a react animation library so there would be no need to add another to the mix.
Happy to continue the discussion if you run into any unsupported use cases or if vx does something in particular that makes it hard to animate.
So far I've seen animated charts built with vx using various animation libraries out there so I think we're ok here.
It would be nice to provide examples of using different libraries but this may be too much to put on the official gallery or show bias/recommendation for a specific library, but maybe not?
Maybe just a bulleted list in the README or on the gallery page with links to some codesandbox examples, kind of like how downshift handles this?
You should remove animations and transitions from the roadmap.