The "What it does" section, with the buttons "Movement", "Rotation", etc. The behaviour of those buttons is not very intuitive. press and hold is hardly the first action someone thinks of when seeing those buttons. Instead they'll click them. They'll see some weird small movement in the corresponding square, if anything (In the last 2, nothing happens if you just click).
What's more, in the following section "No programming", the example shown says explicitly "click here" and explains that the blue rectangle "will be rotated 35º clockwise when the user clicks the trigger". "clicks" is even bolded. And yet, if you simply click it, it will only rotate a few degrees and return back instantly. Again, you need to press and hold for it to rotate completely.
I'd suggest either changing the wording or adding an explanation to tell the user to press and hold, or changing the behaviour of the examples to actually trigger on click.
Weirdly I did tap and hold those buttons first and I just realized that has become my default for a lot of UI elements on mobile, because it often emulates hover behavior.
I actually cheated a bit — you are right that it's not clicking, it's pressing. I tried various things, and this felt the most fun. You obviously feel differently.
The "cheat text" that says how it works is just meant to give a general idea. Most people would say they "clicked" the button, whether they were talking about mousedown, mouseup, long press etc.
The actual commands are slightly more complex — but this page is not the place to get into the details of what's a mousedown, mouseup, click, press etc.
Ok. But I didn't mean that as a discussion on what is a click or a mousedown, or what is fun. That's your decision, of course.
What I meant is that most people will just click and not see the action triggered as expected. Some may then try long pressing, but many won't. The result being that a large number of people won't get the expected impression from the demo and may even think that it's not working correctly.
The page doesn't actually suggest that you click on the buttons — they're just buttons (except for one, where it says "click here").
To me it seemed natural to hold down the button until the effect finished, and now I'm wondering if it's a difference between trackpad and mouse users.
I use a trackpad, and it's a relatively slow operation to click. I don't have a mouse handy, but it seems like it would be much quicker.
I admit I was indeed using it with a mouse. I tried it on mobile later and... my first intuition was still to tap buttons, not hold them down. I don't like or use trackpads frequently so I can't say much on that.
I'd guess it depends on what you think your readers may be using and how they use it, but my bet is still that it will be confusing to a fair portion of readers.
P.S. In fact, on mobile it's somewhat more confusing, because the actions will trigger when I am scrolling and inadvertently place my finger on something. What happens in this case is that the action won't "reset" when I take my finger off. I know none of this is a critical problem, but it does make it appear confusing or even somewhat broken.
By default, animations start and end "softly", because it's just nicer overall.
For the buttons in question, I updated them so that they have a hard start and a soft end.
The result is that if you reload the page, the animations start much more quickly and it's more obvious what's happening.
The problem with a simple click is that the transformation would be instantaneous, and it wouldn't look very good. Or, I can start the transformation with a click and let it end later — but then I'd need a reset button.
I don't know much about Android, but Apple wanted so badly to offer the "real internet" on the iPhone yhat they overrode lots of default browser events behavior.
Things like mouseup just don't get triggered if the user scrolls first, and scrollevents are sent infrequently.
Don't get me started on pinch to zoom which uses TWO invisible rectangles to show content.
The "What it does" section, with the buttons "Movement", "Rotation", etc. The behaviour of those buttons is not very intuitive. press and hold is hardly the first action someone thinks of when seeing those buttons. Instead they'll click them. They'll see some weird small movement in the corresponding square, if anything (In the last 2, nothing happens if you just click).
What's more, in the following section "No programming", the example shown says explicitly "click here" and explains that the blue rectangle "will be rotated 35º clockwise when the user clicks the trigger". "clicks" is even bolded. And yet, if you simply click it, it will only rotate a few degrees and return back instantly. Again, you need to press and hold for it to rotate completely.
I'd suggest either changing the wording or adding an explanation to tell the user to press and hold, or changing the behaviour of the examples to actually trigger on click.