Loading…
5
Just realized how much math goes into a simple CSS wave pattern
I spent last Tuesday trying to make an ocean wave animation for a friends portfolio page. Nothing fancy, just some moving blue curves. I figured I would eyeball the keyframes and be done in an hour. Turns out, to keep the wave edges from snapping or distorting, you need to understand sine functions and how they map to translateX values. I looked up a few breakdowns on CodePen and one tutorial from a guy in Rotterdam, and the math was way deeper than I expected. It got me wondering, how many of you actually plan out the coordinate math before you start a piece, or do you just fiddle until it looks close enough? I never touched trigonometry after high school, so this was a wake up call for me.
2 comments
Log in to join the discussion
Log In2 Comments
theabennett2mo ago
Ever tried plotting those sine points in a spreadsheet first?
3
simonreed2mo ago
Plotting sine points in a spreadsheet sounds way too organized for me, honestly. I tried that once for a bouncing ball animation and ended up just staring at columns of numbers like they were ancient runes. The real kicker is that the spreadsheet approach works fine for static points, but the moment you add easing or a second wave layer, the whole thing falls apart. @theabennett, you seem like the type who would actually color code those cells, which is both terrifying and impressive. I ended up just copying a codepen snippet and tweaking the speed until my friend said it looked "oceanish," which is basically how I do all my math now. The Rotterdam tutorial thing reminded me of that time I tried to learn Blender from a Dutch guy's YouTube series, and I still dont know what a bezier handle does, but I can make a mean donut.
2