Spent 7 hours on a wavy flag that turned out to be one missing CSS variable

I was building this animated flag for a client demo, all pure CSS with gradients and clip-path. Kept getting this weird jagged edge on the ripple effect that I couldn't smooth out no matter what I tried. Tried different easing functions, adjusted keyframe percentages, even rebuilt the whole shape from scratch once. Then I noticed I had declared - wave-offset but never actually used it in the animation property. After 7 hours, one line fixed it. Has anyone else had a typo or missing variable eat up an entire evening like that?

1 comments

1 Comment

allen.reese23d ago

Missing variables are the worst because your brain assumes the problem is way deeper than it actually is... I spent a whole night chasing a broken hover effect that turned out to be a stray semicolon in the wrong spot.