search

TanStack / react-charts

⚛️ Simple, immersive & interactive charts for React
https://react-charts.tanstack.com
MIT License
3k stars 246 forks source link

Will there be animation in @beta3.0.0 ? #250

Open antonymott opened 3 years ago

antonymott commented 3 years ago

Loving the beta version, and already migrated to it! I searched the beta codebase for "transition" and "animation" as I liked the slick animation between data refreshes, but couldn't find it. I thought of helping by trying to port it from 2.0, but the 3.0 beta version is so different that I got lost!

tannerlinsley commented 3 years ago

As far as JS animation goes, it would take a lot of work to implement and would definitely need to be optional so as to not overwhelm pages with lots of charts. You're welcome to give it a shot, but let's chat about the implementation choices before you start writing too much.

Right now, you can somewhat achieve animations with css transition properties, but it's not available in every browser and definitely not as smooth as something like d3's animation utils.

antonymott commented 3 years ago

Wow, Tanner your response time was lightning fast!

I'd be more than happy to try any kind of ease via .css, anything to take the sharpness off data refresh. I noticed that the new beta version bubble.tsx does animate between clicking on "randomize", so I copied across interactionMode: 'closest' and added it to my line.tsx...that would have been too easy! It didn't break it, but the line chart didn't animate.

If there's a .css animation implementation (optional as you say, so not slowing many charts down) that you'd prefer, can you point me to the resource and perhaps I can try and achieve it for my line.tsx? If I can get it to work I'd be happy do a pull request.