autoReverse property

Sets or gets whether the timeline on an element begins playing in reverse immediately after it completes in the forward direction.

Syntax

JScript
object.autoReverse = bReverse
bReverse = object.autoReverse

 

Property values

Type: Object

A Boolean that specifies or receives one of the following values.

Remarks

The property cannot be modified in script after the onload event fires on the document body.

When you set autoReverse to true on a video file, the file freezes at the frame on which the reverse occurred—that is, on the last frame played.

Audio files do not play in reverse if autoReverse is set; they simply end.

If the element has a repeatCount greater than one, and autoReverse is set to true, the element is assumed to have completed one loop through the timeline when it has played forward one time and backward one time.

On some systems, this attribute is referred to as "Play forward, then backward."

Examples

The following example shows the current loop iteration of an animateMotion element with the autoReverse attribute set to true.

Code example: http://samples.msdn.microsoft.com/workshop/samples/author/behaviors/autoreverse.htm


<HTML XMLNS:t ="urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>autoReverse Property</TITLE>
<STYLE>
    .time   {behavior: url(#default#time2);}
</STYLE>
<?IMPORT namespace="t" implementation="#default#time2">

<SCRIPT LANGUAGE="JScript">
function fnRepeat()
{
    oCount.innerText = "Current iteration: " + 
        (oAnim.currTimeState.repeatCount + 1);
        // Add one because repeatCount is zero-based.
}
</SCRIPT>
</HEAD>

<BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF"
    LINK="#000000" VLINK="#808080" ALINK="#000000">

<DIV ID="oCount">Current iteration: 1</DIV>

<DIV ID="oDiv" CLASS="time" 
    STYLE="position:absolute; 
    top:25px; left:50px;
    height:100px; width:100px;
    background-color:blue;"
</DIV>

<t:ANIMATEMOTION ID="oAnim" targetElement="oDIV"
    to="150,0" dur="1" autoReverse="true" repeatCount="5"
    onrepeat="fnRepeat()"/>

</BODY>
</HTML>

See also

transitionFilter
animate
animateColor
animateMotion
animation
audio
excl
img
media
par
ref
seq
set
video
Reference
time2
Conceptual
Introduction to HTML+TIME

 

 

Show: