Introduction

We present our short series of interactive animations on directional derivatives and level curves.

This visualisation was developed for students of first-year mathematics courses at the Delft University of Technology. The interactive animation is an animated video that can be interacted with while it is paused or playing. This allows for visualising complex topics in class that cannot be easily sketched or drawn in a dynamic and interactive manner. At home, students can discover and re-watch with the voice over explanation: the interactive animation is also embedded in online homework exercises.
The interactive animation includes, amongst others, the following features:

• Change the function that is plotted while the animation is paused or played
• Change points of interest and toggle visibility of elements
• Explore the scene while the explanation continues

We strongly recommend exploring the full interactive experience yourself, the short series can be explored below!

Timelines & State

While there is some documentation on using React with GSAP, the approach used in this project differs in some specific ways to make the Timelines and Tweens as simple as possible, in particular the way state is handled.

Animation components with Timelines

We made animation components, in which we set up a main GSAP timeline. Each section in the animation has its own sub-timeline, these are all children of the main timeline. In the animation component constructor, we create an object that stores the sub-timeline states. These states will contain the start state the animation ought to be when a sub-timeline begins.

Adding sub-timelines

The sub-timelines (all subsections of the animation) are added to the main timeline after mounting the animation component: the constructor is that GSAP is not able to create Tweens for some targets if they are not rendered yet. This happens for example when tweening React refs. Ensuring that the animation component has mounted, also ensures that all Tween targets are available when GSAP tries to access them.

Start & State

Each sub-timeline has a set duration, a position on the main timeline and a label. Within each sub-timeline component, we set labels for the state in which they ought to start playing; their start-state. Adding these labels to the main timeline allows the user to skip through the timeline freely. The timeline and their respective states are passed to the component that handles user input and keeps the timeline and audio synchronized. When the user skips to a particular timestamp in the animation, this input component fetches the start-state corresponding to the label associated with the timestamp and sets the start-state. This ensures that the animation component is in the expected state at the start of each child timeline.

Tweens & State

Each sub-timeline has one or more GSAP Tweens added to it, as well as a start-state. The start-state is set at the start of a tween. GSAP modifies the target object of a tween directly, which is not allowed for React state, as this will not update the component. To circumvent this, we have introduced a second state for the tween targets, which we call animation-state. The object animation-state is used as tween target and contains the same values as the component state, but since it is not the actual state of the component, we can let GSAP directly modify animation-state. Each update to the animation-state is then propagated to the components state, each time the tween is updated.

Results

Our result is a short series of 4 parts. All 4 parts can be watched and interacted with below. Press play to start and try interactions in the screen: change the function that is plotted, drag the 3D plot to adjust your view and explore it or use the controls menu!

Part 1: Level curves

This first part introduces the concept of level curves. It features, amongst others, the possibility to adjust and add level curves.

Part 2: Directional derivatives

This second part introduces the concept of directional derivatives. It features, amongst others, the possibility to change many of the variables in the controls menu and to adjust the 3D and 2D views.

Part 3: Directional derivatives & Level curves

This third part explains the relationship between level curves and directional derivatives.

Part 4: Gradient & Level curves

This final bonus part explains the relationship between level curves and gradients.