Animation won't loop properly

When we play the animation from the animation panel, the animation loops perfectly as followed:
https://drive.google.com/file/d/18_cGBVSdlLuOurwYBTWD54ecjRfUSbjM/view?usp=sharing

Basically, the animation should play in this sequence in this order:

  1. Text with iphones image
  2. D2 placeholder
  3. D3 placeholder
  4. D4 placeholder
  5. D5 placeholder

The animation should then loop (after a small delay) until the user hovers out of the hover area.

But when we are in preview mode or on the published site, once the animation gets to D5 image and goes back to the text/iphones image, it goes blank, then D5 image reappears for a brief second before the D2 image appears. Here’s a recording on what happened on the published site:

https://drive.google.com/file/d/1YCgr8RENSH60y6u4cYL4USNq6k4cxIj6/view?usp=sharing

Would anyone be able to assist us on this please? Thank you:)

Our read-only link is here