This block experiments scrolly telling with D3.
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
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).