Form Wave Animation
I don’t even know what to say about this one. I did it, and it worked, but I didn't fully get it.
When I first watched the video explaining what the project is, I couldn’t picture how we were going to make the label move like that — the wave effect that follows when you focus on an input. So I started with the basic HTML and CSS, without the actual core of the project, which was the movement of the label. Then early on in the solution video, the guy explained what we were going to do: wrap each letter of the label in a <span> and use transform and transition-delay to make it move one after the other. That was when I got it, at least a bit.
My code worked, but it didn’t feel right. His code looked so clean. Mine just… worked. And I guess that’s fine for now, but it made me realize how much difference there is between writing code and writing clean code.
So I don’t have much to explain for this one. It’s probably my least favorite project so far because it made me see how much I still don’t know.
You can see the live demo here
and the code on GitHub here
Top comments (0)