Taiga UI 5.0 is out!

Animated CDK

Examples Setup GitHub

TuiAnimated allows adding animation to DOM elements in the same way as Angular's animate attribute but supported in Angular 19.

In case the user's operating system has reduced motion settings turned on, Taiga UI will honor this, disabling animations under its control, and TuiAnimated will not play animations.

To override this behavior, use TUI_REDUCED_MOTION injection token. However, this is not the recommended approach, as the user's system preferences would be ignored.

Usage 

    
      
    

      
      
    

  
    
      <button
    appearance="outline"
    tuiButton
    type="button"
    class="button"
    (click)="isOpen = !isOpen"
>
    {{ isOpen ? 'Hide me' : 'Show opening crawl' }}
</button>

@if (isOpen) {
    <div
        tuiAnimated
        class="container"
    >
        A long time ago in a galaxy far, far away....
    </div>
}

    

      
      
    

  
    
      @width: 15rem;

.button {
    inline-size: @width;
    border-radius: 1rem 1rem 0 0;
}

.container {
    block-size: 6rem;
    inline-size: @width;
    overflow: hidden;
    background: #222;
    color: var(--tui-status-warning);

    &.tui-enter,
    &.tui-leave {
        animation-name: tuiFade, tuiScale;
    }
}
GitHub StackBlitz