Animations

    Ignite UI for Angular includes over 100+ pre-built animations specially designed for a better user experience.

    Sass Animations

    Keyframes Mixin

    The Ignite UI for Angular keyframes mixin is used to register new keyframes animations. The mixin takes the name of a keyframes animation as a parameter and adds it to the global keyframe register list. In that way, the keyframes will not be duplicated in the exported CSS when including the same keyframes animation several times.

    For instance, doing this:

    @include fade-in();
@include fade-in();

    Will result in only one @keyframes rule added to the produced CSS:

    @keyframes fade-in { ... }

    Keyframes selectors for the animation steps along with CSS styles for the keyframes are defined inside the body of the mixin.

    Here's an example of creating a new animation mixin that can be used with our animation mixin.

    @mixin fade-in-bottom {
    @include keyframes(fade-in-bottom) {
        0% {
            transform: translateY(50px);
            opacity: 0;
        }

        100% {
            transform: translateY(0);
            opacity: 1;
        }
    }
}

    Animation Mixin

    The animation mixin serves as a vessel for animating elements using a list of animation properties passed as parameters. Users can specify animation properties like name, duration, delay, direction, iteration count, etc. Multiple keyframe animations can be passed to the animation mixin.

    //include the 'fade-in-top' keyframes animation mixin
@include fade-in-top();

//include the animation mixin with parameters
.my-class {
    @include animation('fade-in-top' 3s $ease-out-quad infinite);
}

    Timing Functions

    We include a list of pre-baked timing functions to use with our keyframes mixins. Read the documentation to find the full list of timing functions.

    Angular Animations

    Apart from Sass keyframes and animations mixin, we also include pre-defined Angular animations.

    Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. Download it for free.

    Usage

    The Ignite UI for Angular animations are grouped into 8 categories depending on their visual effects - fade, flip, grow, miscellaneous, rotate, scale, slide, and swing. Every group accepts a different set of parameters, allowing you to modify the behavior of any of the included animations. Each animation is an AnimationReferenceMetadata object as produced by the animation function provided by Angular.

    If parameters are attached, they act as default values. When an animation is invoked via the useAnimation function, then parameter values are allowed to be passed in directly. If any of the passed in parameter values are missing, then the default values will be used.

    import { transition, trigger, useAnimation } from '@angular/animations';
import { fadeIn, fadeOut } from "igniteui-angular/animations/main";

animations: [
    trigger('fadeInOut', [
            transition('void => *', [
                useAnimation(fadeIn, {
                    params: {
                        duration: '.35s',
                        easing: 'ease-out'
                    }
                })
            ]),
            transition('* => void', [
                useAnimation(fadeOut, {
                    params: {
                        duration: '.2s',
                        easing: 'ease-out'
                    }
                })
            ])
        ])
]

    Timing Functions

    Ignite UI for Angular includes a set of timing functions that can be used to ease in or out an animation. There are three main timing function groups - EaseIn, EaseOut, and EaseInOut, each containing the following timings:

    • quad
    • cubic
    • quart
    • quint
    • sine
    • expo
    • circ
    • back

    To use a specific timing function, import it first:

    import { EaseOut } from "igniteui-angular/animations/easings";

    and then use it as value for the easing param in any animation:

    useAnimation(fadeIn, {
    params: {
        easing: EaseOut.back
    }
});

    API References

    Additional Resources

    Our community is active and always welcoming to new ideas.