Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[animations] develop story for animation + transitions #6

Closed
hshoff opened this issue May 8, 2017 · 12 comments
Closed

[animations] develop story for animation + transitions #6

hshoff opened this issue May 8, 2017 · 12 comments
Milestone

Comments

@hshoff
Copy link
Member

hshoff commented May 8, 2017

No description provided.

@hshoff hshoff added this to the v1 milestone May 8, 2017
@jacek213
Copy link
Contributor

@hshoff is anyone working on this feature?

@williaster
Copy link
Collaborator

@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 💭

@hshoff
Copy link
Member Author

hshoff commented Jul 18, 2017

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.

@denkristoffer
Copy link

denkristoffer commented Jul 18, 2017

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.

@jacek213
Copy link
Contributor

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 😆

@sghall
Copy link

sghall commented Jul 18, 2017

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.

@monsonjeremy
Copy link

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.

@chrisdrackett
Copy link

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 :)

@sghall
Copy link

sghall commented Sep 14, 2017

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.

@hshoff
Copy link
Member Author

hshoff commented Oct 6, 2017

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.

@hshoff hshoff closed this as completed Oct 6, 2017
@techniq
Copy link
Collaborator

techniq commented Oct 8, 2017

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?

@alecmev
Copy link

alecmev commented Oct 11, 2017

You should remove animations and transitions from the roadmap.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

9 participants