# Animated Transitions

**URL:** <https://talk.observablehq.com/t/animated-transitions/724>\
**Category:** Help\
**Created:** [May 7, 2018, 5:02am UTC](https://talk.observablehq.com/t/animated-transitions/724 "2018-05-07T05:02:44Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![jasanst](https://avatars.discourse-cdn.com/v4/letter/j/47e85d/32.png) [@jasanst](https://talk.observablehq.com/u/jasanst)\
**Post date:** [May 7, 2018, 5:02am UTC](https://talk.observablehq.com/t/animated-transitions/724/1 "2018-05-07T05:02:44Z")

</div>

Are there any good examples of how to animate visualizations on a simple svg chart? Most notebooks I see have their output recreated on every change so the transitions never run.

Found one notebook by Mike which contains a transition call but it doesn’t seem to work (or even be used?)

> **[Index Chart](https://observablehq.com/@mbostock/d3-index-chart)**
>
> An Observable notebook by D3.

---

<div class="post-metadata">

**Author:** ![Evan](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/evan/32/276_2.png) [@Evan](https://talk.observablehq.com/u/Evan)\
**Post date:** [May 7, 2018, 12:56pm UTC](https://talk.observablehq.com/t/animated-transitions/724/2 "2018-05-07T12:56:09Z")

</div>

@jashkenas discusses using `this` in this post:

> [@Reactives, timed events and updating vis](https://talk.observablehq.com/t/reactives-timed-events-and-updating-vis/402/2):
>
> Hey Simon, Here’s a forked version that addresses your concerns: [https://beta.observablehq.com/@jashkenas/visualisation-of-contact-networks](https://beta.observablehq.com/@jashkenas/visualisation-of-contact-networks) The best way to separate initialization from updating, within a cell, is to rely on this. In an Observable notebook, [this is the previous value of the cell](https://beta.observablehq.com/@tmcw/untitled/5). So, for a cell that is a D3 SVG visualization, this is undefined the first time the cell runs, and can be the running SVG visualization on every cell re-evaluation thereafter. Using this, and Mike’s …

I did a probably not recommended workaround here, not using `this`:  
[https://beta.observablehq.com/@gallowayevan/beeswarm-with-dodge-and-transitions-log-scale/2](https://beta.observablehq.com/@gallowayevan/beeswarm-with-dodge-and-transitions-log-scale/2)  
The idea was to just create an essentially static svg cell that I then manipulate from another cell called `chart`. However, I suspect this is not idiomatic because `svg` does not have an explicit dependency on `chart`.

Generally, I’d be curious to hear more ideas for using D3 animations/transitions in Observable.