Officelite coming soon site with React, styled-component, and Joi.

@RayaneBengaoui

Hello Rayane, It's kind an honor that I've got a comment from great programmer like you!

I don't know about the animation library in depth but I DO recommend AOS because all you need to do is just install package, import CSS and module, put attributes to elements and thats it!!

Here is the example of installation of AOS for React. https://github.com/michalsnik/aos/issues/49

Regarding to the input form, the logic is simple, the text which goes up and down is <label>, not placeholder. You can implement this form giving the <label> horizontal position where you want label to move, apply the style conditionally only when the form is focused and form has a value (length).

To combine the action of user's focus on <form> and the animation of <label> which are totally different elements, I used "~" selector in ":focus" to grab <label>. Therefore <label> element is under the <form> one.

I apologise if my explanation was bad😅

Have a good day too!

@josuke0227 Ho thank you ! (I wish I was a great programmer 😄)

Then I'll definitely check AOS someday, it looks funny to use !

I understand your process, thanks for taking the time to explain it to me, It's really kind from you 🙂

Hope to see you soon on another challenge, 今日頑張ってください 👋

@RayaneBengaoui

I used angle bracket in the last message but this text box drops all the characters wrapped by angle bracket when submitting😱

Still, it’s a relief to hear that my explanation made sense.

Thank you for taking your time and reading it.

お互いに頑張りましょう💪