New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

How To Configure Animations

This article explains how the animation options of the CoverFlow, CoverFlowButtons, Carousel and CarouselButton types of the RadRotator can be configured to provide different effects than the default.

The animation options are a JavaScript object that can be fed to the rotator's code through the set_scrollAnimationOptions(string, object) client-side method of the Telerik.Web.UI.RadRotatorAnimation object. How this is done is shown in the CoverFlow Mode Online Demo.

Essentially, the required properties must be set to an object and provided as the second argument to the method after the RadRotator declaration, while the first argument is a string containing the ClientID of the rotator that will be affected:

<script type="text/javascript">
    var animationOptions = {
        minScale: 0.8, // The size scale [0; 1], applied to the items that are not selected.
        yO: 60, // The offset in pixels of the center of the selected item from the top edge of the rotator.
        xR: -30, // The offset in pixels between the selected items and the first item on the left and on the right of the selected item.
        xItemSpacing: 50, // The offset in pixels between the items in the rotator.
        matrix: { m11: 1, m12: 0, m21: -0.1, m22: 1 }, // The 2d transformation matrix, applied to the items that appear on the right of the selected item.
        reflectionHeight: 0.5, // The height of the reflection
        reflectionOpacity: 1 // The opacity, applied to the reflection
    }

    // The set_scrollAnimationOptions method takes two arguments - the first one is the ClientID of the rotator, which we want to configure and the second one is
    // a hash table with the options we want to apply.
    Telerik.Web.UI.RadRotatorAnimation.set_scrollAnimationOptions("<%= RadRotator1.ClientID %>", animationOptions);
</script>
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="200" ItemWidth="100" Height="100"
    ItemHeight="100" DataSourceID="XmlDataSource1" FrameDuration="1000">
    <ItemTemplate>
        <asp:Image CssClass="itemTemplate" ID="Image2" runat="server" ImageUrl='<%# XPath("ImageURL") %>'
            AlternateText="IMAGE" />
    </ItemTemplate>
</telerik:RadRotator>

Here follows a list with the available options and their effect:

  • minScale - the size scale [0; 1], applied to the items that are not selected relative to the item's size from the rotator's properties

  • xO - the offset in pixels of the center of the selected item from the left edge of the rotator

  • yO - the offset in pixels of the center of the selected item from the top edge of the rotator

  • xR - the offset in pixels between the selected item and the first item on its left / right

  • yR - the offset in pixels between the selected item and the first item on its top / bottom

  • selectedItemOffsetX - the selected item's offset in pixels from the first item on its left

  • selectedItemOffsetY - the selected item's offset in pixels from the first item to its top

  • xItemSpacing - the horizontal offset in pixels between the items in the rotator

  • yItemSpacing - the vertical offset in pixels between the items in the rotator

  • matrix - the 2d transformation matrix applied to the items that appear on the right of the selected item

  • reflectionHeight - the height of the reflection

  • reflectionOpacity - the opacity, applied to the reflection

See Also

In this article