SMIL from beginning to end

In the context of SMIL animations the begin attribute makes for quite entertaining demos. Sure there are some values which don’t seem to be supported by modern browsers, but with the ones we have, the possibilities are endless.

Say you have a <path> element detailing a down-looking bezier curve.

<path d="M 0 0 c 20 10 60 10 80 0" />

With the <animate> element you can update the d attribute to twist the curve in the opposite direction.

<path d="M 0 0 c 20 10 60 10 80 0">
	<animate
		attributeName="d"
		dur="1s"
		values="
            M 0 0 c 20 10 60 10 80 0; 
            M 0 0 c 20 -10 60 -10 80 0; 
            M 0 0 c 20 10 60 10 80 0;
        "
	/>
</path>

Almost looks like a jumping rope, doesn’t it? Especially on top of a stylish background.

Let’s frame the visual with an horizon line and a charismatic figure looking for some exercise.

To take flight we rely on the <animateTransform> element, changing the y coordinate for the entire sprite.

<g>
	<animateTransform
		attributeName="transform"
		type="translate"
		values="0 0; 0 -10; 0 0;"
		dur="0.7s"
	/>
	<!-- ...boxed hero -->
</g>

And with the begin attribute you can actually run the animation in sync with the rope.

detail the first animation with a specific string

 <path d="...">
     <animate
         id="rope"
         ...
     />
 </path>

point to the id attribute in the animation which follows

 <g>
     <animateTransform
         begin="rope.begin"
         ...
     />
 </g>

Undeniably cute.

Repeat

Say the character is really energized and wants to keep moving. With the repeatCount attribute you can animate the rope a few more times.

<path d="...">
    <animate
        repeatCount="3"
        ...
    />
</path>

Primed and ready to jump together?

The rope loops, but the character stops after the first lift. Don’t take it personally, however. Our hero is following the instructions to the letter — and is not mad you didn’t follow suit.

Consider when the begin attribute.

<animateTransform
    begin="rope.begin"
    ...
/>

The first animation might repeat thrice, but begins only once.

Among the values for the now-popular attribute, you find a first solution in the repeat function. Small hiccup, however: the function refers to a different animation and a specific iteration.

<animateTransform
	begin="
        rope.begin; 
        rope.repeat(1);
        rope.repeat(2);
        rope.repeat(3);
    "
	...
/>

For the simple setup you may repeat the syntax as many times as necessary. If you were to jump without end, however, the solution becomes untenable.

<path d="...">
    <animate
        repeatCount="indefinite"
        ...
    />
</path>

Just how to keep going?

Repeat counts

The last snippet points to a first solution.

Remove the begin attribute and describe a separate animation. With the same duration and the same repeatCount attribute.

<animateTransform 
    dur="1s" 
    repeatCount="indefinite" 
    ... 
/>

There are however, and at least, two issues with the approach:

the animations take the same time

This might not bother you, and if you want the hero to jump faster, you can “cheat” by tinkering with the values attribute.

Instead of going up and down.

<animateTransform
     values="
         0 0; 
         0 -10; 
         0 0;
     "
     ...
/>

Have the character jump, come back and stay put. Enough to give pause.

<animateTransform
     values="
         0 0; 
         0 -10; 
         0 0;
         0 0;
         0 0;
     "
    ...
/>

the animations are independent of each other

Again, this might be less of a crux for you, but there is no relation between the two. No synchronization.

Repeat begin

Another solution goes back to the snippet causing the issue: jump as the first animation begins.

<animateTransform
    begin="rope.begin"
    ...
/>

The trick is therefore devious and elementary: have the first animation begin, over and over. Have the first animation begin immediately and when the very same ends.

<animate
    id="rope"
    begin="0s; rope.end"
    ...
/>

There’s only one question left: ready for some exercise? The animation might be compelling enough to really push you this time.

Toggle animation