Getting animation transitions to work with cell updates

For a notebook I’m working on I created animated transitions using d3 to show progress through a tidy tree. This worked fine when it was all in a single cell. However, I added a button and separated it out to show the progression in multiple cells. This broke the animated transitions. It seem as though every time I click my button it attempts the animated transition in my tidy tree but interrupts the transition to refresh the cell. Is there any way around this issue?

Here’s a link to the button: Decision Table to Tree Visualization / joesquito / Observable


I find this difficult to diagnose because it’s not clear what the desired behavior is. The “Next step” button seems to be working well to me.

I figured it out. I misunderstood what was happening. I was supposed to set the transition to begin with opacity zero. Then the transition to opacity 1 would work.

1 Like