{"id":608,"date":"2015-09-08T15:12:55","date_gmt":"2015-09-08T15:12:55","guid":{"rendered":"https:\/\/ionic.io\/blog\/?p=608"},"modified":"2017-01-09T06:53:42","modified_gmt":"2017-01-09T06:53:42","slug":"animating-elements-in-your-ionic-app","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app","title":{"rendered":"Animating Elements in your Ionic App"},"content":{"rendered":"<p>In this screencast, I talk about how you can animate elements in your app in a performant way. Prefer to read the info? Check it out below.<\/p>\n<div class=\"video-container\">\n              <iframe data-src=\"https:\/\/www.youtube.com\/embed\/7PxcAlyA2BU\"frameborder=\"0\" allowfullscreen src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" data-load-mode=\"1\"><\/iframe>\n            <\/div>\n<p><!--more--><\/p>\n<p>In this example, we have a view with ten items in it, and we want to slide the items in from the left when we visit the page.<\/p>\n<p>Let&#8217;s create a keyframe animation and animate the left property.<\/p>\n<pre><code class=\"css\">@-webkit-keyframes slideIn {\n  0% {\n    left: -100%;\n  }\n  100% {\n    left: 0;\n  }\n}\n\n.slide-in{\n   -webkit-animation: slideIn ease-in 1; \n  animation: slideIn ease-in 1;\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-duration: 750ms;\n  animation-duration: 750ms;\n}\n\n<\/code><\/pre>\n<p>If you load up your app in a browser, the animation will look OK. But if you try this on a device, you&#8217;ll start to see the animation stutter. This is what we call jank.<\/p>\n<p>What\u2019s happening is that as you try to animate the left property of the items, the web view will have to go back and try to recalculate that item\u2019s position. This happens for a lot of CSS properties.<\/p>\n<p>Thankfully, we have other ways to animate these items.<\/p>\n<p>Let&#8217;s change that left property to transform and set the value to use translate3d. Translate3d is a special CSS value that will actually move the animation to the device\u2019s GPU. This is called hardware accelerated animation.<\/p>\n<pre><code class=\"css\">@-webkit-keyframes slideIn {\n  0% {\n    left: -100%;\n  }\n  100% {\n    left: 0;\n  }\n}\n\n@-webkit-keyframes slideInSmooth {\n  0% {\n    -webkit-transform: translate3d(-100%,0,0);\n  }\n  100% {\n    -webkit-transform: translate3d(0,0,0);\n  }\n}\n\n\n.slide-in{\n   -webkit-animation: slideInSmooth ease-in 1; \n  animation: slideInSmooth ease-in 1;\n  -webkit-animation-fill-mode: forwards;\n  animation-fill-mode: forwards;\n  -webkit-animation-duration: 750ms;\n  animation-duration: 750ms;\n}\n<\/code><\/pre>\n<p>Now, instead of having janky animation, we can get a smooth transition for all of our items.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this screencast, I talk about how you can animate elements in your app in a performant way. Prefer to read the info? Check it out below.<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-608","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Animating Elements in your Ionic App - Ionic Blog<\/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:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Animating Elements in your Ionic App\" \/>\n<meta property=\"og:description\" content=\"In this screencast, I talk about how you can animate elements in your app in a performant way. Prefer to read the info? Check it out below.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-08T15:12:55+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-01-09T06:53:42+00:00\" \/>\n<meta name=\"author\" content=\"Mike Hartington\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mhartington\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mike Hartington\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\"},\"author\":{\"name\":\"Mike Hartington\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\"},\"headline\":\"Animating Elements in your Ionic App\",\"datePublished\":\"2015-09-08T15:12:55+00:00\",\"dateModified\":\"2017-01-09T06:53:42+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\"},\"wordCount\":223,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\",\"url\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\",\"name\":\"Animating Elements in your Ionic App - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2015-09-08T15:12:55+00:00\",\"dateModified\":\"2017-01-09T06:53:42+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Animating Elements in your Ionic App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b\",\"name\":\"Mike Hartington\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png\",\"caption\":\"Mike Hartington\"},\"description\":\"Director of Developer Relations\",\"sameAs\":[\"https:\/\/twitter.com\/mhartington\",\"https:\/\/x.com\/mhartington\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/mike\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Animating Elements in your Ionic App - Ionic Blog","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:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app","og_locale":"en_US","og_type":"article","og_title":"Animating Elements in your Ionic App","og_description":"In this screencast, I talk about how you can animate elements in your app in a performant way. Prefer to read the info? Check it out below.","og_url":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app","og_site_name":"Ionic Blog","article_published_time":"2015-09-08T15:12:55+00:00","article_modified_time":"2017-01-09T06:53:42+00:00","author":"Mike Hartington","twitter_card":"summary_large_image","twitter_creator":"@mhartington","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Mike Hartington","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app"},"author":{"name":"Mike Hartington","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b"},"headline":"Animating Elements in your Ionic App","datePublished":"2015-09-08T15:12:55+00:00","dateModified":"2017-01-09T06:53:42+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app"},"wordCount":223,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app","url":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app","name":"Animating Elements in your Ionic App - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2015-09-08T15:12:55+00:00","dateModified":"2017-01-09T06:53:42+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/animating-elements-in-your-ionic-app#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Animating Elements in your Ionic App"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/c8c92b04d526adb925ea514c619a267b","name":"Mike Hartington","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/08\/mike-headshot-2-smaller-150x150.png","caption":"Mike Hartington"},"description":"Director of Developer Relations","sameAs":["https:\/\/twitter.com\/mhartington","https:\/\/x.com\/mhartington"],"url":"https:\/\/ionic.io\/blog\/author\/mike"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/608","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=608"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/608\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=608"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=608"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=608"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}