How to animate svg elements in consistent loop

[tzaeb]

Hello,
I can not figure out how to animate a svg element in loop, e.g. translate some element in x or y position and back to start position, not only once but in loop with smooth motion.

All examples in the fitbit dev guide contains only one loop and the attribute repeatCount with indefinite doesn't work because I have always a second animation element which brings the element back to start position. I also want to avoid a setInterval function which contains this:

document.getElementbyId("group_anim").animate("enable");

My code looks like this currently:

<svg>
	<g id="group_anim" transform="translate(50%,50%)">
		<image x="-90" y="-70" width="180" height="180" fill="aqua" href="image.png">
	    	<!-- up -->
	    	<animate attributeName="y"  begin="enable" to="-110" easing="ease-in-out" dur="1"/>
	    	<!-- down -->
	    	<animate attributeName="y"  begin="enable+1" to="-70" easing="ease-in-out" dur="1"/>
	  	</image>
  	</g>
</svg>

In short I need to implement an animation like it is shown in the gif of topic coordinate-animation:

https://dev.fitbit.com/build/guides/user-interface/animations/#coordinate-animation

Thanks for your help!

[tzaeb · Accepted solution]

I found the solution by myself. Attribute repeatDur with summed up duratation of both animations fixed the issue. So I am able to use attribute repeatCount with indefinite and only have to enable the animation once like this:

index.js

document.getElementById("group_anim").animate("enable");

index.gui

<svg>
	<g id="group_anim" transform="translate(50%,50%)">
		<image x="-90" y="-70" width="180" height="180" fill="aqua" href="image.png">
	    	<!-- up -->
	    	<animate attributeName="y"  begin="enable" to="-110" easing="ease-in-out" dur="1" repeatDur="2" repeatCount="indefinite"/>
	    	<!-- down -->
	    	<animate attributeName="y"  begin="enable+1" to="-70" easing="ease-in-out" dur="1" repeatDur="2" repeatCount="indefinite"/>
	  	</image>
  	</g>
</svg>

.