WebGL2 Animations Demo

In this demo you can try out the different WebGL2 animations and their settings. Animations can be used, for example, to highlight an interesting element or whole part of a graph.

In particular, this demo highlights the currently hovered or selected connected component with an animation of the chosen type and settings. Recall that a connected component consists of all nodes that can reach each other.

Note that the animated items all share the same WebGL2Animation object.

Things to Try

Hover over a component, or select one, and observe the animation.
Select different animations types for highlighting the current component:
- For the component itself, "Pulse", "Scale", or "Shake" are fitting animations.
- Use different "Fade" animations and hide or desaturate a component to bring this component to attention.
Note that for fade animations, shorter animation durations are more noticeable.
Experiment with other animation configurations to achieve the desired effect.

Animated Graph Parts

Component Members Others

Animation Type

Choose one of the animation types.

Animated Elements

Animate Nodes
Animate Edges
Animate Labels

Pulse Type

Choose the pulse type.

Animation Magnitude

Choose the animation magnitude.

Animation Duration

Choose the duration of one animation cycle.

Choose how often the animation loops.

Animation Direction

Choose, whether to use a normal, reversed, alternated, or reverse alternated animation.

Easing

Choose between different types of easing.

Zoom-invariant Rendering

Zoom-invariant