Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Anna Leighβ€’ 5,135

    @brasspetals

    Submitted

    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!

    Nir Tamirβ€’ 45

    @nirtamir2

    Posted

    Awsome! Nice use of the picture element for and srcset attribute. I like that you use opacity + mix-blend-mode: multiply; on the image and color the picture container for the image coloring. It looks great and the animations are great!

    1