Anime.js trigger on InView

Design help Custom code
1

I’m using anime.js thanks to the wonderful Timothy Ricks tutorial here: Stagger animations with Anime.js in Webflow - YouTube

I’ve set it up to trigger on my .h2 headings, but I realise the first initiation animates ALL .h2 headings even if they’re off screen. Is there a way to trigger this only on the .h2 heading that is currently in view?

Totally understand why Timothy used an ID instead of a class for this, but it’s not ideal to make IDs for every H2 heading as I’d eventually like to apply this throughout the site.

Any tips would be super gratefully received!

Many thanks,
Gordon

Here is my site Read-Only: https://preview.webflow.com/preview/unfauxgettable-v2?utm_medium=preview_link&utm_source=designer&utm_content=unfauxgettable-v2&preview=e0c933847cc0fe2a2160c3aadabc68d5&workflow=preview

2

Take a look at the seek control. Documentation | anime.js seek (animejs.com)

Here is a stack on the subject → scroll - How to use “seek” in anime.js in order to control an animation while scrolling? With example, please - Stack Overflow

Personally, I prefer to use GSAP and ScrollTrigger