🦊 Smoothly Animated Sign-up Form [Redesign] + [react-hook-form] 🦊
Design comparison
Solution retrospective
You can find MY ANIMATION TUTORIAL HERE
🔥 Another challenge with my own custom design on top the original fem design.
- Landing Page Animation done in gsap.
- Changing Words Animation done in vanilla JS.
- Error Animations done in framer-motion (due to exit animations)
- Input Field Animations done in vanilla CSS.
For optimum animation experience, recommended viewing dimensions: 1440x800
- I've built the form using react-hook-form for functions and yup for validation.
- Modal component built by using Dialog component by headlessui
- The placeholder text for terms of services generated by ChatGPT (who would have written all that text anw :) )
It is also responsive for mobile.
And finally with this submission, i've officially completed all newbie challenges 🔥
Community feedback
- @billccrPosted over 1 year ago
Very inspiring to see what you've done with this 'newbie' challenge. Quite a beautiful presentation.
For image compression, conversion, and resizing, you might also want to take a look at Squoosh App. It's a web app that's super intuitive, fast, and works offline (no uploading of assets required). Jad Joubran (of Learn JS Online) does a great analysis video of it.
Marked as helpful0@visualdennissPosted over 1 year ago@billccr Hey, thanks a lot for your input. The resource you shared seems quite useful, i'll be using that in the future. Thanks again and happy coding!
0@billccrPosted over 1 year ago@visualdenniss Hope you find it useful. I've been using it myself, and find it does everything I need, quite nicely. Cheers.
1 - @zsoltvarjuPosted over 1 year ago
Hello Dennis!
I really love your take on this project in fact I love it much more than the original design. I am just a beginner so i cant really give you any kind of constructive criticism about your code, but i would like to let you know that as i tried your live preview and used the built in autofill function in chrome for the inputs the background color of the input changes to #e8f0fe and hides its corresponding label.
Keep up the great work!
P.S.: sorry if my comment is hard to understand i tried my best trying to explain it! :)
Marked as helpful0@visualdennissPosted over 1 year ago@zsoltvarju Hey Zsolt,
thanks a lot for your helpful feedback! This sounds like a strange bug caused by Chrome..In the code i had set autocomplete="off" already so it should not be showing autocomplete option in the first place to you. At least it does not show it to me. But when i temporarily turn it on, indeed there is that issue with background, where chrome forces its default styling maybe. When i continue to type, that white bg returns to normal as well. I've tried various thing but i don't know how to fix at the moment. I also don't understand why it is showing you autocomplete options when it is already disabled.
0@zsoltvarjuPosted over 1 year ago@visualdenniss
i digged a little bit deeper into this, It appears that Chrome ignores autocomplete="off" if you have an account saved in chrome ( settings -> Autofill ). If i delete my saved accounts then the autofill property works as it should. Found a solution for it tough:
- changed the type in the inputs from text to search this way google's autofill was turned off too.
Here are some pictures: [imgur link] (https://imgur.com/a/yLyQw5f)
1@visualdennissPosted over 1 year ago@zsoltvarju Thanks a lot for your efforts!
That feature of Chrome i was not aware of. Learnt something new :)
I don't think changing its semantic meaning is a good idea. It would mess up with other/more important stuff. So i'll just leave it as it is now since it is a very minor issue, maybe in the future i can come up with an effective solution.
0 - @MelvinAguilarPosted over 1 year ago
Hello there 👋. Good job on completing the challenge !
Your solution is quite elegant and the animations are very smooth. However, i found a problem with your page. The images should not be too heavy; 5.07MB is too much for a single image. Not everyone has a good internet connection. In fact, when I reviewed your solution at my university (where the internet is not very good), it took more than 5 seconds to load and I could only see the white letters.
You could even use Lighthouse to check the performance of your page, and read their article on Large Network Payloads: Avoid enormous network payloads
Apart from that minor issue, the other aspects of the solution are impeccable. It is a very impressive job.
Happy coding !
Marked as helpful0@visualdennissPosted over 1 year ago@MelvinAguilar Hey Melvin,
thanks a lot for pointing out such an important point! I've completely forgotten to compress my images before deploying and the fact that i'm using custom images rather than FEM's own image assess, which are already optimised in size. I'll try to reduce file size asap, 5.07 MB sounds insane, it is as if i'm sending node modules to the client 😱.
Thanks for the resource and link as well. Do you have any recommended tools for compressing images? I usually go with this one.
Now checked and it looks like you were actually referring to mobile image, which is indeed 5mb, while the desktop one was 800kb. I've compressed and replaced the mobile bg with a 700kb version now, hopefully it is a better experience now.
0@MelvinAguilarPosted over 1 year ago@visualdenniss That is a good online option for reducing the size of images. If you use Photoshop, you can compress images when exporting them. If you use Figma, there are plugins such as "TinyImage Compressor" that allow you to export images up to 95% smaller. And if you use Canva, you could reduce the dimensions of the image for a lower file size.
I would like to reiterate that overall, this solution is well done. :)
0@visualdennissPosted over 1 year ago@MelvinAguilar Thanks a lot for all the resources you have shared. Indeed Photoshop is a good idea, it just didn't cross my mind to use it for a simple compression task as i usually use the app for actual photo editing and so on. So drag-drop online felt pretty convenient but PS is a good option too.
Thank you again! 🙏
0 - @EdwinSchPosted over 1 year ago
Hi there! Just wanted to say I love your personal takes on the standard designs. 👍 It takes a lot of creativity and design knowledge to re-design the entire challenge(s). Just had the same tip as Melvin already mentioned above; keep track of your image/content sizes. Users will leave an application if the performance is slow, no matter how great the design. Easy fix by just compressing down your images.
Keep it up! Great stuff :)
1@visualdennissPosted over 1 year ago@EdwinSch Hey Ed,
thanks a lot for your encouraging words! I appreciate it a lot to hear that you enjoyed the final results of my takes on these challenges.
For sure, i'll be keeping a special eye on the optimization of custom images in my upcoming projects. Thanks again!
0@EdwinSchPosted over 1 year ago@visualdenniss Maybe you already know this, but you can actually check different loading speeds in the browser dev tools. Within the 'network' tab you can switch between mocked network speeds like; fast, 3G, slow, and so on.
1@visualdennissPosted over 1 year ago@EdwinSch Yes, i do use it from time to time but rarely, maybe i should make it a habit, thnx for reminding me!
0 - @MadiMalikPosted over 1 year ago
I told you not to underestimate your design skills, even when it comes to building forms. Your animation was fantastic, and I thoroughly enjoyed it!
1@visualdennissPosted over 1 year ago@MadiMalik Hahah Madi ❤️ i'm glad that i've made you enjoy even a web form 😈
0 - @hyeo151Posted over 1 year ago
Love your work !
1 - @Jo-cloud85Posted over 1 year ago
It is really inspiring for aspiring developer to see pro-developers like yourself pushing boundaries for each challenge, going beyond the basic requirements. This is a really impressive little project by the way! Awesome!
1@visualdennissPosted over 1 year ago@Jo-cloud85 Thanks a lot for your encouraging words! While i'm definitely nowhere near pro, i hope to get there one day :) I'm very happy to hear that the projects have been inspirational for you, which motivates me to go further as well.
0 - @Shadow-IO-oIPosted over 1 year ago
🦊^_^🦊👍
1 - @hirashabeerPosted 6 months ago
hey @visualdenniss...could you spare a moment to review my recently solve expenses chart component solution and answer my questions pleaseeeeeeee
i want to get rid of this headache asap0 - @smitvalturePosted over 1 year ago
Great website
0 - @abobykinPosted over 1 year ago
WOW, it's really cool!
So good looking work, seems like you love your work & users. I made a task for myself to review your code carefully if I can find anything else after all guys of course (now it's just pretty late for my), but for now please take at least my respect so far Denis!
Thank you for your great efforts, it's really inspiring to learn (once again)!
0@visualdennissPosted over 1 year ago@abobykin Hello Alexander,
thanks a lot for your compliments! Happy to hear it has inspired you, which is always a driving force for me to continue my passion :) Sure, feel free to take a look at the code and if anything is unclear for you, let me know. Happy coding!
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord