Submitted over 3 years ago

Ping coming soon with staggering animations

Abhik• 4,840

@abhik-b

Preview site View code

This is a solution for...

Ping single column coming soon page

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hi Frontend Mentors 👋,

I created some staggering animations using setTimeouts , however I personally feel there's a better a way for that. So if anyone knows that please help me out!

Any feedbacks,tips,suggestions will be highly appreciated 🙏

Community feedback

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

Hey, hey, Abhik! 👋

Always nice to see you complete another challenge! 😀 This one looks great! 👍 The animations you added are cool! 😎

Two very small things I might suggest are adding a max-width to the input element and the button element so that they aren't too wide when the layout first changes from desktop to mobile and perhaps choosing a slightly darker color for the blinking vertical line in the input element and the outline of the button so that they are easier to see against the white background. 😉

Keep coding (and happy coding, too)! 😁

And, of course, happy holidays! 🎄

Marked as helpful

Abhik• 4,840

@abhik-b

Posted over 3 years ago

Hey @ApplePieGiraffe 👋

Thanks for the helpful feedback , I have implemented those changes and as always your tips made it look much better 🙌

Happy coding and happy holidays ! 🥳

ApplePieGiraffe• 30,545

@ApplePieGiraffe

Posted over 3 years ago

@abhik-b

Just took another look, and the changes look great! Good work! 👍

Aayush Sood• 1,165

@soodaayush

Posted over 3 years ago

You might want to add media queries for the input and button because on bigger screens, the input and button are starched.

Otherwise you did great!

Happy coding!

Marked as helpful

Abhik• 4,840

@abhik-b

Posted over 3 years ago

@WarBaddy Thanks for the feedback , I'll implement those tips

Happy coding 😇

Guy Ezra• 615

@ezraguy

Posted over 3 years ago

hey @abhik-b, Great work! about the setTimeout on the animations, maybe animation-delay in your CSS is the solution you are looking for.

Marked as helpful

Abhik• 4,840

@abhik-b

Posted over 3 years ago

hey @ezraguy , I don't know why I put the animations on js file 😅😅 , I moved them to css and it reduces the html issues as well. Thanks for that ,

However I still need to use setTimeout to set the opacity which otherwise looks weird!

Anyway thanks for taking a look on my solution 😇

Please log in to post a comment

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