{"id":71816,"date":"2020-01-10T17:00:53","date_gmt":"2020-01-10T11:30:53","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=71816"},"modified":"2024-04-12T14:22:44","modified_gmt":"2024-04-12T08:52:44","slug":"parallel-animation-groups","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/","title":{"rendered":"Parallel Animation Groups"},"content":{"rendered":"\n

Go back to Tutorial<\/a><\/p>\n\n\n

Parallel animations with different timings, implemented with groups<\/strong><\/p>\n

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

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.<\/p>\n

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:<\/p>\n

hero-list-groups.component.ts (excerpt)<\/u><\/p>\n

animations: [<\/p>\n

trigger(‘flyInOut’, [<\/p>\n

state(‘in’, style({width: 120, transform: ‘translateX(0)’, opacity: 1})),<\/p>\n

transition(‘void => *’, [<\/p>\n

style({width: 10, transform: ‘translateX(50px)’, opacity: 0}),<\/p>\n

group([<\/p>\n

animate(‘0.3s 0.1s ease’, style({<\/p>\n

transform: ‘translateX(0)’,<\/p>\n

width: 120<\/p>\n

})),<\/p>\n

animate(‘0.3s ease’, style({<\/p>\n

opacity: 1<\/p>\n

}))<\/p>\n

])<\/p>\n

]),<\/p>\n

transition(‘* => void’, [<\/p>\n

group([<\/p>\n

animate(‘0.3s ease’, style({<\/p>\n

transform: ‘translateX(50px)’,<\/p>\n

width: 10<\/p>\n

})),<\/p>\n

animate(‘0.3s 0.2s ease’, style({<\/p>\n

opacity: 0<\/p>\n

}))<\/p>\n

])<\/p>\n

])<\/p>\n

])<\/p>\n

]\n

One group animates the element transform and width; the other group animates the opacity.<\/p>\n\n\n

Go back to Tutorial<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[8294],"tags":[8373],"class_list":["post-71816","page","type-page","status-publish","hentry","category-angular-7","tag-parallel-animation-groups"],"acf":[],"yoast_head":"\nParallel Animation Groups - Tutorial<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Parallel Animation Groups - Tutorial\" \/>\n<meta property=\"og:description\" content=\"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...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/\" \/>\n<meta property=\"og:site_name\" content=\"Tutorial\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vskills.in\/\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-12T08:52:44+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/\",\"name\":\"Parallel Animation Groups - Tutorial\",\"isPartOf\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\"},\"datePublished\":\"2020-01-10T11:30:53+00:00\",\"dateModified\":\"2024-04-12T08:52:44+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Parallel Animation Groups\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#website\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"name\":\"Tutorial\",\"description\":\"Vskills - A initiative in elearning and certification\",\"publisher\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#organization\",\"name\":\"Vskills\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"contentUrl\":\"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg\",\"width\":73,\"height\":55,\"caption\":\"Vskills\"},\"image\":{\"@id\":\"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vskills.in\/\",\"https:\/\/x.com\/vskills_in\",\"https:\/\/www.linkedin.com\/company-beta\/1371554\/\",\"https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Parallel Animation Groups - Tutorial","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/","og_locale":"en_US","og_type":"article","og_title":"Parallel Animation Groups - Tutorial","og_description":"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...","og_url":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/","og_site_name":"Tutorial","article_publisher":"https:\/\/www.facebook.com\/vskills.in\/","article_modified_time":"2024-04-12T08:52:44+00:00","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/","name":"Parallel Animation Groups - Tutorial","isPartOf":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website"},"datePublished":"2020-01-10T11:30:53+00:00","dateModified":"2024-04-12T08:52:44+00:00","breadcrumb":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/parallel-animation-groups\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vskills.in\/certification\/tutorial\/"},{"@type":"ListItem","position":2,"name":"Parallel Animation Groups"}]},{"@type":"WebSite","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#website","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","name":"Tutorial","description":"Vskills - A initiative in elearning and certification","publisher":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vskills.in\/certification\/tutorial\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#organization","name":"Vskills","url":"https:\/\/www.vskills.in\/certification\/tutorial\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/","url":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","contentUrl":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-content\/uploads\/2017\/07\/vskills-min-logo.jpg","width":73,"height":55,"caption":"Vskills"},"image":{"@id":"https:\/\/www.vskills.in\/certification\/tutorial\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vskills.in\/","https:\/\/x.com\/vskills_in","https:\/\/www.linkedin.com\/company-beta\/1371554\/","https:\/\/www.youtube.com\/channel\/UCMWnscxPwRF_PqXo9B7q_Tw"]}]}},"_links":{"self":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71816","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/comments?post=71816"}],"version-history":[{"count":4,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71816\/revisions"}],"predecessor-version":[{"id":87897,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/pages\/71816\/revisions\/87897"}],"wp:attachment":[{"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/media?parent=71816"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/categories?post=71816"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vskills.in\/certification\/tutorial\/wp-json\/wp\/v2\/tags?post=71816"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}