Base solution for your next web application
Open Closed

Disable Click Animation Effect #481


User avatar
0
ideutsch created

Quick question: by default, there is a square animation effect that appears sometimes when the user clicks on elements. It seems to be some sort of material design feature. Is there an easy way to disable this animation?

Thanks.


2 Answer(s)
  • User Avatar
    0
    hikalkan created
    Support Team

    Hi,

    Yes, it's material design feature. When I check metronic.js, there is such a code:

    if ($('body').hasClass('page-md')) { 
                // Material design click effect
                // credit where credit's due; http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design       
                var element, circle, d, x, y;
                $('body').on('click', 'a.btn, button.btn, input.btn, label.btn', function(e) { 
                    element = $(this);
          
                    if(element.find(".md-click-circle").length == 0) {
                        element.prepend("<span class='md-click-circle'></span>");
                    }
                        
                    circle = element.find(".md-click-circle");
                    circle.removeClass("md-click-animate");
                    
                    if(!circle.height() && !circle.width()) {
                        d = Math.max(element.outerWidth(), element.outerHeight());
                        circle.css({height: d, width: d});
                    }
                    
                    x = e.pageX - element.offset().left - circle.width()/2;
                    y = e.pageY - element.offset().top - circle.height()/2;
                    
                    circle.css({top: y+'px', left: x+'px'}).addClass("md-click-animate");
    
                    setTimeout(function() {
                        circle.remove();      
                    }, 1000);
                });
            }
    

    Probably this feature is disabled when you delete this code. If not, you can ask the question on Metronic's forum since this is related to Metronic UI: <a class="postlink" href="http://keenthemes.com/forums/">http://keenthemes.com/forums/</a>

    Thanks.

  • User Avatar
    0
    ideutsch created

    Thanks, that worked.