Skip to content
Submitted over 3 years ago

Responsive Chat app Illustration, animated with animate.css

Israel Adefidipe•360
@iadefidipe
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Chat app CSS illustration
  • HTML
  • CSS
3intermediate

Design comparison

SolutionDesign

Solution retrospective

I thought I wasn't going to be able to do this challenge, but once I started it wasn't as hard as it looked🦸‍♂️, it was actually challenging though. I learnt how to apply animate.css to help with some of my animations, pretty cool library.

I would really appreciate comments on my coding style, how to improve this particular challenge, what I need to improve on🙏

I couldn't animate the last two chat messages with animate.css library and i really want to know what was wrong, I actually applied the animation classes correctly but it isn't working. Anything I can do to solve that?

Community feedback

  • Patrick•14,265
    @palgrammingPosted over 3 years ago

    overall it looks good. Have you uses https://cssbattle.dev/ if you liked creating this project trying to make some of their shapes you should enjoy and learn from also

    in terms of the animation I cannot help but it would look better if the message/elements started at the bottom of the phone screen and then move to the top like a real phone. I think that will make for a much better effect

    1
    Israel Adefidipe•360
    @iadefidipePosted over 3 years ago

    @palgramming Thanks, I will try that out. I will work on your animation Idea when I come back to improve the code. Thanks for the comment, i really appreciate.

    0

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