# How to render transitions properly upon input updates?
**URL:** https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314
**Category:** Help
**Created:** [July 10, 2021, 2:57pm UTC](https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314 "2021-07-10T14:57:46Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@floatingpurr](https://talk.observablehq.com/u/floatingpurr)
#### Post date: [July 10, 2021, 2:57pm UTC](https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314/1 "2021-07-10T14:57:47Z")
Hi there. I’m quite new to observable and I’m try to build a dataviz based on flowers, trying to stick with @mbostock’s _reusable chart pattern_ as much as I can.
Here is my very first tentative blueprint:
> **[Reusable Flower Plot](https://observablehq.com/d/48c1aa46dace1e76)**
As you can see in the first cells, I inserted transitions for gradients in order to smooth coloring updates. In this working case, there is just a continuous cycle that changes flower data in the same cell.
If you scroll down to the bottom of the notebook (ie. **The problem with transitions** ), you can see that if I change data from another cell (e.g., set `foo` to `data[1]` or to `data[2]` transitions are not triggered anymore. It looks like the chart cell is recomputed again from scratch.
Is there a way to trigger transitions upon data updates in the Observable machinery?
Cheers!
---
### Author:  [@enjalot](https://talk.observablehq.com/u/enjalot)
#### Post date: [July 12, 2021, 2:08pm UTC](https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314/2 "2021-07-12T14:08:18Z")
hello, nice visualization 🙂
I created a small fork to demonstrate a solution to the problem with transitions:
> **[Reusable Flower Plot](https://observablehq.com/d/6d29331c403abaa2)**
The idea is that you want the DOM element that you’ll be selecting to be defined in a cell that isn’t dependent on the data. The same goes for the flowerPlot instance. then you can have a cell that calls the flowerPlot and applies it to the DOM element whenever the data changes.
---
### Author:  [@floatingpurr](https://talk.observablehq.com/u/floatingpurr)
#### Post date: [July 12, 2021, 10:11pm UTC](https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314/3 "2021-07-12T22:11:27Z")
Hello @enjalot Oh great, thanks! Got it! I guess this is the side-effect cell you usually want to avoid (unless you need it, as it happens here)
Cheers!
---
### Author:  [@enjalot](https://talk.observablehq.com/u/enjalot)
#### Post date: [July 13, 2021, 4:13pm UTC](https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314/4 "2021-07-13T16:13:11Z")
yes! one way I think about it is that side-effects on data are generally unwanted (because it will likely interfere with dataflow). side-effects on DOM elements however are less “bad” because there is only ever one presentation of the DOM element and if the side effects follow dataflow then you can more easily & reliably reason about how the effects unfold.
---
### Author:  [@floatingpurr](https://talk.observablehq.com/u/floatingpurr)
#### Post date: [July 13, 2021, 8:44pm UTC](https://talk.observablehq.com/t/how-to-render-transitions-properly-upon-input-updates/5314/5 "2021-07-13T20:44:30Z")
Thanks again for your help! 🙂