Custom animation for expanding nodes

[piszczu4]

Hi, looking at the demo (https://minop1205.github.io/react-dnd-treeview/?path=/docs/basic-examples-animateexpand--animate-expand-story) I'm very impressed but I'm wondering whether it's possible to use custom animation of expanding node? If yes, how can we do that?

[minop1205]

@piszczu4
In the current version, there is no API to control the animation, so it is not possible to customize the animation.

[piszczu4]

@piszczu4 In the current version, there is no API to control the animation, so it is not possible to customize the animation.

@minop1205 What a pity :( I'd like to obtain an effect like here on both closing and opening. If we can animate height, shouldn't it be relatively easy to apply any other animation? I would need to have a look on the source code (I'm really beginner in React) but for now I noticed that you are using framer-motion in AnimateHeight.tsx so maybe there some updates would be helpful. I tried to animate it using react-spring and custom Node but I manage to do it only for opening, closing doesnt work. Here is my code, I would appreciate your feedback whether there are plans to somehow update the code to handle custom animations and whether it is possible to animate "closing" of a node using CustomNode or again its not possible. Animation is really the last missing part from my point of view.

[minop1205]

@piszczu4
The animation is still applied when the node is closed. The animation shown in the capture below is the correct behavior, but it does not appear this way?

2023-11-15_22h09_10.mp4

[piszczu4]

I mean yes it works fine in this example from the story book but I wanted to change the animation so that instead animating the height and opacity change as hardcoded in AnimateHeight.tsx, I'd like to animate the opacity and transform from translate3d(${20}px,0,0) to translate3d(${0}px,0,0) when opening and vice-versa when the node is closed.