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

Animation Type

Choose one of the animation types.

Animated Elements



Fade Type

Choose the fade target, i.e., what to fade to or from.

Fade Colors

Choose two colors that mark the range of color values to or from which a fading animation will change the original colors. That means when color 1 and color 2 are different grey values, the result is a greyscale version of the original graph.


Pulse Type

Choose the pulse type.

Shake Type

Choose the shake type:

Beacon Type

Choose the beacon type:


Beacon Color

Choose color.


Beacon Settings

Choose whether each pulse should be drawn smoothly or with hard edges.


Choose the size of pulses.

Choose the distance between pulses.

Choose the number of pulses.

Scale Type

Choose the scale 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

Your browser or device does not support WebGL2.
This demo only works if WebGL2 is available.
Please use a modern browser like Chrome, Edge, Firefox, or Opera.
In older versions of Safari and older Apple devices, WebGL2 is an experimental feature that needs to be activated explicitly.