Parallel Animation Groups

Go back to Tutorial

Parallel animations with different timings, implemented with groups

You’ve seen how to animate multiple style properties at the same time: just put all of them into the same style() definition.

But you may also want to configure different timings for animations that happen in parallel. For example, you may want to animate two CSS properties but use a different easing function for each one.

For this you can use animation groups. In this example, using groups both on enter and leave allows for two different timing configurations. Both are applied to the same element in parallel, but run independently of each other:

hero-list-groups.component.ts (excerpt)

animations: [

trigger(‘flyInOut’, [

state(‘in’, style({width: 120, transform: ‘translateX(0)’, opacity: 1})),

transition(‘void => *’, [

style({width: 10, transform: ‘translateX(50px)’, opacity: 0}),

group([

animate(‘0.3s 0.1s ease’, style({

transform: ‘translateX(0)’,

width: 120

})),

animate(‘0.3s ease’, style({

opacity: 1

}))

])

]),

transition(‘* => void’, [

group([

animate(‘0.3s ease’, style({

transform: ‘translateX(50px)’,

width: 10

})),

animate(‘0.3s 0.2s ease’, style({

opacity: 0

}))

])

])

])

]

One group animates the element transform and width; the other group animates the opacity.

Go back to Tutorial