Help with card animations for responsive version

I am currently working on a project and I have a problem. So I set up a rotating and moving animation for some cards in the hero section that return to the position they are in the dashboard image.
Below is the attached video.

The problem is that I don’t understand how to set the animation for the responsive version. Is there a way how I can set this to work correctly?

I will be grateful for any advice or help. Thanks in advance!

Read only link:
https://preview.webflow.com/preview/ecomassist-ai?utm_medium=preview_link&utm_source=designer&utm_content=ecomassist-ai&preview=e1a2193fccb58fc578e822ef42478f63&locale=en&workflow=preview

Best regards

@Valeria_Leascenco This is a pretty complex one to make sure it always ends up at the same spot.

What I would recommend is instead of loading these 4 images that are moving as their actual size I’d say you want to make them in a frame that is exactly the same size as the background where they need to stop at.

The reason that would help is that it would scale identically if the frame is exactly the same, it’d be just a bit harder to position with animation so that would need to change but this will definitely work, I’ve done it like that multiple times but do not have any examples handy to showcase a live version.

Let me know if you need any more help

Hey, Marko! Thanks for reply, I will try to change as you mentioned😉