When you yield too fast (more than once in a second), on iOS at least, form elements, like checkbox or radios, can become unresponsive. I experienced the problem on my latest notebook where animating would cause the other controls (checkboxes and radios) to become unresponsive on iOS. I solved it just now: Rounding polygon corners / Mathieu Jouhet / Observable (see the code for the slider() function at the end).
I’m using Jeremy Ashkenas inputs that I customized long ago, but tested the same issue with the Observable inputs
What I was doing is I was basically yielding super fast an animated value and used it as the value for some of the parameters, controllable with a slider.
While I don’t know technically why this happens – it’s probably related to generators behavior on iOS, I inspected the scrubber @mbostock made which did not trigger a cell re-render when the value updated: Scrubber / Mike Bostock / Observable
I understood that if you use requestAnimationFrame to update the value instead of yielding it, you can get the controls to work again, I was pretty relieved. Until we find a better solution, I won’t use generator yielded animation values anymore, but instead values computed as a function of the current time (using new Date().getTime()) within a requestAnimationFrame loop.
Note that fast cell re-renders themselves don’t make the controls unresponsive, as demonstrated in the current version of my notebook, it’s only if you’re yielding very fast, which I’m not anymore since I’m using returns and re-rendering the cell as fast as the animated parameters update.
So what I did is I updated the slider input factory function to get additional props: animates and animateValue, the first one being a boolean to trigger the animation, and the second one being a function that receives the current time and returns the value at this point of time. I’m using sin functions but you can use different systems like Mike’s keyframes on his scrubber.
I also added a useAnimatedValueOnInit prop that indicates whether or not it should use the animated value as the current value when not animating, the alternative being using the input original value prop.
I used Mike’s very convenient disposal function to cleanup on cell invalidation.
I don’t know how you can transpose this to your way of doing things, but I hope it will help, it sure did for the animations on my end!
