While investigating a report from a reader, I realized that the sliders on my 2d visibility article are a little messy. There's a fade out animation that goes from here:

Fade-out starts at this slider position

to here:

Fade-out ends, all annotations hidden

As you reach the end of the sweep line animation, the annotations (lines and numbers) fade out so that you can see the final result. It's useful to think of the timeline of these two animations. They overlap:

start end Sweep line Fade

The problem is that if the boxes are near where the sweep line ends, the annotations fade out too quickly.

To solve this, I decided that the fade-out animation should wait past the point where the sweep line animation ends. I changed the fade-out to start later:

Fade-out starts at this slider position

The fade is only halfway finished when the sweep line hits its final point:

Sweep line at final position, fade continues

I extended the slider past that point. The sweep line no longer moves, but the fade continues to result in this:

Fade-out ends

Here's a visualization of this animation timeline:

start end Sweep line Fade

I don't update the 2d visibility article often but I'm glad there's a low barrier for me to update it. The code is fairly short and there's no build step. I find that I'm more likely to update my old pages if I don't have to figure out what I was doing and which build tools I was using eight years ago.

Labels:

0 comments: