Not Found
Failed to decode param 'V%E1clav'
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

πŸ”₯ Animated Base Apparel Coming Soon Page πŸ”₯

Saad Hishamβ€’ 1,750

@Saad-Hisham

Desktop design screenshot for the Base Apparel coming soon page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

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

P
visualdennisβ€’ 8,255

@visualdenniss

Posted

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 helpful

1

Saad Hishamβ€’ 1,750

@Saad-Hisham

Posted

Thank 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
P
visualdennisβ€’ 8,255

@visualdenniss

Posted

@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

@SheltonFr

Posted

Wow.... This is really amazing, lived it too much πŸ‘πŸ‘β€οΈ

1
Paksβ€’ 1,350

@LifeofPaks

Posted

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
Discord logo

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