Virtual lenticular wiggle3d in JavaScript using phones gyroscope

I’m aiming to build an app that recreates the wiggle3d effect similar to the original 3D images printed on lenticular paper in the pre digital era.

Here is an example of the frames that should be made interactive according to the phones rotation: https://media3.giphy.com/media/LpF5BigUOHVsm0802d/giphy.gif?cid=5e214886fcfcfc56974ce20bdcb79542475eb21dd5139545&rid=giphy.gif&ct=g

In order to do this I need to write a script with the following functionality:

• detect if a device has a gyroscope
• Request acces to the gyroscope (iOS 13+)
• Detect the amount of frames in a gif
• Array the frames in a rotation from +45 to -45 degrees. So if there’s 7 frames frame one would show up on -45, frame two on -30, frame three on -15 degrees...

Anybody an idea how to do this? I will soon upload the preliminary script that gets the y rotation from the device but lacks the frame detection and gallery based on the rotation.