I need a series of animatable png files that I can overlay

I'm considering a HTML5/JS clone and need to create some images which are independently animated, and as such controllable from HTML5.
Example is the big wheel here: https://youtu.be/JsD1wBE-LII?t=148

So would need:
- Background
- Wheel which rotates 1/7 or 1/8 of a turn (as it can then be repeated.
- 2x buttons and a stand for said buttons
- Gate which can open and close
- Steps which can light or not light
- Legs for the wheel stand which can light or not light in three different areas

The image can be photorealistic or cartoon style. It does *not* have to match this exactly - in fact it shouldn't as I don't want to risk copyright infringement.

I need the individual frames as png files so that I can swap between them to make animation, and I need the backgrounds of all frames (except the background itself of course) to be transparent as each section will overlay the previous to form a full image.