Transitions in Gantt


Hi, i want to apply CSS transitions when a user is zooming in or out. Currently the whole DOM element gets replaced, which does not trigger the transition effects.

Is there a way to add smooth zooming in or out. both on mouse wheel and button clicks

Is there a way to not have the component re-render again and again. and instead it just does its calculations and update the required elements using CSS?


Hello Hammad,
There is no built-in way to change how it works. The changes for the scale and timeline elements affect tasks. And with the smart rendering, Gantt needs to add tasks the are outside the viewport or remove some tasks from the DOM structure if they are outside the viewport.
That’s why Gantt needs to create a new DOM structure.

One of the easiest ways would be to manually change the style properties in the DOM, then change the zoom. But there is no guarantee that it will work correctly.
Here is an example:

You need to implement a custom solution. If you want us to implement it for you, you can contact the Sales team: