Design comparison
Solution retrospective
👋 Greetings, fellow developers! I wanted to share that I had a blast completing this challenge. It took me 3 hours and 2 cups of coffee ☕ to create the layout using Bootstrap, and I used React with Framer Motion for the animations. 🚀 I also used SVG to create animated text. 💥 Finally, I wanted to thank Sir Dennis for inspiring the animation from his Solution. 🙌 I included his name and LinkedIn account in the footer. Thanks for checking out my project! 😊👍
Community feedback
- @visualdennissPosted over 1 year ago
Hello Saad,
thanks a lot for the shoutout and happy to hear that you were inspired by my solution! :) Good job implementing with the framer-motion!
When resizing on desktop, the image gets distorted, so you can prevent that by using object-fit: cover; on the img element. You can also add some easing to the animation to make it smoother and natural looking.
At the bottom part of the letter 'W', there seems to be some weird shapes in the svg, idk why that.
Also i think it is better to avoid using fixed/absolute values like "600"px for the initial value of the image, cuz depending on the screen size, parts of the image is visible on initial load. Consider using something more responsive, maybe percentage etc.
Hope you find this feedback helpful and keep up the great work!
Marked as helpful1@Saad-HishamPosted over 1 year agoThank you for your helpful suggestions. I applied them and noticed that the issue with the "w" in my design may be due to the font family I used. I used the same font as the one in the design, but I'll search for a better one that can accurately depict the "w". but my eyes can't see differently after adding ease-in-out if you see any suggestions or have a better idea please share it with me Thanks again for your input, @visualdenniss
0@visualdennissPosted over 1 year ago@Saad-Hisham
you can try adding some extreme easing values for test purpose, just to see if it actually applies or framer-motion somehow ignores it for some reason, which is also sometimes the case. I also struggle with framer-motion a bit tbh, so i moved onto GSAP. Having a feature like timeline is very convenient also and i also like that i can keep my html completely clean with GSAP.
0 - @SheltonFrPosted over 1 year ago
Wow.... This is really amazing, lived it too much 👏👏❤️
1 - @LifeofPaksPosted over 1 year ago
Man you bodied this project🫡 🙌🏽, i obviously have a lot to learn. You just inspired me 💪🏽... Great Job Sire👏
1
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