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

Animations

Sofia
Istanbul
Lisbon
Paris
Tokyo
Melbourne
  • Configure animation
  • Paris
  • Slide
  • easeInOutBack

The PeekTemplate of each Tile can show additional information. The way it is shown and hidden is controlled via the PeekTemplateSettings inner tag. These settings are:

  • Animation - the type of animation, an enum of type Telerik.Web.UI.PeekTemplateAnimation
  • AnimationDuration - how long the animation lasts, in milliseconds
  • CloseDelay - how long the PeekTemplate stays shown, in milliseconds
  • Easing - the type of animation easing
  • HidePeekTemplateOnMouseOut - if the PeekTemplate should be hidden when the mouse moves out of the tile, boolean
  • ShowInterval - how long is the default content shown, in milliseconds
  • ShowPeekTemplateOnMouseOver - if the PeekTemplate should be shown when the mouse moves in the tile, boolean

Use the right mouse button to select a tile and change its animation settings from the configurator on the right.

Each of these tiles has a predefined set of options for the animation that shows the PeekTemplate. This list is shown in the PeekTemplate itself for each tile.

Use the configurator on the right to change the animation settings of a given tile to experiment with the possible combinations.

Use the dropdown or select a tile in the TileList to set the desired effects.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.TileList.Animations.DefaultCS" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
    <script src="scripts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rbConfigureAnimations">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadTileList1" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-custom">
        <telerik:RadTileList RenderMode="Lightweight" runat="server" ID="RadTileList1" ScrollingMode="None" Width="640px"
            OnClientLoad="telerikDemo.tileListClientLoad"
            OnClientTileSelected="telerikDemo.updateDropDown"
            SelectionMode="Single" EnableDragAndDrop="true">
            <Groups>
                <telerik:TileGroup>
                    <telerik:RadImageTile Name="Sofia" ImageUrl="../../images/Wide/Sofia.png" Shape="Wide"
                        NavigateUrl="http://en.wikipedia.org/wiki/Sofia" Target="_blank">
                        <Title Text="Sofia"></Title>
                        <PeekTemplateSettings AnimationDuration="900" ShowInterval="8000" CloseDelay="7000"
                            Animation="Slide" Easing="easeInQuint" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadImageTile>
                    <telerik:RadImageTile Name="Istanbul" ImageUrl="../../images/Wide/Istanbul.png" Shape="Wide"
                        NavigateUrl="http://en.wikipedia.org/wiki/Istanbul" Target="_blank">
                        <Title Text="Istanbul"></Title>
                        <PeekTemplateSettings AnimationDuration="700" ShowInterval="6000" CloseDelay="4000"
                            Animation="Fade" Easing="easeInQuint" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadImageTile>
                    <telerik:RadImageTile Name="Lisbon" ImageUrl="../../images/Wide/Lisbon.png" Shape="Wide"
                        NavigateUrl="http://en.wikipedia.org/wiki/Lisbon" Target="_blank">
                        <Title Text="Lisbon"></Title>
                        <PeekTemplateSettings AnimationDuration="600" ShowInterval="10000" CloseDelay="10000"
                            Animation="Resize" Easing="easeInExpo" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadImageTile>
                    <telerik:RadImageTile Name="Paris" ImageUrl="../../images/Wide/Paris.png" Shape="Wide"
                        NavigateUrl="http://en.wikipedia.org/wiki/Paris" Target="_blank" Selected="true">
                        <Title Text="Paris"></Title>
                        <PeekTemplateSettings AnimationDuration="800" ShowInterval="5000" CloseDelay="5000"
                            Animation="Slide" Easing="easeInOutBack" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadImageTile>
                    <telerik:RadImageTile Name="Tokyo" ImageUrl="../../images/Wide/Tokyo.png" Shape="Wide"
                        NavigateUrl="http://en.wikipedia.org/wiki/Tokyo" Target="_blank">
                        <Title Text="Tokyo"></Title>
                        <PeekTemplateSettings AnimationDuration="400" ShowInterval="10000" CloseDelay="6000"
                            Animation="Fade" Easing="swing" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadImageTile>
                    <telerik:RadImageTile Name="Melbourne" ImageUrl="../../images/Wide/Melbourne.png" Shape="Wide"
                        NavigateUrl="http://en.wikipedia.org/wiki/Melbourne" Target="_blank">
                        <Title Text="Melbourne"></Title>
                        <PeekTemplateSettings AnimationDuration="800" ShowInterval="7000" CloseDelay="7000"
                            Animation="Slide" Easing="easeInQuad" ShowPeekTemplateOnMouseOver="true" HidePeekTemplateOnMouseOut="true" />
                    </telerik:RadImageTile>
                </telerik:TileGroup>
            </Groups>
        </telerik:RadTileList>
    </div>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
    <qsf:ConfiguratorPanel runat="server" Title="Configure animation">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="lblSelectTile" Text="Select Tile to customize" AssociatedControlID="rddlSelectTile" runat="server" CssClass="label" />
                            <qsf:DropDownList Size="Wide" runat="server" ID="rddlSelectTile" OnClientLoad="telerikDemo.selectClientLoad" OnClientSelectedIndexChanged="telerikDemo.updateTileList">
                                <Items>
                                    <telerik:DropDownListItem Text="Istanbul" />
                                    <telerik:DropDownListItem Text="Lisbon" />
                                    <telerik:DropDownListItem Text="Melbourne" />
                                    <telerik:DropDownListItem Text="Paris" Selected="true" />
                                    <telerik:DropDownListItem Text="Sofia" />
                                    <telerik:DropDownListItem Text="Tokyo" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <asp:Label ID="lblAnimationType" Text="Animation Type" AssociatedControlID="ddlAnimationType" runat="server" CssClass="label" />
                            <qsf:DropDownList ID="ddlAnimationType" Size="Wide" runat="server">
                                <Items>
                                    <telerik:DropDownListItem Text="None" />
                                    <telerik:DropDownListItem Text="Fade" />
                                    <telerik:DropDownListItem Text="Slide" Selected="true" />
                                    <telerik:DropDownListItem Text="Resize" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <asp:Label ID="lblEasing" Text="Animation Easing" AssociatedControlID="ddlEasing" runat="server" CssClass="label" />
                            <qsf:DropDownList ID="ddlEasing" runat="server" Size="Wide" DropDownHeight="310px" DropDownWidth="155px">
                                <Items>
                                    <telerik:DropDownListItem Text="none" Value="" />
                                    <telerik:DropDownListItem Text="swing" Value="swing" />
                                    <telerik:DropDownListItem Text="easeLinear" Value="easeLinear" />
                                    <telerik:DropDownListItem Text="easeInQuad" Value="easeInQuad" />
                                    <telerik:DropDownListItem Text="easeOutQuad" Value="easeOutQuad" />
                                    <telerik:DropDownListItem Text="easeInOutQuad" Value="easeInOutQuad" />
                                    <telerik:DropDownListItem Text="easeInCubic" Value="easeInCubic" />
                                    <telerik:DropDownListItem Text="easeOutCubic" Value="easeOutCubic" />
                                    <telerik:DropDownListItem Text="easeInOutCubic" Value="easeInOutCubic" />
                                    <telerik:DropDownListItem Text="easeInQuart" Value="easeInQuart" />
                                    <telerik:DropDownListItem Text="easeOutQuart" Value="easeOutQuart" />
                                    <telerik:DropDownListItem Text="easeInOutQuart" Value="easeInOutQuart" />
                                    <telerik:DropDownListItem Text="easeInQuint" Value="easeInQuint" />
                                    <telerik:DropDownListItem Text="easeOutQuint" Value="easeOutQuint" />
                                    <telerik:DropDownListItem Text="easeInOutQuint" Value="easeInOutQuint" />
                                    <telerik:DropDownListItem Text="easeInSine" Value="easeInSine" />
                                    <telerik:DropDownListItem Text="easeOutSine" Value="easeOutSine" />
                                    <telerik:DropDownListItem Text="easeInOutSine" Value="easeInOutSine" />
                                    <telerik:DropDownListItem Text="easeInExpo" Value="easeInExpo" />
                                    <telerik:DropDownListItem Text="easeOutExpo" Value="easeOutExpo" />
                                    <telerik:DropDownListItem Text="easeInOutExpo" Value="easeInOutExpo" />
                                    <telerik:DropDownListItem Text="easeInCirc" Value="easeInCirc" />
                                    <telerik:DropDownListItem Text="easeOutCirc" Value="easeOutCirc" />
                                    <telerik:DropDownListItem Text="easeInOutCirc" Value="easeInOutCirc" />
                                    <telerik:DropDownListItem Text="easeInElastic" Value="easeInElastic" />
                                    <telerik:DropDownListItem Text="easeOutElastic" Value="easeOutElastic" />
                                    <telerik:DropDownListItem Text="easeInOutElastic" Value="easeInOutElastic" />
                                    <telerik:DropDownListItem Text="easeInBack" Value="easeInBack" />
                                    <telerik:DropDownListItem Text="easeOutBack" Value="easeOutBack" />
                                    <telerik:DropDownListItem Text="easeInOutBack" Value="easeInOutBack" Selected="true" />
                                    <telerik:DropDownListItem Text="easeInBounce" Value="easeInBounce" />
                                    <telerik:DropDownListItem Text="easeOutBounce" Value="easeOutBounce" />
                                    <telerik:DropDownListItem Text="easeInOutBounce" Value="easeInOutBounce" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:Button ID="rbConfigureAnimations" Size="Wide" Text="Configure animations" runat="server" />
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:Label ID="lblAnimationDuration" Text="Animation Duration, ms" AssociatedControlID="rntbAnimationDuration" runat="server" CssClass="label" />
                            <qsf:NumericTextBox Size="Narrow" runat="server" ID="rntbAnimationDuration" MinValue="0" MaxValue="10000"
                                ShowSpinButtons="true" Value="800" NumberFormat-DecimalDigits="0" IncrementSettings-Step="100">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:Label ID="lblShowInterval" Text="Show Interval, ms" AssociatedControlID="rntbShowInterval" runat="server" CssClass="label" />
                            <qsf:NumericTextBox Size="Narrow" runat="server" ID="rntbShowInterval" MinValue="0" MaxValue="20000"
                                ShowSpinButtons="true" Value="5000" NumberFormat-DecimalDigits="0" IncrementSettings-Step="100">
                            </qsf:NumericTextBox>
                        </li>
                        <li>
                            <asp:Label ID="lblCloseDelay" Text="Close Delay, ms" AssociatedControlID="rntbCloseDelay" runat="server" CssClass="label" />
                            <qsf:NumericTextBox Size="Narrow" runat="server" ID="rntbCloseDelay" MinValue="0" MaxValue="20000"
                                ShowSpinButtons="true" Value="5000" NumberFormat-DecimalDigits="0" IncrementSettings-Step="100">
                            </qsf:NumericTextBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="chbxShowPeekOnMouseOver" Text="Show PeekTemplate on mouseover" Checked="true" runat="server" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="chbxHidePeekOnMouseOut" Text="Hide PeekTemplate on mouseout" Checked="true" runat="server" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance