Restart svg animation every time it is scrolled into view?

I have some animated svg icons in my page that start to animate when scrolled into view which is fine via the setup in the interaction i have created which works well. Problem is when i scroll away and scroll back the svg animations don’t play again they just sort of pop into view with out animating.

The interaction scroll into view is display none > display block & scroll out of view is display none

Note seems to be Chrome only issue works fine FF and Edge

Has anyone had any success with this would like share their wisdom?

Note i cant share a public link due to NDA.


Here is my public share link: LINK
(how to access public share link)

Did you figure this out? Would love to know how you did it.