Animation options

In Vizzu you can set the timing and duration of the animation. You can do this either for the whole animation, or for animation groups such as the elements moving along the x-axis or the y-axis, appearing or disappearing or when the coordinate system is changed.

Let’s see first a simple example when a stacked column chart is grouped using the default animation options.

Note: The data used in this tutorial is available here. You can read more about the available types of data in the Adding data chapter.

In [1]:
from ipyvizzu import Chart, Data, Config

chart = Chart()

data = Data.from_json("./music_data.json")

chart.animate(data)

chart.animate(
    Config(
        {
            "channels": {"y": {"set": ["Popularity", "Kinds"]}, "x": {"set": "Genres"}},
            "label": {"attach": "Popularity"},
            "color": {"set": "Kinds"},
            "title": "Default options - step 1",
        }
    )
)

chart.animate(
    Config({"channels": {"y": {"detach": "Kinds"}, "x": {"attach": "Kinds"}}})
)

snapshot1 = chart.store()

We stack the columns, still with the default options.

In [2]:
chart.animate(snapshot1)

chart.animate(Config({"title": "Default options - step 2"}))

chart.animate(
    Config({"channels": {"x": {"detach": "Kinds"}, "y": {"attach": "Kinds"}}})
)

snapshot2 = chart.store()

Now we change the animation settings for the elements moving along the y-axis and also the change in styles, more specifically when the labels on the markers move from the center of the chart elements to the top of them.

In [3]:
chart.animate(snapshot2)

chart.animate(Config({"title": "Custom animation settings for specific groups"}))

chart.animate(
    Config({"channels": {"y": {"detach": "Kinds"}, "x": {"attach": "Kinds"}}}),
    y={"duration": 2, "delay": 2},
    style={"duration": 2, "delay": 4},
)

snapshot3 = chart.store()

This is an example of changing the settings for the whole animation at once.

In [4]:
chart.animate(snapshot3)

chart.animate(Config({"title": "Custom options for the whole animation"}))

chart.animate(
    Config({"channels": {"x": {"detach": "Kinds"}, "y": {"attach": "Kinds"}}}),
    duration=1,
    easing="linear",
)

snapshot4 = chart.store()

When the two settings are combined, Vizzu will use the general animation options and spread the unique settings for specific groups proportionally. This is why you can see the same animation as two steps before but happening much quicker since the duration of the whole animation is set to 1 second.

In [5]:
chart.animate(snapshot4)

chart.animate(Config({"title": "Custom settings for both"}))

chart.animate(
    Config({"channels": {"y": {"detach": "Kinds"}, "x": {"attach": "Kinds"}}}),
    duration=1,
    easing="linear",
    y={"duration": 2, "delay": 2},
    style={"duration": 2, "delay": 4},
)

Next chapter: Events ----- Previous chapter: Chart layout ----- Back to the Table of contents