@debasishrowloSubmitted about 1 year ago
This is my solution to the "Memory Game" challenge using React and tailwind.
Please let me know if you have any feedback or come across any issues with the game.
Madi
@MadiMalikAll comments
- @visualdennissSubmitted over 1 year ago
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 🔥
@MadiMalikPosted over 1 year agoI 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 - @visualdennissSubmitted over 1 year ago
You can find MY ANIMATION TUTORIAL HERE
🔥 I've implemented my own custom design on top the original fem design and used GSAP to animate all elements in a timeline sequence. For optimum animation experience, recommended viewing dimensions: 1440x800. On desktop, after a while background image fades into a new one infinitely.
It is also responsive for mobile. There might be some slight issues for tablet still.
This time I've also added a little email validation using REGEX.
[PS. If you have set prefers-reduced-motion to true - it wont animate]
@MadiMalikPosted over 1 year agoWow, I absolutely love this solution! The color scheme, animation, and font adjustments are exceptionally well done. Without a doubt, I will be giving it a try.
0
