This block experiments scrolly telling with D3.

I apply the technique described by tonyhschu in its Small Scroll-linked Animation Demo block.

The main loop is available through the refresh function (loc #246). The entire story is composed of severall animations/scenes, executed in sequence. Configurations of animations are available right after the main loop, each possibly defining onEnter, animate and onExit callbacks.

A tricky thing was to convert a linear vertical scrolling, to a non-linear animation. For instance, in the main animation (explaining how to hand drawn a Penrose triangle), it takes the same amount of vertical scroll to draw tiny segments (e.i. first, second and fourth segments) and longer ones (i.e. third and fifth ones). Hence, the animation must go faster than normal to draw longer segments. To do so, I use a d3.scaleLinear() with many values. Standard use case sets the domain and range both with 2 values (start and stop mapping). But one can set these props with EXTRA VALUES in order to set INTERMEDIATE MAPPINGS ! (see this tweet).

The use case is a step by step animated explanation on how to draw a Penrose triangle (and some derivatives, at the end of the story).

Acknowledgments to :

• D3.js (v.5)
• blockbuilder.org
• tonyhschu's Small Scroll-linked Animation Demo block