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

Animations

By default, the TabStrip uses animations to reveal the content of the tabs. You can modify these animations through the Animation configuration option.

The following example demonstrates how to configure the TabStrip animation:

@(Html.Kendo().TabStrip()
    .Name("tabstrip")
    .Animation(animation =>
    {
        animation.Enable(true);
        animation.Open(config =>
        {
            config.Expand(ExpandDirection.Vertical);
            config.Fade(FadeDirection.In);
            config.Duration(AnimationDuration.Slow);
        });
        animation.Close(config =>
        {
            config.Reverse(true);
        });
    })
    .Items(tabstrip =>
    {
        // add TabStrip items
    })
    )
<kendo-tabstrip name="tabstrip">
    <popup-animation enabled="true"> 
        <open duration="300" effects="expand:vertical fade:in" /> 
        <close duration="100" reverse="true" /> 
    </popup-animation>
    <items>
        @*add Items*@
    </items>
</kendo-tabstrip>

See Also

In this article