@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
@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
@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.
