photo of ben szymanski

Chrome and Web Animations

tl;dr; Don't name a function "animate()" and expect it to work right in Chrome. API naming collision!

When working on a small demo file recently, I needed to test an animation.

I created a HTML button, then used the onclick attribute to assign a function named "animate" to it.

<button type="button" onclick="animate()">Start</button>

This worked correctly in Safari, as I had expected, however when executed in Chrome, the following error message appeared in the debug console:

Uncaught TypeError: Failed to execute 'animate' on 'Element': 1 argument required, but only 0 present.

I believe this has to do with the WebAnimations API, however I haven't done all of the work to verify that claim.

The temporary workaround, then is to name your function something other than "animate." (You could name it "animateX," for example.)