Morphing Buttons Concept

Great stuff. This reminds me of one of the UI improvements from iOS6 to iOS7. When opening a cluster of apps on the homescreen or an individual app, it also transitions nicely by zooming in. Transitions make the experience feel less disruptive, always the better option with regard to user experience (if performance and accessibility don’t suffer).
Anyway, keep up the good work.
K.

Great work! I have noticed a bit of an issue with this demo on a mobile platform, meaning an iPhone. It seems as though the sidebar settings effect makes it so that the iPhone’s normal smooth scrolling doesn’t happen anymore. Now, when I scroll, the page stops as soon as I remove my finger. This doesn’t happen with the other effects and I was wondering what may be causing this (some sort of an overlay?) and what can be done to fix it.

Thanks again!

WOW amazing work. I loved it. Can I use this one for my website? I always check your website cause I want to learn more. Keep on posting and inspiring us. God Bless!

Hello everybody,

I have a really stupid question:
How do i integrate these buttons into my website (self hosted wordpress). Especially the “Info Overlay” and “Sidebar Settings” I would like to try.

Would be really nice, if somebody could give a short explanation for a dummy like me. I’m stuck with this 🙁

Thanks a lot in advance!!

was trying to use the Login or Sighup buttons. there wasnt any problem in desktop. but in mobile device i cant close the form. nothing happens even i tap close icon on the top right. please help

Hi Lovely Demo.

Unfortunately even after using the modernizr.custom.js file via bundle config in Vis Studio, the modal has problems in IE 11 and earlier. The cursor cant seem to detect input fields for a login form I have placed in the modal content? Help anyone??

Hi,

I have the same question as Nick. Has anyone found a way to enable multiple buttons on the same page for demo 3 (info overlay button ) ?

Very nice piece of art! But I’m suffering to implement some jquery Scrollbar inside the morph-content.

I’m using the mCustomScrollbar, and i know i need to use this $(selector).mCustomScrollbar("update");, but i dont know where i need to put this to update my scroll inside the morph-content when opened. Can anyone help me?

On demo 1 and 2, how do I modify the js to post the form info to another page?

here is the joomla 3 modul integrated multi-pushmenu with 3d-transform and the morphing button for login/out – on github:
https://github.com/HyperKat/ws-navigator_0.5

You ‘ve been great inspiration.

About modals that contain buttons (submit, subscribe, etc.):
The modal can be closed automatically, right after the button is clicked or after 3 secs – assuming that a success/information message will be displayed in the meanwhile. We also want to keep the default functionality of Close-Icon.
To do so, go to uiMorphingButton.js and add some code to UIMorphingButton.prototype._initEvents function.
This is how it looks like mine..

CASE 1

UIMorphingButton.prototype._initEvents = function() {
var self = this;
// open
this.button.addEventListener(‘click’, function() {
self.toggle();
});

// close
if (this.options.closeEl !== ”) {
var closeEl = this.el.querySelector(this.options.closeEl);

if (closeEl) {
closeEl.addEventListener(‘click’, function() {
self.toggle();
});
}
}
//Here is the addition.
//If you have a submit button give it an id in the html code.
//like this:
//and the following code will make the modal close 2 secs after you click the button
var sbId = this.el.querySelector(‘#submit_button_id’);
if (sbId) {
sbId.addEventListener( ‘click’, function() {
setTimeout(function() {
self.toggle();
}, 2000);
} );
}
};

________________________________________________________

CASE 2

UIMorphingButton.prototype._initEvents = function() {
var self = this;
// open
this.button.addEventListener(‘click’, function() {
self.toggle();
});

// close
if (this.options.closeEl !== ”) {
var closeEl = this.el.querySelector(this.options.closeEl);

if (closeEl) {
closeEl.addEventListener(‘click’, function() {
self.toggle();
});
}
}
//Here is the addition.
//I have again a submit button, I will give it an id in the html code.
//like this:
//I also have an in-modal success message being displayed when the form submission is successful.
//The success message is written in a div that waits with diplay:none. When the form is submitted successfully, the div gets diplay:block.
//the div has id=”success”
//and the following code does: after the button is clicked, we take a look if the is displayed.
//If it is, then the modal will close automatically after 4 secs.
var sbId = this.el.querySelector(‘#submit_button_id’);
if (sbId) {
sbId.addEventListener( ‘click’, function() {
setTimeout(function() {
var isVisible = $(‘#success’).is(‘:visible’);
if (isVisible){self.toggle();}
}, 4000);
} );
}
};

Thanx!

Chris, as closing the direct modal in console?
Thanks Chris!