Opens our scheduling page with Zoom's booking widget embedded. Using it shares your data
with Zoom under its
Privacy Policy.
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
WebGL Animations Demo
In this demo you can try out the different WebGL 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
WebGLAnimation
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.