Comments (12)
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.
from visx.
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.
from visx.
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.
from visx.
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?
from visx.
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.
from visx.
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.
from visx.
You should remove animations and transitions from the roadmap.
from visx.
@hshoff is anyone working on this feature?
from visx.
@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 💭
from visx.
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 😆
from visx.
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.
from visx.
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 :)
from visx.
Related Issues (20)
- Support `geoPath.digits(n)` in geo projection components HOT 5
- Syncing tooltips for different XYCharts HOT 1
- Support for Grouped Bar Stacks
- XYChart: AnimatedAnnotation animates incorrectly
- XYChart: Annotation on mobile - Clicking outside of the graph should hide the annotation HOT 1
- computeStats throws exception when all statistics align
- XYChart has a zero width or height, bailing - console.log HOT 5
- Tooltip in XYChart - a way to make it compatible for mobile/touch devices
- scroll appears when drawing xychart using LineSeries but doesn't when using AreaStack
- Brush onBrushEnd does not seem to report the end x position HOT 1
- <Axis /> labelProps is documented as Partial, but overwrites values HOT 1
- Adding node version into .npmrc files HOT 1
- Adding inertia option to visx-drag [enhancement] HOT 3
- XYChart forces me to have the yScale include 0 HOT 2
- Zoom: Enable customisation of event handlers HOT 2
- Docs: README.md broken slack link HOT 1
- TooltipInPortal used inside a microfrontend obtains an unstyled (and unstylable) tooltip content HOT 4
- Brush jumps to wrong position when changing selection with a handle
- Nearest datum bug in XYChart HOT 3
- tickFormat function is not working with Typescript HOT 1
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 visx.