Need Help With Lottie Animations and Formatting for Tabs

Hello Webflow Forum! First Poster here and looking forward to being part of an awesome community hopefully.

To start, here’s the read link: https://preview.webflow.com/preview/lottie-test-project-75450e?utm_medium=preview_link&utm_source=designer&utm_content=lottie-test-project-75450e&preview=62775df175099cd4f861789d99caadd6&mode=preview

It’s a tabbed layout that I’m having two problems with.

Problem #1: Animation start/stop on display.

I’m trying to figure out how to set up the lottie animations to only play when displayed. I currently have them all looping, but I’d like them to only play on display if at all possible, and haven’t found any answers anywhere I’ve looked yet directly relating to this because they’re all technically in the viewport.

If anyone has any ideas on how to make that happen, I’d appreciate it a ton!

Problem #2: Mobile Display issue

Client likes how things look, but when we dip down to standard iPhone size they’d like if it could just be one long list instead of the layout we get where two share a row. Normally I would fix it with a grid, but with how it’s currently built that doesn’t seem possible. Is there a way I could use a grid to link the tabbed containers to display?

Huge thank you in advance for anyone that has any info or help they can give. Random Internet Friends can truly be heroes!