What was originally a break from a larger project turned into a fun animation experiment! I spent an ungodly amount of time messing around with cubic-bezier curves. 😅 Hopefully they don’t mess up the screenshot.🤞 (Edit: Yep, they did. But only a little! 😁) The statistics are only animated on the desktop layout, as I felt it was a bit too much on mobile.
First time implementing prefers-reduced-motion
to prevent animations for those who prefer it reduced. It seems to work when I test it, but please let me know if there’s any goofiness.
Also first time using mix-blend-mode
, which seemed to work well in combo with opacity to get close (I hope) to the header image design.
Shoutout to @ApplePieGiraffe for inspiring me to play around more with animations.
As always, any and all feedback is greatly appreciated!