How Do transIn and transOut Work in SMIL Transitions?

In Synchronized Multimedia Integration Language (SMIL), the transIn and transOut attributes define visual transition effects when media elements enter and exit a presentation. These attributes reference pre-configured transition elements, enabling precise control over how text, video, or image assets fade, wipe, dissolve, or slide on and off the screen without altering the core media files.

Understanding the Role of transIn and transOut

SMIL separates the definition of a transition effect from its application to an asset. The transIn and transOut attributes act as connectors on individual media objects—such as <img/>, <video/>, or <text/>—linking them directly to transition rules defined elsewhere in the document.

transIn: Dictates the transition applied when the media element begins its active duration. The transition starts at the element's start time and progresses forward.
transOut: Dictates the transition applied when the media element reaches the end of its active duration. The transition completes exactly when the element becomes inactive.

Defining Transitions with the `<transition>` Element

Before applying transitions using transIn or transOut, the specific effect must be declared within the <head> section inside a <layout> or <transitionFilter> block using the <transition> element. Each definition requires an xml:id or id attribute, along with visual parameters:

type: The category of transition (such as barWipe, fade, irisWipe, or slideWipe).
subtype: The directional variation or specific style (such as leftToRight, crossfade, or rectangle).
dur: The duration of time the transition takes to complete (for example, 1.5s).

Example Transition Definition

<smil xmlns="http://www.w3.org/ns/SMIL">
  <head>
    <layout>
      <root-layout width="800" height="600" />
      <region id="main_region" width="800" height="600" />
    </layout>
    <transition id="fadeIn" type="fade" subtype="crossfade" dur="1s" />
    <transition id="wipeRight" type="barWipe" subtype="leftToRight" dur="1.5s" />
  </head>
  <body>
    <!-- Media elements placed here -->
  </body>
</smil>

Applying transIn and transOut in the Document Body

Once defined, the transition IDs are assigned directly to the transIn and transOut attributes on media elements located within the <body> of the SMIL document.

<body>
  <seq>
    <img src="intro.jpg" 
         region="main_region" 
         dur="5s" 
         transIn="fadeIn" 
         transOut="wipeRight" />
    <video src="presentation.mp4" 
           region="main_region" 
           dur="30s" 
           transIn="wipeRight" />
  </seq>
</body>

In this sequence, intro.jpg appears with a 1-second crossfade into the frame, remains static for its display duration, and exits via a 1.5-second bar wipe to the right. As the image exits, the subsequent video begins using the same wipe transition as its entrance effect.

Timing and Execution Behavior

SMIL enforces strict timing rules regarding how transitions interact with media duration:

Inclusive Timing: The time taken by transIn and transOut occurs inside the total active duration (dur) of the media element. A 5-second image with a 1-second transIn and a 1-second transOut will spend 1 second transitioning in, 3 seconds fully visible, and 1 second transitioning out.
Duration Constraints: The combined duration of transIn and transOut cannot exceed the total duration of the target media element. If the element's duration is shorter than the combined transitions, the player truncates or overrides the effect.
Default Fallbacks: If a media element specifies a transIn or transOut ID that does not exist in the <head>, the player ignores the attribute and renders the media with standard cut-in and cut-out behavior.