How to Fade or Slide Tab Content

When tab is selected its content can appear without any animations. However, to improve user experience it's much better to add some animation effects like fading or sliding whenever tab is selected. In this article, you will learn how to use built-in animations in TabStrip component that allows you to fade or slide the tab content.

You will find sample code that shows how to fade or slide tab content when tab selection changes in JavaScript, Angular, React and Vue, in following sections below.

None Fade Slide
TabStrip component is part of IntegralUI Web
a suite of native Web Components for Angular, React and Vue

If you have any questions, don't hesitate to contact us at

As demo shows, you can choose whether tab will appear animated or not. There are two animations available: Fade and Slide.

You can find a sample code in JavaScript, Angular, React and Vue, in following sections below.

Different Tab Content Animations

To set an animation effect in TabStrip component you need to use the animation property. You can choose one of the following options available:

  • None - animations are not allowed
  • Fade - tab content appearance is accompanied with fade-in/fade-out effect
  • Slide - tab content appearance is accompanied with sliding left/right or up/down effect

If Slide animation is active, depending on tab placement the tab content is animated differently. When tabs are placed on top or bottom side, the content slides in left-right direction. However, when tabs are placed on left or right side the content slides in up-down direction.


Having animations during tab selection in TabStrip component improves overall user experience. To animate the appearance of tab content, you can choose from these two animations: Fade or Slide.

A sample code is available in JavaScript, Angular, React and Vue that shows how to animate tab selection by fading or sliding the tab content. The TabStrip is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.