{"id":10123,"date":"2024-01-10T18:17:00","date_gmt":"2024-01-10T18:17:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10123"},"modified":"2024-01-22T16:17:57","modified_gmt":"2024-01-22T11:17:57","slug":"material-design-interface-transition-effect","status":"publish","type":"post","link":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/","title":{"rendered":"Material Design Interface Transition Effect"},"content":{"rendered":"

This code creates a Material Design Interface Transition Effect. It manipulates CSS for visual transitions. The JavaScript triggers the effect with a click. This effect can enhance interface interactions.<\/p>\n

How to Create Material Design Interface Transition Effect<\/h2>\n

1. First of all, load the Google Fonts and Reset CSS<\/a> by adding the following CDN links into the head tag of your HTML document.<\/p>\n

<link href=\"https:\/\/fonts.googleapis.com\/css?family=RobotoDraft:300,400\" rel=\"stylesheet\">\r\n<link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/meyer-reset\/2.0\/reset.min.css\">\r\n<\/pre>\n
2. Ensure your HTML has the necessary structure for the transition to occur. Include a container with the class container-view<\/code> and an element with the id view-1<\/code>, as demonstrated in the code.<\/p>\n
<body>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t <div class=\"container-view\"> \r\n\t\t\t \r\n\t\t\t \r\n\t\t\t\t\t<span id=\"view-1\" class=\"button-circ c-1\"> <i> <\/i> <\/span>\r\n\t\t\t        \r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t\r\n\t\t\t\t\t<div class=\"main-view\"> \r\n\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t<ul class=\"list-tabs\">   \r\n\t\t\t\t\t\t\t\t<li>  <h2> Work <\/h2> \r\n\t\t\t\t\t\t\t\t\t  <h3> Oct 9, 2014  <\/h3> \r\n\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t\t\t\t\t\t\t<li>  <h2> Photos <\/h2> \r\n\t\t\t\t\t\t\t\t\t  <h3> Oct 13, 2014 <\/h3> \r\n\t\t\t\t\t\t\t\t\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t\t\t\t\t\t\t<li>  \t<h2> Tasks<\/h2> \r\n\t\t\t\t\t\t\t\t\t\t<h3>Oct 18, 2014 <\/h3> \r\n\r\n\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\t\t\t\t\t\t\t\t<li> \t <h2>Notes<\/h2>\r\n\t\t\t\t\t\t\t\t\t\t<h3> Oct 23, 2014 <\/h3> \r\n\r\n\t\t\t\t\t\t\t\t<\/li>\r\n\r\n\t\t\t\t\t\t\t<\/ul> \r\n\t\t\t\t\t\r\n\t\t\t\t\t <\/div>\r\n\t\t\t \r\n\t\t\t \r\n\t\t\t <\/div>\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n\t\t\t\r\n    <\/body>\r\n<\/pre>\n
3. Now, add the following CSS between <style> tag or external CSS file to style the basic interface for transition effect. You can modify the CSS code according to your needs.<\/p>\n
html {\r\n  height: 100%;\r\n}\r\n\r\nbody{\r\n  background: #eee important;\r\n  min-height: 740px;\r\n  height: 100%;\r\n  font-family: \"RobotoDraft\", sans-serif;\r\n  font-weight: 400;\r\n  overflow: hidden;\r\n  position: relative;\r\n}\r\n\r\n*,\r\n*:before,\r\n*:after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n.container-view {\r\n  position: relative;\r\n  background: #fff;\r\n  height: 500px;\r\n  width: 600px;\r\n  margin: 0 auto;\r\n  margin-top: -250px;\r\n  top: 50%;\r\n}\r\n\r\n.button-circ {\r\n  background: #2196F3;\r\n  color: #fff;\r\n  text-align: center;\r\n  font-size: 1.500em;\r\n  line-height: 60px;\r\n  cursor: pointer;\r\n  z-index: 500;\r\n  position: absolute;\r\n  width: 60px;\r\n  height: 60px;\r\n  border-radius: 50%;\r\n  left: 50%;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n.button-circ i:before {\r\n  content: '+';\r\n  display: inline-block;\r\n  color: #fff;\r\n  z-index: 500;\r\n}\r\n\r\n.container-view.view_1 span.button-circ i:before {\r\n  transform: rotate(45deg);\r\n  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  transition-delay: 0.6s;\r\n}\r\n\r\n.main-view {\r\n  background: #FF5252;\r\n  z-index: 200;\r\n  position: absolute;\r\n  width: 3px;\r\n  height: 3px;\r\n  left: 50%;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n.container-view.view_1 .main-view {\r\n  width: 100%;\r\n  height: 100%;\r\n  transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);\r\n}\r\n\r\n.container-view.view_1 #view-1 {\r\n  left: 100%;\r\n  top: 10%;\r\n  transform: translate(-136%, -50%);\r\n  transition: all 700ms cubic-bezier(0.66, -0.2, 0.425, 0.945);\r\n  \/* custom *\/\r\n}\r\n\r\nul.list-tabs {\r\n  visibility: hidden;\r\n  background: #fff;\r\n  z-index: 300;\r\n}\r\n\r\nul.list-tabs li {\r\n  visibility: hidden;\r\n  display: block;\r\n  font-size: 1.063em;\r\n  line-height: 1;\r\n  \/*transform*\/\r\n  transform: translate3D(0, 160px, 0);\r\n}\r\n\r\n.container-view ul.list-tabs {\r\n  height: 0%;\r\n}\r\n\r\n.container-view.view_1 ul.list-tabs {\r\n  height: 75%;\r\n  visibility: visible;\r\n  transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  \/* easeOutQuint *\/\r\n  \/* Safari *\/\r\n  transition-delay: 0.1s;\r\n}\r\n\r\n.container-view.view_1 ul.list-tabs li {\r\n  visibility: visible;\r\n  padding: 1.4em;\r\n  position: relative;\r\n  width: 100%;\r\n  background: #fff;\r\n  min-height: 80px;\r\n  \/*transform*\/\r\n  transform: translate3D(0px, 0, 0);\r\n  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  \/* easeOutQuint *\/\r\n  \/* Safari *\/\r\n  transition-delay: 0.5s;\r\n}\r\n\r\n.container-view ul.list-tabs li:before {\r\n  content: '';\r\n  display: block;\r\n  position: absolute;\r\n  border-radius: 50%;\r\n  margin-left: -3px;\r\n  width: 50px;\r\n  height: 50px;\r\n  background: #eee;\r\n}\r\n\r\n.container-view ul.list-tabs li h2, h3 {\r\n  padding: 0 4em;\r\n  line-height: 1.4;\r\n}\r\n\r\n.container-view ul.list-tabs li h3 {\r\n  font-size: 0.938em;\r\n  padding: 0 4.2em;\r\n  color: grey;\r\n}\r\n\r\n.container-view.view_1 ul.list-tabs li:nth-child(2) {\r\n  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  \/* easeOutQuint *\/\r\n  \/* Safari *\/\r\n  transition-delay: 0.5s;\r\n}\r\n\r\n.container-view.view_1 ul.list-tabs li:nth-child(3) {\r\n  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  \/* easeOutQuint *\/\r\n  \/* Safari *\/\r\n  transition-delay: 0.5s;\r\n}\r\n\r\n.container-view.view_1 ul.list-tabs li:nth-child(3) {\r\n  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  \/* easeOutQuint *\/\r\n  \/* Safari *\/\r\n  transition-delay: 0.5s;\r\n}\r\n\r\n.container-view.view_1 ul.list-tabs li:nth-child(4) {\r\n  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);\r\n  \/* easeOutQuint *\/\r\n  \/* Safari *\/\r\n  transition-delay: 0.5s;\r\n}<\/pre>\n
4. Load the jQuery<\/a> by adding the following CDN link before closing the body tag:<\/p>\n
<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery\/2.1.3\/jquery.min.js'><\/script><\/pre>\n
5. Finally, add the following JavaScript function. You can trigger the interface transition effect by clicking on the element with the id view-1<\/code>. Customize the content inside this element to suit your application.<\/p>\n
$('#view-1' ).bind( 'click', function(e) {\r\n\r\n\t\t$( this ).toggleClass( 'active' );\r\n\t\te.preventDefault();\r\n\t\t\r\n\t\t\r\n\t\t$( '.container-view' ).toggleClass( 'view_1' );\r\n\t\t\r\n\t\t\r\n\r\n});<\/pre>\n
Feel free to customize the CSS properties within the code to match your project’s design. You can also expand the functionality by adding more views or modifying the transition effects according to your preferences.<\/p>\n
That’s all! hopefully, you have successfully created the interface transition effect on your webpage. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code creates a Material Design Interface Transition Effect. It manipulates CSS for visual transitions. The JavaScript triggers the effect…<\/p>\n","protected":false},"author":1,"featured_media":10143,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[242],"tags":[],"class_list":["post-10123","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-material-design"],"acf":[],"yoast_head":"\nMaterial Design Interface Transition Effect — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Material Design Interface Transition Effect. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Material Design Interface Transition Effect — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Material Design Interface Transition Effect. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-10T18:17:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:17:57+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Material Design Interface Transition Effect\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:17:57+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\"},\"wordCount\":234,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png\",\"articleSection\":[\"Material Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\",\"url\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\",\"name\":\"Material Design Interface Transition Effect — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png\",\"datePublished\":\"2024-01-10T18:17:00+00:00\",\"dateModified\":\"2024-01-22T11:17:57+00:00\",\"description\":\"Here is a free code snippet to create a Material Design Interface Transition Effect. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png\",\"width\":1280,\"height\":960,\"caption\":\"Material Design Interface Transition Effect\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Material Design\",\"item\":\"https:\/\/codehim.com\/category\/material-design\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Material Design Interface Transition Effect\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Material Design Interface Transition Effect — CodeHim","description":"Here is a free code snippet to create a Material Design Interface Transition Effect. You can view demo and download the source code.","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:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/","og_locale":"en_US","og_type":"article","og_title":"Material Design Interface Transition Effect — CodeHim","og_description":"Here is a free code snippet to create a Material Design Interface Transition Effect. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-10T18:17:00+00:00","article_modified_time":"2024-01-22T11:17:57+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Material Design Interface Transition Effect","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:17:57+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/"},"wordCount":234,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png","articleSection":["Material Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/","url":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/","name":"Material Design Interface Transition Effect — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png","datePublished":"2024-01-10T18:17:00+00:00","dateModified":"2024-01-22T11:17:57+00:00","description":"Here is a free code snippet to create a Material Design Interface Transition Effect. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Material-Design-Interface-Transition-Effect.png","width":1280,"height":960,"caption":"Material Design Interface Transition Effect"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/material-design\/material-design-interface-transition-effect\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Material Design","item":"https:\/\/codehim.com\/category\/material-design\/"},{"@type":"ListItem","position":3,"name":"Material Design Interface Transition Effect"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3099,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10123","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10123"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10123\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10143"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10123"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10123"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10123"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}