What Happens When SMIL end and dur Conflict?
When the end and dur attributes conflict in
Synchronized Multimedia Integration Language (SMIL) or SVG animations,
the SMIL timing specification resolves the discrepancy by prioritizing
the earliest boundary to determine the element's active duration. While
dur defines the simple duration of a single animation
cycle, end defines an absolute or event-driven cutoff point
for the active interval. When both are present, the element plays for
its simple duration unless the end condition occurs first,
in which case the animation terminates prematurely.
Understanding Simple Duration vs. Active Duration
To understand how conflicts are resolved, it is essential to distinguish between the two types of duration defined in SMIL timing:
- Simple Duration (
dur): The length of time required to play through the animation presentation once from start to finish. - Active Duration: The total time during which the animation is actively running, repeating, or influencing the target attribute.
The end attribute does not redefine the speed or
playback length of the simple animation cycle; instead, it establishes
an explicit boundary for the active duration.
Scenario 1:
end Occurs Before dur Finishes
If the specified end time arrives before the duration
specified by dur elapses (for example,
begin="0s" dur="10s" end="4s"), the active duration is cut
short. The animation plays at its normal rate for 4 seconds and stops
immediately at the 4-second mark, never reaching the end of its defined
animation trajectory. If a fill="freeze" attribute is
present, the animation freezes at the exact interpolated value achieved
at the 4-second cutoff.
Scenario 2:
end Occurs After dur Finishes
If end is set to a time greater than dur
without any repetition attributes (for example,
begin="0s" dur="5s" end="10s"), the simple duration
finishes at 5 seconds. Because there are no repeat iterations specified
via repeatCount or repeatDur, the active
playback completes at the 5-second mark. The presence of a later
end value does not stretch or slow down the 5-second
animation to fill a 10-second window.
Interactions with Repetition and Events
When repetition attributes like repeatCount="indefinite"
are combined with end, the end attribute
serves as the definitive hard stop. An animation configured to repeat
indefinitely will loop continuously until the end timestamp
or event fires, at which point the active interval concludes.
When end is tied to an event (such as
end="click"), the animation runs according to
dur unless the user triggers the event before
dur completes. If the event occurs during playback, the
animation ends instantly; if the animation finishes its full duration
before the event occurs, it ends normally at dur.