CSS Animation and interaction delay.

Tap tap tapping.

A blog written in 3rd person. For no reason.

For this game Ben Evans wanted some very simple controls. Basically a single tap anywhere to control it.

This will involve putting a stack of labels as an invisble layer on top of everything. The label will then be linked to a checkbox or radio button, which will manipulate what is displayed.

So: Display a label > user taps label > label's 'for' attribute is connected with ID of input > if input is checked then animate snake somewhere.

    
<label class="start-label" id="rs-label">right</label>
<input class="start" id="right-si" name="start" type="radio" />

#right-si:checked ~ div > start {
  display: block;
}

So that's all good... The next problem Ben needed to solve is how to bring these labels in fast. He wanted them to animate in sequence; up, right, down, left. On a timer. So when the user taps the screen, it could go in one of those directions.

The trouble is, it seems, is that there is a delay in when something is shown and when it is clickable.

Ben had previously built a table tennis game, using a similar timing device and this seemed to work fine. But he didn't notice the lag.

https://codepen.io/ivorjetski/pen/mdzrLbW

But this time Ben requires it to happen faster, and the lag is very noticable. Sad Face ☹

He's built a simple example of it here on CodePen for you all to see:

Is there lag? Demo and code here »

It actually seems very usable on a two second repeat. If you change $t to one then it only responds on double taps. But this is based on Ben's laptop. It probably depends on the GPU and CPU speed. And probably also on how complex the future CSS will be.