Add section on Kino.animate and bump dependencies (#700)

* Add section on Kino.animate and bump dependencies

* Update lib/livebook/notebook/explore/intro_to_kino.livemd

Co-authored-by: José Valim <jose.valim@dashbit.co>

* Update lib/livebook/notebook/explore/intro_to_kino.livemd

Co-authored-by: José Valim <jose.valim@dashbit.co>

Co-authored-by: José Valim <jose.valim@dashbit.co>

lib/livebook/notebook/explore/elixir_and_livebook.livemd

@@ -73,7 +73,7 @@ instance, otherwise the command below will fail.
 
 ```elixir
 Mix.install([
-  {:kino, "~> 0.3.0"}
+  {:kino, "~> 0.3.1"}
 ])
 ```
 

lib/livebook/notebook/explore/intro_to_kino.livemd

@@ -10,8 +10,8 @@ and interact with it.
 
 ```elixir
 Mix.install([
-  {:kino, "~> 0.3.0"},
-  {:vega_lite, "~> 0.1.0"}
+  {:kino, "~> 0.3.1"},
+  {:vega_lite, "~> 0.1.2"}
 ])
 ```
 
@@ -234,3 +234,23 @@ for i <- 1..300 do
   Process.sleep(25)
 end
 ```
+
+<!-- livebook:{"branch_parent_index":0} -->
+
+## Kino.animate/3
+
+If you want to continuously update the output as time passes,
+you can use `Kino.animate/3`:
+
+```elixir
+Kino.animate(100, 0, fn i ->
+  md = Kino.Markdown.new("**Iteration: `#{i}`**")
+  {:cont, md, i + 1}
+end)
+```
+
+The above example renders new Markdown output every 100ms.
+You can use the same approach to render regular output
+or images too! Also note some elements may have specific
+functions for periodic updates, such as `Kino.VegaLite.periodically/4`
+seen in previous sections.

lib/livebook/notebook/explore/intro_to_vega_lite.livemd

@@ -10,8 +10,8 @@ Livebook with client-driven interactive widgets:
 
 ```elixir
 Mix.install([
-  {:vega_lite, "~> 0.1.0"},
-  {:kino, "~> 0.2.0"}
+  {:vega_lite, "~> 0.1.2"},
+  {:kino, "~> 0.3.1"}
 ])
 ```
 

lib/livebook/notebook/explore/vm_introspection.livemd

@@ -13,8 +13,8 @@ so let's add `:vega_lite` and `:kino` for that.
 
 ```elixir
 Mix.install([
-  {:vega_lite, "~> 0.1.0"},
-  {:kino, "~> 0.3.0"}
+  {:vega_lite, "~> 0.1.2"},
+  {:kino, "~> 0.3.1"}
 ])
 ```