I have a very specific trick I’m trying to perform in JavaScript, and I’m sure there are libraries out there that will allow me to do this, but my searching for a precise solution has failed so far.
I have a web page that has a “Login” button in the top right corner of the screen. When the user clicks the button, I will display a CSS modal dialog box on the center of the screen that allows the user to type in their authentication information. The CSS dialog box is all set, there’s just one piece missing:
I want to add an animation when the user clicks on the login button that shows the modal box “opening” from the Login button to the center of the screen to help draw the user’s eye to where it is supposed to go next. The animation should feel similar to when a window is minimized to/unminimized from the Windows taskbar.
Can anyone point me to a JavaScript library that has this functionality? Thanks so much!
Here’s my attempt :-p http://jsfiddle.net/zAzqB/
Utilizes jQuery and the jQuery Easing library (just to make the effect smoother… the easing library can be left out and it will still work fine). The element that should be animated is cloned while the animation happens, and the original is moved into a clipping element that animates to the final position.