# How do I make a Makie animation appear in a VSCode plotting window?

**URL:** <https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150>\
**Category:** Visualization\
**Tags:** vscode, animations\
**Created:** [December 2, 2022, 3:39pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150 "2022-12-02T15:39:25Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torkel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/torkel/32/5030_2.png) [@Torkel](https://discourse.julialang.org/u/Torkel)\
**Post date:** [December 2, 2022, 3:39pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/1 "2022-12-02T15:39:25Z")

</div>

I have some code (copied from the Makie website) to make an animation:

```julia
using GLMakie
time = Observable(0.0)

xs = range(0, 7, length=40)

ys_1 = @lift(sin.(xs .- $time))
ys_2 = @lift(cos.(xs .- $time) .+ 3)

fig = lines(xs, ys_1, color = :blue, linewidth = 4,
    axis = (title = @lift("t = $(round($time, digits = 1))"),))
scatter!(xs, ys_2, color = :red, markersize = 15)

framerate = 30
timestamps = range(0, 2, step=1/framerate)

record(fig, "time_animation.mp4", timestamps;
        framerate = framerate) do t
    time[] = t
end

```

I run it in VSCode. When the figure is plotted, it appears in my plotting window in VSCode. However, the animation is just saved to a file. How do I make the animation appear in the VSCode plotting window? Also, what do I do if I do not want the animation saved to a file? I tried looking at [API](https://docs.makie.org/v0.18.4/api/index.html), but I couldn’t really figure it out.

---

<div class="post-metadata">

**Author:** ![fatteneder](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fatteneder/32/33991_2.png) [@fatteneder](https://discourse.julialang.org/u/fatteneder)\
**Post date:** [December 2, 2022, 3:57pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/2 "2022-12-02T15:57:52Z")

</div>

> Also, what do I do if I do not want the animation saved to a file?

If you run your script then the recorded video should be saved to a file called `time_animation.mp4` inside your current working directory.

---

<div class="post-metadata">

**Author:** ![Torkel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/torkel/32/5030_2.png) [@Torkel](https://discourse.julialang.org/u/Torkel)\
**Post date:** [December 2, 2022, 3:59pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/3 "2022-12-02T15:59:42Z")

</div>

Yes, but what do I do if I do not want to have the animation saved to a file?  
(in this case because I want to display it directly only)

---

<div class="post-metadata">

**Author:** ![fatteneder](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/fatteneder/32/33991_2.png) [@fatteneder](https://discourse.julialang.org/u/fatteneder)\
**Post date:** [December 2, 2022, 4:07pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/4 "2022-12-02T16:07:05Z")

</div>

I am sorry, I must have overlooked the `not` in your question.

Nevermind, there is a simpler trick. You can use `Observables` to trigger re-plotting and wrap this into a `for` loop. See the first code snippet under the section `Animating a plot "live"` here: [Animations](https://docs.makie.org/v0.18.4/documentation/animation/index.html)

Anyways, what’s the problem with just opening the animation with a standard video player?

---

<div class="post-metadata">

**Author:** ![Torkel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/torkel/32/5030_2.png) [@Torkel](https://discourse.julialang.org/u/Torkel)\
**Post date:** [December 2, 2022, 4:17pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/5 "2022-12-02T16:17:37Z")

</div>

Thanks, I am trying it out now.

When I am doing investigations, it is just much easier, to run the code, and the animation appear in the same window I have open, as opposed to having to open up a file system, navigate to the folder where it is saved, double click on the animation file, and watch it in another window, and then have to go back to the cading windows to make modifications etc.

---

<div class="post-metadata">

**Author:** ![jules](https://avatars.discourse-cdn.com/v4/letter/j/41988e/32.png) [@jules](https://discourse.julialang.org/u/jules)\
**Post date:** [December 2, 2022, 9:23pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/6 "2022-12-02T21:23:53Z")

</div>

One cannot animate with GLMakie inside VSCode’s plotting pane, currently. There’s this PR which might give the ability to do that at some point by updating a specific image over time: [WIP: display\_with\_id by pfitzseb · Pull Request #2940 · julia-vscode/julia-vscode · GitHub](https://github.com/julia-vscode/julia-vscode/pull/2940)

To make a live animation, you can either use GLMakie and open a native window, updating your plots via observables in a for loop or so, as was noted above. Or you can use WGLMakie, which can use web contexts to display a javascript-controlled plot, which can also be updated via observables, and the VSCode plot pane happens to be such a web context. But note that WGLMakie is both slower, as well as not as feature complete as GLMakie. For example, currently it still doesn’t have picking which means things that require information about what stuff was clicked on don’t work (but this is being worked on).

---

<div class="post-metadata">

**Author:** ![Torkel](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/torkel/32/5030_2.png) [@Torkel](https://discourse.julialang.org/u/Torkel)\
**Post date:** [December 3, 2022, 2:54pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/7 "2022-12-03T14:54:21Z")

</div>

Thanks, that’s a very throughout explanation. Hopefully the PR goes through some time soon 🙂

---

<div class="post-metadata">

**Author:** ![AlvaroPY](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/alvaropy/32/43631_2.png) [@AlvaroPY](https://discourse.julialang.org/u/AlvaroPY)\
**Post date:** [November 12, 2024, 4:41pm UTC](https://discourse.julialang.org/t/how-do-i-make-a-makie-animation-appear-in-a-vscode-plotting-window/91150/8 "2024-11-12T16:41:06Z")

</div>

Casually, I found an error using WGLMakie to make this animation appear in the VSCode plot pane, and it was related to the VSCode zoom. When it is zommed by default (ctrl+0 in Windows), this following MWE should work.

```julia
using Makie, WGLMakie
Makie.inline!(true)

time = Observable(0.0)

x = range(0,1,100)
y = @lift(sin.(2π*x)*cos(2π*$time))

fig = Figure()
ax = Axis(
    fig[1,1]
)

scatterlines!(x, y)

framerate = 30
timestamps = range(0, 2, step=1/fps)

record(fig, "sim.mp4", timestamps; framerate=framerate) do t
    time[] = t
end

```