Material Design Interface Transition Effect

Material Design Interface Transition Effect
Code Snippet:Interface Transition
Author: Morris Re.
Published: January 10, 2024
Last Updated: January 22, 2024
Downloads: 2,797
License: MIT
Edit Code online: View on CodePen
Read More

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.

How to Create Material Design Interface Transition Effect

1. First of all, load the Google Fonts and Reset CSS by adding the following CDN links into the head tag of your HTML document.

<link href="https://fonts.googleapis.com/css?family=RobotoDraft:300,400" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

2. Ensure your HTML has the necessary structure for the transition to occur. Include a container with the class container-view and an element with the id view-1, as demonstrated in the code.

<body>
			
			
			 <div class="container-view"> 
			 
			 
					<span id="view-1" class="button-circ c-1"> <i> </i> </span>
			        
					
					
					
					<div class="main-view"> 
							
							<ul class="list-tabs">   
								<li>  <h2> Work </h2> 
									  <h3> Oct 9, 2014  </h3> 

								</li>
								<li>  <h2> Photos </h2> 
									  <h3> Oct 13, 2014 </h3> 
								
								</li>
								<li>  	<h2> Tasks</h2> 
										<h3>Oct 18, 2014 </h3> 


								</li>
								<li> 	 <h2>Notes</h2>
										<h3> Oct 23, 2014 </h3> 

								</li>

							</ul> 
					
					 </div>
			 
			 
			 </div>
			
			
			
			
			
    </body>

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.

html {
  height: 100%;
}

body{
  background: #eee important;
  min-height: 740px;
  height: 100%;
  font-family: "RobotoDraft", sans-serif;
  font-weight: 400;
  overflow: hidden;
  position: relative;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.container-view {
  position: relative;
  background: #fff;
  height: 500px;
  width: 600px;
  margin: 0 auto;
  margin-top: -250px;
  top: 50%;
}

.button-circ {
  background: #2196F3;
  color: #fff;
  text-align: center;
  font-size: 1.500em;
  line-height: 60px;
  cursor: pointer;
  z-index: 500;
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
}

.button-circ i:before {
  content: '+';
  display: inline-block;
  color: #fff;
  z-index: 500;
}

.container-view.view_1 span.button-circ i:before {
  transform: rotate(45deg);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
  transition-delay: 0.6s;
}

.main-view {
  background: #FF5252;
  z-index: 200;
  position: absolute;
  width: 3px;
  height: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: all 400ms cubic-bezier(0.23, 1, 0.32, 1);
}

.container-view.view_1 .main-view {
  width: 100%;
  height: 100%;
  transition: all 800ms cubic-bezier(0.23, 1, 0.32, 1);
}

.container-view.view_1 #view-1 {
  left: 100%;
  top: 10%;
  transform: translate(-136%, -50%);
  transition: all 700ms cubic-bezier(0.66, -0.2, 0.425, 0.945);
  /* custom */
}

ul.list-tabs {
  visibility: hidden;
  background: #fff;
  z-index: 300;
}

ul.list-tabs li {
  visibility: hidden;
  display: block;
  font-size: 1.063em;
  line-height: 1;
  /*transform*/
  transform: translate3D(0, 160px, 0);
}

.container-view ul.list-tabs {
  height: 0%;
}

.container-view.view_1 ul.list-tabs {
  height: 75%;
  visibility: visible;
  transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
  /* easeOutQuint */
  /* Safari */
  transition-delay: 0.1s;
}

.container-view.view_1 ul.list-tabs li {
  visibility: visible;
  padding: 1.4em;
  position: relative;
  width: 100%;
  background: #fff;
  min-height: 80px;
  /*transform*/
  transform: translate3D(0px, 0, 0);
  transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1);
  /* easeOutQuint */
  /* Safari */
  transition-delay: 0.5s;
}

.container-view ul.list-tabs li:before {
  content: '';
  display: block;
  position: absolute;
  border-radius: 50%;
  margin-left: -3px;
  width: 50px;
  height: 50px;
  background: #eee;
}

.container-view ul.list-tabs li h2, h3 {
  padding: 0 4em;
  line-height: 1.4;
}

.container-view ul.list-tabs li h3 {
  font-size: 0.938em;
  padding: 0 4.2em;
  color: grey;
}

.container-view.view_1 ul.list-tabs li:nth-child(2) {
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  /* easeOutQuint */
  /* Safari */
  transition-delay: 0.5s;
}

.container-view.view_1 ul.list-tabs li:nth-child(3) {
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  /* easeOutQuint */
  /* Safari */
  transition-delay: 0.5s;
}

.container-view.view_1 ul.list-tabs li:nth-child(3) {
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  /* easeOutQuint */
  /* Safari */
  transition-delay: 0.5s;
}

.container-view.view_1 ul.list-tabs li:nth-child(4) {
  transition: all 600ms cubic-bezier(0.23, 1, 0.32, 1);
  /* easeOutQuint */
  /* Safari */
  transition-delay: 0.5s;
}

4. Load the jQuery by adding the following CDN link before closing the body tag:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

5. Finally, add the following JavaScript function. You can trigger the interface transition effect by clicking on the element with the id view-1. Customize the content inside this element to suit your application.

$('#view-1' ).bind( 'click', function(e) {

		$( this ).toggleClass( 'active' );
		e.preventDefault();
		
		
		$( '.container-view' ).toggleClass( 'view_1' );
		
		

});

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.

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.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...