Custom animated axis

[filipjakov]

Hi,

I'm using visx on a project which already has an animation library installed (framer-motion).

The data is dynamic (websocket) and I'm trying to animate both the <LinePath/> and the <Axis/> as the data comes on the FE. I was successful in animating the <LinePath/> (overriding the renderer function and implementing a custom path animation), but I can't seem to find a way to custom animate the <Axis/> component.

Could somebody help me out with an example?

[ryanhmaas]

Hey, I know this is a really delayed response, but I was able to get something to work. We ended up forking Axis, BaseAxis, AxisRenderer, and Ticks to get this to work. The trouble is that framer-motion relies on a direct child beneath AnimatePresence in the element tree, so we've got to go sort of deep in order to put AnimatePresence and appropriate motion elements where they should be.

We ended up putting the AnimatePresence in Ticks.t(j)sx and then wrapping the main Group with a motion.g element. This is coupled with passing in the appropriate motion props of course. There's an element of prop drilling here, which stinks and make things kludgey, but it works 🤷