Material Design Ripple Animation into Transition HTML Web

1

Hello StackOverFlowers!

I found this really awesome animation on jsfiddle.net and would really love to use it in my project.
I'f you follow the link the author, 'internoma', states that it can be used as a page transition if a little Ajax is added.

My question is: What Ajax code do I add in order to make this work?!

I'm extremely lost, any suggestions will be greatly appreciated.

If you happen to know how to make this working using Barba.js or smoothState.js that would be awesome also since those are to plugins I'd like to dive deeper in learning.

Thanks in advance!

Link: Material Design Ripple Transition

JavaScript:

$(document).ready(function() {var ripple_wrap = $('.ripple-wrap'),

  rippler = $('.ripple'),

  finish = false,

  monitor = function(el) {

    var computed = window.getComputedStyle(el, null),

        borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));

    if (!finish && borderwidth >= 1500) {

      el.style.WebkitAnimationPlayState = "paused";

      el.style.animationPlayState = "paused";

      swapContent();

    }

    if (finish) {

      el.style.WebkitAnimationPlayState = "running";

      el.style.animationPlayState = "running";

      return;

    } else {

      window.requestAnimationFrame(function() {monitor(el)});

    }

  };



  storedcontent = $('#content-2').html();

  $('#content-2').remove();



   rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd 

      mozAnimationEnd animationend", function(e){

      ripple_wrap.removeClass('goripple');

    });



    $('body').on('click', 'a', function(e) {

     rippler.css('left', e.clientX + 'px');

     rippler.css('top', e.clientY + 'px');

     e.preventDefault();

     finish = false;

     ripple_wrap.addClass('goripple');

     window.requestAnimationFrame(function() {monitor(rippler[0])});





   });







    function swapContent() {

  var newcontent = $('#content-area').html();

  $('#content-area').html(storedcontent);

  storedcontent = newcontent;

  // do some Ajax, put it in the DOM and then set this to true

  setTimeout(function() {

    finish = true;

  },10);

   }



 });

CSS

   .ripple-wrap {

     display: none;

     overflow: hidden;

     position: fixed;

     font-size: 0;

     z-index: 1000;

     top: 0; left: 0; right: 0; bottom: 0;

   }

   @-webkit-keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }



  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

 }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

   }

 }

  @keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     order-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

  }

 }

 .ripple {

     display: block;

     height: 0;

     width: 0;

     border-width: 0px;

     border-style: solid;

     border-color: #00796b;

     border-radius: 100%;

     position: absolute;

     top: 300px;

     left: 300px;

     -webkit-animation: none;

     animation: none;

 }

  .ripple-wrap.goripple {

     display: block;

 }

  .ripple-wrap.goripple .ripple {

     -webkit-animation-name: RIPPLER;

     -webkit-animation-duration: 1.5s;

     -webkit-animation-fill-mode: forwards;

     animation-name: RIPPLER;

     animation-duration: 1.5s;

     animation-fill-mode: forwards;



   }

HTML

     <div class="wrap" id="content-area">

     <h1>Material Design Ripple Transition</h1>

     <p>Just playing around to see if I can recreate the Material Design 

     ripple as a page transition in CSS. Click any <a href="#">link</a> in 

     this block of text to load another set of text. The <a 

     href="#">links</a> don't go anywhere yet. They are just <a 

     href="#">hooks</a> to allow you to click somewhere</p>



     <p>The style and animation is entirely CSS so it is smooth. JavaScript 

     is used to add classes at the right time. It also pauses to wait for the 

     content to be replaced, and calculates where to centre the hole. There 

     are two stages to the animation. When a <a href="#">link</a> is clicked 

     the border-width grows very large.</p>



      <p>That's enough reading on this slide. Click a <a href="#">link</a> to 

     load the second slide</p>





     </div>

     <div id="content-2" style="display:none">

     <h2>Slide Two</h2>

     <p>This is the second slide. If you want you can <a href="#">go back to 

     the first slide</a>. The second part of the animation is increasing the 

     size of the element itself in order to create a hole.</p>



      <p>This transition could be used for presentation slides. Using 

     pushState then this could be used as a transition between webpages.</p>





      </div>



      <div class="ripple-wrap"><div class="ripple"></div></div>

javascript css ajax smoothstate.js barbajs

share|improve this question

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

add a comment | 

1

Hello StackOverFlowers!

I found this really awesome animation on jsfiddle.net and would really love to use it in my project.
I'f you follow the link the author, 'internoma', states that it can be used as a page transition if a little Ajax is added.

My question is: What Ajax code do I add in order to make this work?!

I'm extremely lost, any suggestions will be greatly appreciated.

If you happen to know how to make this working using Barba.js or smoothState.js that would be awesome also since those are to plugins I'd like to dive deeper in learning.

Thanks in advance!

Link: Material Design Ripple Transition

JavaScript:

$(document).ready(function() {var ripple_wrap = $('.ripple-wrap'),

  rippler = $('.ripple'),

  finish = false,

  monitor = function(el) {

    var computed = window.getComputedStyle(el, null),

        borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));

    if (!finish && borderwidth >= 1500) {

      el.style.WebkitAnimationPlayState = "paused";

      el.style.animationPlayState = "paused";

      swapContent();

    }

    if (finish) {

      el.style.WebkitAnimationPlayState = "running";

      el.style.animationPlayState = "running";

      return;

    } else {

      window.requestAnimationFrame(function() {monitor(el)});

    }

  };



  storedcontent = $('#content-2').html();

  $('#content-2').remove();



   rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd 

      mozAnimationEnd animationend", function(e){

      ripple_wrap.removeClass('goripple');

    });



    $('body').on('click', 'a', function(e) {

     rippler.css('left', e.clientX + 'px');

     rippler.css('top', e.clientY + 'px');

     e.preventDefault();

     finish = false;

     ripple_wrap.addClass('goripple');

     window.requestAnimationFrame(function() {monitor(rippler[0])});





   });







    function swapContent() {

  var newcontent = $('#content-area').html();

  $('#content-area').html(storedcontent);

  storedcontent = newcontent;

  // do some Ajax, put it in the DOM and then set this to true

  setTimeout(function() {

    finish = true;

  },10);

   }



 });

CSS

   .ripple-wrap {

     display: none;

     overflow: hidden;

     position: fixed;

     font-size: 0;

     z-index: 1000;

     top: 0; left: 0; right: 0; bottom: 0;

   }

   @-webkit-keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }



  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

 }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

   }

 }

  @keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     order-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

  }

 }

 .ripple {

     display: block;

     height: 0;

     width: 0;

     border-width: 0px;

     border-style: solid;

     border-color: #00796b;

     border-radius: 100%;

     position: absolute;

     top: 300px;

     left: 300px;

     -webkit-animation: none;

     animation: none;

 }

  .ripple-wrap.goripple {

     display: block;

 }

  .ripple-wrap.goripple .ripple {

     -webkit-animation-name: RIPPLER;

     -webkit-animation-duration: 1.5s;

     -webkit-animation-fill-mode: forwards;

     animation-name: RIPPLER;

     animation-duration: 1.5s;

     animation-fill-mode: forwards;



   }

HTML

     <div class="wrap" id="content-area">

     <h1>Material Design Ripple Transition</h1>

     <p>Just playing around to see if I can recreate the Material Design 

     ripple as a page transition in CSS. Click any <a href="#">link</a> in 

     this block of text to load another set of text. The <a 

     href="#">links</a> don't go anywhere yet. They are just <a 

     href="#">hooks</a> to allow you to click somewhere</p>



     <p>The style and animation is entirely CSS so it is smooth. JavaScript 

     is used to add classes at the right time. It also pauses to wait for the 

     content to be replaced, and calculates where to centre the hole. There 

     are two stages to the animation. When a <a href="#">link</a> is clicked 

     the border-width grows very large.</p>



      <p>That's enough reading on this slide. Click a <a href="#">link</a> to 

     load the second slide</p>





     </div>

     <div id="content-2" style="display:none">

     <h2>Slide Two</h2>

     <p>This is the second slide. If you want you can <a href="#">go back to 

     the first slide</a>. The second part of the animation is increasing the 

     size of the element itself in order to create a hole.</p>



      <p>This transition could be used for presentation slides. Using 

     pushState then this could be used as a transition between webpages.</p>





      </div>



      <div class="ripple-wrap"><div class="ripple"></div></div>

javascript css ajax smoothstate.js barbajs

share|improve this question

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

add a comment | 

1

1

1

Hello StackOverFlowers!

I found this really awesome animation on jsfiddle.net and would really love to use it in my project.
I'f you follow the link the author, 'internoma', states that it can be used as a page transition if a little Ajax is added.

My question is: What Ajax code do I add in order to make this work?!

I'm extremely lost, any suggestions will be greatly appreciated.

If you happen to know how to make this working using Barba.js or smoothState.js that would be awesome also since those are to plugins I'd like to dive deeper in learning.

Thanks in advance!

Link: Material Design Ripple Transition

JavaScript:

$(document).ready(function() {var ripple_wrap = $('.ripple-wrap'),

  rippler = $('.ripple'),

  finish = false,

  monitor = function(el) {

    var computed = window.getComputedStyle(el, null),

        borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));

    if (!finish && borderwidth >= 1500) {

      el.style.WebkitAnimationPlayState = "paused";

      el.style.animationPlayState = "paused";

      swapContent();

    }

    if (finish) {

      el.style.WebkitAnimationPlayState = "running";

      el.style.animationPlayState = "running";

      return;

    } else {

      window.requestAnimationFrame(function() {monitor(el)});

    }

  };



  storedcontent = $('#content-2').html();

  $('#content-2').remove();



   rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd 

      mozAnimationEnd animationend", function(e){

      ripple_wrap.removeClass('goripple');

    });



    $('body').on('click', 'a', function(e) {

     rippler.css('left', e.clientX + 'px');

     rippler.css('top', e.clientY + 'px');

     e.preventDefault();

     finish = false;

     ripple_wrap.addClass('goripple');

     window.requestAnimationFrame(function() {monitor(rippler[0])});





   });







    function swapContent() {

  var newcontent = $('#content-area').html();

  $('#content-area').html(storedcontent);

  storedcontent = newcontent;

  // do some Ajax, put it in the DOM and then set this to true

  setTimeout(function() {

    finish = true;

  },10);

   }



 });

CSS

   .ripple-wrap {

     display: none;

     overflow: hidden;

     position: fixed;

     font-size: 0;

     z-index: 1000;

     top: 0; left: 0; right: 0; bottom: 0;

   }

   @-webkit-keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }



  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

 }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

   }

 }

  @keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     order-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

  }

 }

 .ripple {

     display: block;

     height: 0;

     width: 0;

     border-width: 0px;

     border-style: solid;

     border-color: #00796b;

     border-radius: 100%;

     position: absolute;

     top: 300px;

     left: 300px;

     -webkit-animation: none;

     animation: none;

 }

  .ripple-wrap.goripple {

     display: block;

 }

  .ripple-wrap.goripple .ripple {

     -webkit-animation-name: RIPPLER;

     -webkit-animation-duration: 1.5s;

     -webkit-animation-fill-mode: forwards;

     animation-name: RIPPLER;

     animation-duration: 1.5s;

     animation-fill-mode: forwards;



   }

HTML

     <div class="wrap" id="content-area">

     <h1>Material Design Ripple Transition</h1>

     <p>Just playing around to see if I can recreate the Material Design 

     ripple as a page transition in CSS. Click any <a href="#">link</a> in 

     this block of text to load another set of text. The <a 

     href="#">links</a> don't go anywhere yet. They are just <a 

     href="#">hooks</a> to allow you to click somewhere</p>



     <p>The style and animation is entirely CSS so it is smooth. JavaScript 

     is used to add classes at the right time. It also pauses to wait for the 

     content to be replaced, and calculates where to centre the hole. There 

     are two stages to the animation. When a <a href="#">link</a> is clicked 

     the border-width grows very large.</p>



      <p>That's enough reading on this slide. Click a <a href="#">link</a> to 

     load the second slide</p>





     </div>

     <div id="content-2" style="display:none">

     <h2>Slide Two</h2>

     <p>This is the second slide. If you want you can <a href="#">go back to 

     the first slide</a>. The second part of the animation is increasing the 

     size of the element itself in order to create a hole.</p>



      <p>This transition could be used for presentation slides. Using 

     pushState then this could be used as a transition between webpages.</p>





      </div>



      <div class="ripple-wrap"><div class="ripple"></div></div>

javascript css ajax smoothstate.js barbajs

share|improve this question

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

Hello StackOverFlowers!

I found this really awesome animation on jsfiddle.net and would really love to use it in my project.
I'f you follow the link the author, 'internoma', states that it can be used as a page transition if a little Ajax is added.

My question is: What Ajax code do I add in order to make this work?!

I'm extremely lost, any suggestions will be greatly appreciated.

If you happen to know how to make this working using Barba.js or smoothState.js that would be awesome also since those are to plugins I'd like to dive deeper in learning.

Thanks in advance!

Link: Material Design Ripple Transition

JavaScript:

$(document).ready(function() {var ripple_wrap = $('.ripple-wrap'),

  rippler = $('.ripple'),

  finish = false,

  monitor = function(el) {

    var computed = window.getComputedStyle(el, null),

        borderwidth = parseFloat(computed.getPropertyValue('border-left-width'));

    if (!finish && borderwidth >= 1500) {

      el.style.WebkitAnimationPlayState = "paused";

      el.style.animationPlayState = "paused";

      swapContent();

    }

    if (finish) {

      el.style.WebkitAnimationPlayState = "running";

      el.style.animationPlayState = "running";

      return;

    } else {

      window.requestAnimationFrame(function() {monitor(el)});

    }

  };



  storedcontent = $('#content-2').html();

  $('#content-2').remove();



   rippler.bind("webkitAnimationEnd oAnimationEnd msAnimationEnd 

      mozAnimationEnd animationend", function(e){

      ripple_wrap.removeClass('goripple');

    });



    $('body').on('click', 'a', function(e) {

     rippler.css('left', e.clientX + 'px');

     rippler.css('top', e.clientY + 'px');

     e.preventDefault();

     finish = false;

     ripple_wrap.addClass('goripple');

     window.requestAnimationFrame(function() {monitor(rippler[0])});





   });







    function swapContent() {

  var newcontent = $('#content-area').html();

  $('#content-area').html(storedcontent);

  storedcontent = newcontent;

  // do some Ajax, put it in the DOM and then set this to true

  setTimeout(function() {

    finish = true;

  },10);

   }



 });

CSS

   .ripple-wrap {

     display: none;

     overflow: hidden;

     position: fixed;

     font-size: 0;

     z-index: 1000;

     top: 0; left: 0; right: 0; bottom: 0;

   }

   @-webkit-keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }



  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

 }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

   }

 }

  @keyframes RIPPLER {

     0%   { border-width: 0; }

     40% { 

     height: 0;

     width: 0;

     order-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  41% { 

     height: 0;

     width: 0;

     border-width: 1500px;

     margin-top: -1500px;

     margin-left:-1500px; 

     border-color: #009688;

  }

  100% {

     border-width: 1500px;

     height: 2000px;

     width: 2000px;

     margin-top: -2500px;

     margin-left:-2500px;

     border-color: #009688;

  }

 }

 .ripple {

     display: block;

     height: 0;

     width: 0;

     border-width: 0px;

     border-style: solid;

     border-color: #00796b;

     border-radius: 100%;

     position: absolute;

     top: 300px;

     left: 300px;

     -webkit-animation: none;

     animation: none;

 }

  .ripple-wrap.goripple {

     display: block;

 }

  .ripple-wrap.goripple .ripple {

     -webkit-animation-name: RIPPLER;

     -webkit-animation-duration: 1.5s;

     -webkit-animation-fill-mode: forwards;

     animation-name: RIPPLER;

     animation-duration: 1.5s;

     animation-fill-mode: forwards;



   }

HTML

     <div class="wrap" id="content-area">

     <h1>Material Design Ripple Transition</h1>

     <p>Just playing around to see if I can recreate the Material Design 

     ripple as a page transition in CSS. Click any <a href="#">link</a> in 

     this block of text to load another set of text. The <a 

     href="#">links</a> don't go anywhere yet. They are just <a 

     href="#">hooks</a> to allow you to click somewhere</p>



     <p>The style and animation is entirely CSS so it is smooth. JavaScript 

     is used to add classes at the right time. It also pauses to wait for the 

     content to be replaced, and calculates where to centre the hole. There 

     are two stages to the animation. When a <a href="#">link</a> is clicked 

     the border-width grows very large.</p>



      <p>That's enough reading on this slide. Click a <a href="#">link</a> to 

     load the second slide</p>





     </div>

     <div id="content-2" style="display:none">

     <h2>Slide Two</h2>

     <p>This is the second slide. If you want you can <a href="#">go back to 

     the first slide</a>. The second part of the animation is increasing the 

     size of the element itself in order to create a hole.</p>



      <p>This transition could be used for presentation slides. Using 

     pushState then this could be used as a transition between webpages.</p>





      </div>



      <div class="ripple-wrap"><div class="ripple"></div></div>

javascript css ajax smoothstate.js barbajs

javascript css ajax smoothstate.js barbajs

share|improve this question

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

share|improve this question

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

share|improve this question

share|improve this question

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

asked Nov 19 '18 at 11:56

Nate MoodyFILMS

61

61

add a comment | 

add a comment | 

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374127%2fmaterial-design-ripple-animation-into-transition-html-web%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

active

oldest

votes

active

oldest

votes

active

oldest

votes

active

oldest

votes

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53374127%2fmaterial-design-ripple-animation-into-transition-html-web%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here