How Does the Subtype Attribute Customize SMIL Wipe Transitions?

The subtype attribute in Synchronized Multimedia Integration Language (SMIL) refines standard transition elements by specifying the exact direction, pattern, starting point, and orientation of visual wipe effects. While the primary type attribute defines the overarching geometric family of a transition—such as barWipe, irisWipe, or clockWipe—the subtype attribute controls the precise mechanics of how the transition reveals or conceals media elements on screen.

The Role of Transitions in SMIL

SMIL includes a dedicated transition module that standardizes how visual transitions execute across multimedia presentations. The primary element used to define these effects is <transition>.

A standard transition definition incorporates several key attributes:

type: Specifies the broader transition family, mapped closely to SMPTE wipe codes (e.g., barWipe, fourBoxWipe, radialWipe).
subtype: Defines the specific direction or geometric variation for that wipe family.
dur: Determines the duration over which the transition completes.
startProgress and endProgress: Define the partial progress values for entry and exit points.
direction: Controls whether the transition moves forward or backward in sequence.

Directional Control in Linear Bar Wipes

The standard barWipe transitions from one media item to another along a straight linear axis. Without a subtype, a player defaults to a predefined direction, but explicitly setting the subtype allows developers to orient the wipe along any primary axis:

leftToRight: The wipe reveals the new media asset starting from the left edge and moving toward the right.
topToBottom: The wipe initiates at the top border and travels downward.
bottomToTop: The wipe progresses from the lower edge upward.
rightToLeft: The wipe originates on the right side and moves leftward.

For split-bar wipes where multiple bands move concurrently, subtypes like vertical or horizontal create opposing movements originating simultaneously from center outward or edges inward.

Shaping Iris and Shape-Based Wipes

For shape-based wipe patterns like irisWipe or triangleWipe, the subtype attribute modifies geometric orientation and growth origins:

rectangle: Expands an iris transition as an escalating rectangular viewport.
diamond: Expands the transition in a four-point diamond layout.
topCenter, bottomCenter, leftCenter, rightCenter: Aligns the origin point of directional triangular or polygon wipes to specific edges rather than defaulting to the frame's center coordinates.

Rotational and Clock Wipes

Radial and rotational wipe families, such as clockWipe or fanWipe, rely heavily on the subtype attribute to establish the anchor point and angular trajectory of the wipe sweep:

clockwiseTop: Initiates the rotational reveal from the 12 o'clock position and moves in a standard clockwise circle.
clockwiseBottom: Starts the radial sweep from the 6 o'clock position.
counterClockwiseTop: Inverts the circular motion direction while retaining the top center starting anchor.
twoBladeVertical: Creates opposing dual-radial sweeps simultaneously along the vertical meridian.

Implementation Syntax

A basic SMIL implementation defines the transition in the <head> section using type and subtype, then applies that transition to a visual asset in the <body> layout:

<smil xmlns="http://www.w3.org/ns/SMIL">
  <head>
    <layout>
      <root-layout width="640" height="480"/>
      <region id="mainRegion" top="0" left="0" width="640" height="480"/>
    </layout>
    <transition id="wipeRight" 
                type="barWipe" 
                subtype="leftToRight" 
                dur="1.5s"/>
  </head>
  <body>
    <seq>
      <img src="slide1.jpg" region="mainRegion" dur="5s"/>
      <img src="slide2.jpg" region="mainRegion" dur="5s" transIn="wipeRight"/>
    </seq>
  </body>
</smil>

By isolating visual mechanics into the subtype property, SMIL decouples geometric algorithms from motion parameters, allowing developers to configure granular SMPTE-compliant video transitions directly through declarative XML markup.