Question about Animation Handling and Web Animations API Compatibility

[agarwalamn]

Currently, our team is working on a project where we need to pause animations on a tap gesture. We initially explored using document.getAnimations() to get all animations and pause them. However, we observed that only the data for the opacity animation is available in the document.getAnimations() response, and not for other transition animations.

Additionally, we are interested in determining which animations are being called by the Web Animations API (WAAPI) or are hardware-accelerated. Our goal is to get information about all animations, not just those related to opacity.

Is there a recommended approach or feature in Framer Motion that would allow us to achieve these requirements? If not, could you provide guidance on how we might gather information about all animations, including those handled by the WAAPI or hardware-accelerated ones?

Additionally, we already tried an approach using the useAnimate object, but we are interested in finding a more global solution. We want a function that can handle the tap gesture with the motion or m component globally, ensuring consistency and ease of maintenance across our application.

Environment:
Framer Motion version: 10.16.4
React version: 18.2