123
user profile image

Created a login form with an SVG avatar that responds to the input in the email field. Used the GSAP TweenMax library + GSAP's MorphSVG plugin for the animating.

Here's what I changed/fixed/added in v2:

-Added "show/hide" password functionality. This is a nice user experience improvement, as a lot of users, especially on mobile, prefer to see their password as they type it due to the rate at which we mistype on our mobile devices. The password is displayed by default on mobile, and hidden by default on desktop.

-Added a random eye blink

-Added secondary animation of the shoulders when the avatar raises its arms.

-Fixed a bug where the arms would appear in front of the face for a split second when the page first loads

-Fixed a bug where entering a really long email address would mess up where the avatar would look

-Fixed a bug where pasting text into the email input wouldn't update where the avatar looked

-Fixed a bug that caused the avatar to look in the wrong place when going from the password field back to the email field

-Fixed a bug in Safari where one of the arms rotated incorrectly

-Fixed a bug where the avatar's chin would flip upside down sometimes

-Fixed a bug where changing browser tabs or windows then coming back would screw up the avatar's animation

-Fixed a bug in Safari where the border around the avatar got distorted when the arms animated

-Fixed a bug where clicking on an input's label while that input already had focus would trigger the blur animations

-Implemented a fix for Chrome/Firefox that didn't allow the position of the text cursor to be calculated within an input type of "email", only an input type of "text". So now the user will get the proper "email" keyboard displayed on a mobile device when they click into that field.

-Fixed a bug where clicking and holding the show/hide checkbox would cause the hands to drop down

This Pen is a fork, but the parent Pen is now private.

Comments

  1. harika olmuş :)

  2. So Funny and Creative

  3. This is awesome. Best pen ever

  4. Too good! is it OpenSource..?? i mean can i use it..??

  5. Can I use this if I credit you? It's absolutely amazing

  6. @ruffi0 I'd prefer you didn't, as I make my living from people hiring me to do projects like this. Happy to discuss partnering on a project or licensing it to you.

  7. Here are the tips of management for the password because you never ignore the security intention in the computer remember passwords in microsoft edge here are given the lots of basic tips which used in the operations. Thanks a lot

  8. I want this on my WordPress login page - how can I do this? Let me know!

  9. Amazing great work i would like to incorporate it into one of my project

  10. Hi can someone make a login plugin for wordpress with his help? please ;-)

  11. Good job. I used your code my site of epimedyumlu macun Thanks.

  12. I've never seen a better sign in experience in my life.

  13. Can i get a source code sir ??

  14. Good Work, I Appreciate it

  15. This delete command provide you option for the how your brower will work and when you want how to delete search history bing to see it with the manage of your history it will will be simple for you to understand.

  16. @dsenneff Neatly done!

    I wish there was an animation for when an email or password format is incorrect and animation when field limit runs out.

  17. can you make some think like this for my web site ?! if yes please send inbox me on my adresse : ariba.nadir@yahoo.com

  18. Cool. Awesome...

  19. Inspirational Project to animate SVGs.

  20. Impressive work

  21. Hello, nice job!!, licensing it to me, how much? :)

  22. This is awesome. Have you heard of using Adobe After Effects to create SVG animations using the BodyMovin Plugin? Just curious if you knew if I could create a similar set of svg animations with that software rather than using math to figure it out :)

  23. Very interesting.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...