The following samples demonstrate how to create SMIL animations.

SIZE AND PLACEMENT ANIMATIONS
SMIL animations let you move regions and clips around the screen, as well as change their sizes.

Sample File	Description	Featured Illustrated	Reference
rootlayoutresize.smil	The main media playback pane displays a clip and grows smaller. Next, a secondary media playback window opens with another clip and grows larger.	<animate/> tags applied to <root-layout/> and <topLayout/> tags	click here
regionanimation.smil	A region's height, width, and position are animated, making the clip it contains shrink, expand, and move around the screen.	<animate/>, <animateMotion/>, and <set/> tags applied to a <region/> tag	click here
clipanimation.smil	A clip's height, width, and position are animated, making it shrink, expand, and move around its playback region, which has a red background.	<animate/>, <animateMotion/>, and <set/> tags applied to a clip source tag	click here
fitanimate.smil	A demonstration of how a region's fit attribute affects clip appearance when the region is animated.	<animate/> tag applied to regions that use different fit values	click here
motionanimation.smil	A small clip moves around the screen diagonally. Movement is alternately discrete and linear.	<animateMotion/> tag applied to a region to create diagonal movement	click here
logo2.smil	Similar to logo.smil, except that the logo is introduced with a motion animation. After moving into position, the logo becomes semi-transparent.	<animate/> tags applied to a clip in a subregion	click here
textoverlay.smil	Similar to the preceding logo animation, a semi-transparent RealText clip extends from the side of a video, then retracts.	motion animation along with rn:backgroundOpacity and rn:mediaOpacity applied to a RealText clip	click here

STACKING ORDER (Z-INDEX) ANIMATIONS
By animating regions' z-index attributes, you can change how the regions stack on top of each other.

Sample File	Description	Featured Illustrated	Reference
z-indexmovement.smil	Two clips appear side-by-side. The first clip moves over the second clip twice, first appearing behind the second clip, then in front of it. This cycle repeats twice.	<set/> tags applied to region z-index values	click here
z-indexselect.smil	Four images appear in four regions. Clicking an image brings it to the front by animating the regions' z-index values.	<set/> tags that use interactive timing applied to region z-index values	click here
z-indexcascade.smil	Four images in four regions cascade in front of each other based on changing z-index values.	<set/> tags applied to region z-index values in a cumulative, additive animation	click here

VOLUME ANIMATIONS
An animation can target a region's soundLevel attribute, as well as visual attributes such as width and height.

Sample File	Description	Featured Illustrated	Reference
volumechange.smil	An audio clip's volume goes from normal, to half, to double, then back to normal.	<animate/> tags applied to a <region/> tag's soundLevel attribute.	click here
volumefade.smil	An audio clip's volume fades in during the first five seconds, then fades out during the last five seconds.	<animate/> tag begin time coordinated to a clip ending with begin="ID.end-5s"	click here

COLOR ANIMATIONS
Using animations, you can also change colors for regions and <brush/> objects. See the section "Color and Transparency" for samples that use non-animated SMIL color attributes.

Sample File	Description	Featured Illustrated	Reference
backgroundcolor change.smil	An image that includes transparency appears against a white background. The background colors change, first discretely, then linearly.	<animateColor/> tag applied to a <region/> tag's backgroundColor attribute	click here
brushcolors.smil	A <brush/> object appears within a white region. Its colors change, first discretely, then linearly. The animation repeats with an image that includes transparency overlaying the <brush/> object.	<animateColor/> tag applied to a <brush/> tag's color attribute	click here click here
psychedelic.smil	A <brush/> object shrinks, then expands as its colors change. As this occurs, the background region animates through the same color values, but in the reverse order.	<animateColor/> applied to both a <brush/> tag and a <region/> tag; <animate/> and <animateMotion/> used to resize a region	click here click here

ANIMATION FEATURES
SMIL animations include several features for controlling the animation appearance.

Sample File	Description	Featured Illustrated	Reference
calcmodes.smil	An image moves horizontally three times through multiple postion values. Each repetition uses a different calcMode value to control the flow.	calcMode values	click here
additive.smil	An interactive demonstration in which an image region grows, shrinks, moves, or resets based on viewer interaction.	additive attributes in <animate/> tags, along with advanced timing	click here
sizevideo.smil	A video enlarges discretely or shrinks linearly based on button clicks.	additive attributes in <animate/> tags, along with discrete and linear calcMode attributes.	click here
accumulate.smil	An image grows larger to fill a region by "pulsing": growing larger, then smaller, then larger, then smaller, and so on.	additive and accumulate attributes in an <animate/> tag	click here